前端录制与回放

1. 背景

　　1.1 selenium等自动化测试工具

　　1.2 webRTC屏幕录制

　　1.3 rrweb+rrwebplayer

2. 对比

　　selenium适用于自动化测试、自动运行脚本；webRTC适用于录制视频与上传分析；rrweb适用于后台录制与行为分析。都可用来排查问题、指导用户操作等场景。

3. rrweb使用

　　3.1 引入

　　npm i来安装rrweb和rrwebplayer

　　3.2 api

　　rrweb.record，可接收多个参数，第一个参数为响应，其他为配置；

　　rrwebPlayer，target回放元素，props配置项；

　　3.3 示例

// HTML


// JS
const rrweb = require("rrweb");
import rrwebPlayer from "rrweb-player";

const events = ref([]);
const stopFn = ref(null);
const showReplay = ref(false);
const replayer = ref(null)

const record = () => {
  console.log("开始录制");
  stopFn.value = rrweb.record({
    emit: (event) => {
      events.value.push(event);
    },
    // 支持录制canvas
    recordCanvas: true,
    collectFonts: true,
  });
};
const replay = () => {
  stopFn.value();
  showReplay.value = true;
  new rrwebPlayer({
    // 可以自定义 DOM 元素
    target: replayer.value,
    // 配置项
    props: {
      // 传入events
      events: events.value,
    },
  });
};
const reset = () => {
  showReplay.value = false;
  events.value = []
};

4. 分析

　　4.1. 记录内容

　　记录的是DOM结构

　　4.2 可记录行为

• 节点创建、销毁
• 节点属性变化
• 文本变化
• 鼠标移动
• 鼠标交互
• 页面或元素滚动
• 视窗大小改变
• 输入

5. 优化

　　数据采集来是进行分析的，那就自然有客户端分析和服务端分析两种。

　　5.1 客户端分析

　　将采集数据和分析算法一并放在前端，讲分析结果传给服务端。好处是节省服务端资源，坏处是可能影响用户体验如卡顿、存储设计、网络问题等。

　　5.2 服务端分析

　　将采集数据实时上传，可结合前边的schedule.yeild等，避免影响用户体验。且由于采集的是界面dom，所以界面内容较多时数据自然就很大，所以需要进行相应的优化，如：

　　① 采集页面不应有太多无关dom，所以尽可能在简洁单独的界面进行采集分析；

　　② 虽然小于视频录制的大小，但是内容还是很大的，可以使用压缩配置，如下

 1 const record = () => {
 2   console.log("开始录制");
 3   stopFn.value = rrweb.record({
 4     emit: (event) => {
 5       events.value.push(event);
 6     },
 7     recordCanvas: true,
 8     collectFonts: true,
 9 +    packFn: rrweb.pack
10   });
11 };
12 
13 const replay = () => {
14   stopFn.value();
15   showReplay.value = true;
16   new rrwebPlayer({
17     // 可以自定义 DOM 元素
18     target: replayer.value,
19     // 配置项
20     props: {
21       // 传入events
22       events: events.value,
23 +      unpackFn: rrweb.unpack,
24     },
25   });
26 };