乐趣区

关于前端:ShowMeBug字节级回放在线笔面试过程实现思路

jiezi

为一个数字化驱动的可记录、可剖析、可复盘的技术评估与在线 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 哦～

退出移动版