burt-rrweb

录屏rrweb封装插件

支持打包引入功能点

1. 需要支持打包压缩版(x.min.js)和非压缩版本(x.js)。
2. 支持 AMD/CJS/ESM 模块引入。
3. 支持通过script脚本直接引入链接。

// ESM
import * as rrweb from 'tools';

//cjs
const rrweb = require('rrweb');

// AMD
require(['tools'],function(){
  ...
})

// script 脚本
<script src="https://xxx.com/rrweb"></script>

打包

1. npm i
2. npm run build
3. 登录npm: npm login
4. npm发布: npm publish

使用

引入方式

1. npm方式

npm i burt-rrweb -S
import * as clairvoyanceRecord from 'burt-rrweb'

2. 直接插入方式

通过CDN访问:
地址格式为：https://cdn.jsdelivr.net/npm/(your packagename)@(version)/(file)

<script src="https://cdn.jsdelivr.net/npm/burt-rrweb@0.0.2/dist/rrweb.min.js"></script>

录屏相关

1. 开始录屏

clairvoyanceRecord.refreshMsgId();
clairvoyanceRecord.start({
  saveLoopTime: 3000,
  publicKey: 'dmFzY29RaWFuWmhlbmc=',
  serverUrl: 'http://47.99.75.3/recordScreen/saveOrderOperation', // 测试环境的api
	lastServerUrl: '/api/policy/saveScreenRecordInfo' // 最后一次保存的节点
});
console.info('%cindex == > 开始录制', "color: green")

2. 如果是需要续录

clairvoyanceRecord.continueStart(policyId , {
  saveLoopTime: 3000,
  publicKey: 'dmFzY29RaWFuWmhlbmc=',
  serverUrl: 'http://47.99.75.3/recordScreen/saveOrderOperation', // 测试环境的api
  // 最后一次保存的节点， 可以不传，默认为'/api/policy/getScreenRecordInfo'
	lastServerUrl: '/api/policy/saveScreenRecordInfo',
  // 获取保存的最后一次的录频信息，可以不传，默认为'/api/policy/getScreenRecordInfo'
  getLastRecordUrl: '/api/policy/getScreenRecordInfo', 
});
console.info('%cindex == > 开始续录-录制', "color: green")

3. 扩展方法录屏方法

clairvoyanceRecord.extend({
  say: function(msg='哈哈哈') {
    console.log(msg)
  }
});