前端錄製與回放

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，所以儘可能在簡潔單獨的界面進行採集分析；

　　② 雖然小於視頻錄製的大小，但是內容還是很大的，可以使用壓縮配置，如下

 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 };