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

6次阅读

共计 1497 个字符，预计需要花费 4 分钟才能阅读完成。

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

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

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

这一计划次要是利用了 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 上呢？这样不就能还原用户的所有操作过程了吗？

要做到这一点，咱们须要：

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

这个计划网络开销小，且兼容性好，非常适合录屏回放的场景。知名录屏回放工具 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 哦～

正文完