ShowMeBug字节级回放在线笔面试过程实现思路

为一个数字化驱动的可记录、可分析、可复盘的技术评估与在线 Coding 面试平台，ShowMeBug 的字节级回放在线笔面试过程特别为面试官和 HR 们所看重。

那么 ShowMeBug 是怎么做到让面试官和 HR 像看电影一样，回看候选人的在线笔面试过程呢？今天小编就和大家一起来看看，Web 端实现回放功能的方案都有哪些。

方案一：MediaRecorder 录屏

MediaRecorder 是最新的 Web 标准（仍处于工作草案状态），目的是方便用户进行媒体录制，不过也正因为该标准非常新，故浏览器兼容性不是很好，对于 ShowMeBug 这种需要适配诸多设备类型的场景而言，不是很合适。

方案二：Canvas 截图

这一方案主要是利用了 canvas.captureStream() 这个接口，将 canvas 中获取到的截图以流的方式传给上面提到的 MediaRecorder 接口，从而生成视频。

let allChunks=[];
let canvas=document.getElementById("canvasId");
let stream=canvas.captureStream(60); // 60 帧每秒
let recorder=newMediaRecorder(stream, {
  mimeType: 'video/webm;codecs=vp9',
});
// canvas 录制回调
recorder.ondataavailable=(e)=>{
   allChunks.push(e.data);
}
recorder.start(10);

这一方案的问题主要是要生成流畅的视频需要消耗非常大的带宽，且只适用于 canvas 录屏，虽然有 html2canvas 这种库，但也没到可应用于生产环境的程度。

方案三：基于用户操作记录还原

那我们是否可以收集用户的操作序列，然后按照操作的先后顺序，将操作应用到需要录屏的页面DOM上呢？这样不就能还原用户的所有操作过程了吗？

要做到这一点，我们需要：

1. 在前端用 MutationObserver API 监听 DOM 变更，比如节点增减、属性变化、文本内容变动等；
2. 监听用户鼠标的 mouseover 事件，并将其变动时的坐标和时间记录下来；
3. 将上述两步的记录按照时间先后顺序放入队列并上传到服务器；
4. 后端将事件队列应用到初始页面上，生成图片再拼接成视频；
5. 最后将视频链接发送给用户即可。

这个方案网络开销小，且兼容性好，非常适合录屏回放的场景。知名录屏回放工具 rrweb 就是这么实现的。

rrweb 是 'record and replay the web'（录制并回放互联网） 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作。

rrweb 主要由 3 部分组成：

rrweb-snapshot，包含 snapshot 和 rebuild 两个功能。snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识；rebuild 则是将 snapshot 记录的数据结构重建为对应的 DOM。

rrweb，包含 record 和 replay 两个功能。record 用于记录 DOM 中的所有变更（mutation）；replay 则是将记录的变更按照对应的时间一一重放。

rrweb-player，为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。

可以看出，rrweb 就是第三个方案的实现，不过 ShowMeBug 并没有使用 rrweb，而是投入了大量精力，基于第三个方案自研了字节级回放技术。让笔面试过程都有存档，方便面试官和 HR 回溯笔面试过程每一秒。

因为用心，所以专业，如果您有在线笔面试需求，欢迎试用 ShowMeBug 哦～