前端录制与回放

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
<template>
  <div class="main">
    <div >
      <el-button @click="record">录制</el-button>
      <el-button @click="replay">回放</el-button>
      <el-button @click="reset">返回</el-button>
    </div>
    <div v-if="!showReplay">
      <div>
        <el-input style="width: 300px" v-model="value" />
      </div>
      <div>
        <el-button>按钮1</el-button>
      </div>
      <div>
        <el-button>按钮2</el-button>
      </div>
      <div>
        <el-button>按钮3</el-button>
      </div>
    </div>
    <div ref="replayer"></div>
  </div>
</template>

// 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，所以尽可能在简洁单独的界面进行采集分析；

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

const record = () => {
  console.log("开始录制");
  stopFn.value = rrweb.record({
    emit: (event) => {
      events.value.push(event);
    },
    recordCanvas: true,
    collectFonts: true,
+    packFn: rrweb.pack
  });
};

const replay = () => {
  stopFn.value();
  showReplay.value = true;
  new rrwebPlayer({
    // 可以自定义 DOM 元素
    target: replayer.value,
    // 配置项
    props: {
      // 传入events
      events: events.value,
+      unpackFn: rrweb.unpack,
    },
  });
};