使用rrweb进行前端页面可回溯录制

配景

公司需要对用户的页面交互进行可回溯记录，固使用rrweb进行需求实现；
先容

rrweb 全称 'record and replay the web'，是当下很流行的一个录制屏幕的开源库。与我们传统认知的录屏方式（如 WebRTC）不同的是，rrweb 录制的不是真正的视频流，而是一个记录页面 DOM 变革的 JSON 数组，因此不能录制整个显示器的屏幕，只能录制欣赏器的一个页签。
   rrweb的github地址：rrweb/guide.zh_CN.md at master · rrweb-io/rrweb · GitHub
  功能实现

• 首先安装rrweb和rrweb-player
  

1. npm install --save rrweb
2. npm install --save rrweb-player

复制代码

• 创建screen-record.js文件对上报方法进行封装
  

rrweb 提供了一个基于 fflate 的简单压缩函数，在提交录制中可以作为 packFn 传入使用。
可以将录制流程分为不同的节点（stepIndex），与服务端商量好进行时间轴排序存储

1. import { record, pack, unpack } from 'rrweb'
2. import { saveTCDataByXhr, saveTCDataByBeacon, getTcKey, saveTCDataByFetch } from '@/api/record'
4. /**
5. * 开始屏幕录制
6. */
7. export function startRecord() {
8.   if (typeof window.stopRecordFn === 'function') {
9.     window.stopRecordFn()
10.   }
11.   window.screenRecords = []
12.   console.log('=========== Record Start ==========')
13.   const stopFn = record({
14.     emit(event) {
15.       window.screenRecords.push(event)
16.     },
17.     packFn: pack, // rrweb 内包含了基于 fflate 的简单压缩 rrweb.pack，在录制时可以作为 packFn 传入。
18.     inlineStylesheet: false,
19.     sampling: {
20.       scroll: 150, // 每 150ms 最多触发一次
21.       // set the interval of media interaction event
22.       media: 800,
23.       // input: 'last' // 连续输入时，只录制最终值
24.     },
25.   })
26.   window.stopRecordFn = stopFn
27. }

复制代码

•  提交录制数据
  

由于一般提交页面录制数据的时机为页面离开的时机，当欣赏器中的某个页面发生停止时，不能包管进程中的HTTP请求会成功（请参阅有关“停止”和页面生命周期的其他状态的更多信息）。以是我们有如下几个解决方法：

• 使用async/await阻塞异步请求，直至请求发送完毕再进行路由跳转，但似乎这种方法牺牲了用户体验；
  
• 使用fetch请求的keepalive标识进行数据提交，但是会有欣赏器兼容性题目，其兼容性如下图：
  
  
  
• 使用Navigator.sendBeacon()，该函数专门用于发送单向请求（信标）。但是此 API 不答应您发送自定义标头。因此，为了让我们以“application/json”的情势发送数据，我们需要做一些小调整并使用Blob：
  1. /**
  2. * beacon上传可回溯录制数据
  3. */
  4. export function saveTCDataByBeacon(data) {
  5.   const url = `${RECORD_BASE_API}/tc/groOrder/saveTcData`
  6.   // let data = new FormData();
  7.   // for (let key in params) {
  8.   //     data.append(key, params[key]);
  9.   // }
  10.   const headers = {
  11.     type: 'application/json'
  12.   }
  13.   const blob = new Blob([JSON.stringify(data)], headers)
  14.   return navigator.sendBeacon(url, blob)
  15. }

  复制代码
  但是注意：beacon只能提交少量数据，chrome限定最高64KB
  

基于上诉思路我们封装提交录制方法：

1. /**
2. *
3. * @param stepIndex 录制节点 立即投保: 100, 暂存: 200, 提交审核: 300, 支付: 400, 支付成功: 500
4. * @param goodsCode
5. * @param submitType 提交数据的方式 默认xhr,页面返回beacon
6. */
7. export async function submitRecord(stepIndex, linkNo, submitType = 'xhr') {
8.   if (!window.screenRecords || !window.screenRecords.length) return
9.   const startEvent = unpack(window.screenRecords[0])
10.   const endEvent = unpack(window.screenRecords[window.screenRecords.length - 1])
11.   const { data: tcKey } = await getTcKey({ linkNo })
12.   const dataString = JSON.stringify(window.screenRecords)
13.   window.screenRecords.length = 0
15.   const params = {
16.     linkNo,
17.     tcKey,
18.     stepIndex,
19.     startTime: startEvent.timestamp,
20.     endTime: endEvent.timestamp,
21.     data: dataString,
22.   }
23.   // if (stepIndex >= 60) {
24.   //   params.linkNo = linkNo
25.   //   delete params.tcKey
26.   // }
28.   return new Promise((reslove, reject) => {
29.     // @ts-ignore
30.     if (navigator && navigator.sendBeacon && submitType === 'beacon') {
31.       // beacon只能提交少量数据，chrome限制最高64KB
32.       const result = saveTCDataByBeacon(params)
33.       if (result) {
34.         console.log('回溯数据请求成功排队 等待执行')
35.         reslove()
36.       } else {
37.         console.log('回溯数据提交失败')
38.         reject('回溯数据提交失败')
39.       }
40.     } else if (submitType === 'fetch') {
41.       saveTCDataByFetch(params).then(() => {
42.         reslove()
43.       }).catch(e => reject(e))
44.     } else {
45.       saveTCDataByXhr(params).then(() => {
46.         reslove()
47.       }).catch(e => reject(e))
48.     }
49.   })
50. }

复制代码

1. /**
2. * xhr上传可回溯录制数据
3. */
4. export function saveTCDataByXhr(data) {
5.   return request({
6.     url: `${RECORD_BASE_API}/tc/groOrder/saveTcData`,
7.     method: 'post',
8.     data,
9.   })
10. }
12. /**
13. * Fetch上传可回溯录制数据 将 keepalive 设置为 true 就可确保浏览器关闭或回退，调用接口的链接不会被关闭，调用成功
14. */
15. export function saveTCDataByFetch(data) {
16.   const url = `${RECORD_BASE_API}/tc/groOrder/saveTcData`
17.   const headers = {
18.     'Content-Type': 'application/json;charset=UTF-8',
19.     [REQUEST_TOKEN_KEY]: getToken()
20.   }
21.   return new Promise((resolve, reject) => {
22.     fetch(url, {
23.       method: 'POST',
24.       headers,
25.       body: JSON.stringify(data),
26.       // keepalive: true,
27.     })
28.       .then(res => {
29.         resolve(res.json())
30.       })
31.       .catch(error => {
32.         reject(error)
33.       })
34.   })
35. }

复制代码

页面使用

开始录制：

1. startRecord()

复制代码

提交录制数据：

1. submitRecord(300, this.baseInfo.grpLinkNo)

复制代码

页面回放：

1. </template>   
2.   <!-- 回放容器 -->
3.   <div ref="replayContainer" class="replay-container flex justify-center" />
4. </template>
6. <script setup>
7.   import { ref, onMounted} from 'vue';
8.   import RrwebPlayer from 'rrweb-player';
9.   import { unpack } from 'rrweb';
11.   const replayContainer = ref();
12.   const events = ref([]) // 回放数据通过服务端获取
13.   
14.   onMounted(() => {
15.      new RrwebPlayer({
16.          target: replayContainer.value,
17.          unpackFn: unpack,
18.          props: {
19.             events: events, // 包含回放所需的数据
20.             skipInactive: true, // 是否快速跳过无用户操作的阶段
21.             autoPlay: false, // 是否自动播放
22.             UNSAFE_replayCanvas: true, // 回放时是否回放 canvas 内容，开启后将会关闭沙盒策略，导致一定风险
23.             mouseTail: false, // 是否在回放时增加鼠标轨迹
24.           },
25.         })
26.      })
27.   })
28. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。