rrweb 浏览器录制及转视频方案

背景

最近在做保险相关的项目，由于医保局的监管要求，用户购买保险的流程必须可以回溯。这样在用户与保险公司之间产生纠纷时，就可以有迹可循。
比如用户说，当时为自己和妻子二人投了保，但是保险公司后台只有一笔订单，这时如果只是把后台数据给用户看，用户肯定不会信服。

最好的手段就是把用户投保的具体操作过程录制成视频，在发生纠纷时，直接以视频为证，这样才更有说服力。

DOM 快照

当我们想要查看用户在投保过程中某一时刻的页面状态时，我们只需要将那一刻的页面 dom 结构，以及页面中的 css 样式记录下来，然后在浏览器中重新渲染出来就能达到回溯的效果了。

const cloneDoc  = document.documentElement.cloneNode(true); // 录制
document.replaceChild(cloneDoc, document.documentElement); // 回放

这样我们就实现了某一时刻 DOM 快照的功能。但是这个录制的 cloneDoc 还只是内存中的一个对象，并没有实现远程录制。

序列化

为了实现远程录制，我们需要将 cloneDoc 这个对象序列化成字符串，保存到服务端，然后在回放的时候从服务器上取出来，交给浏览器重新渲染。

const serializer = new XMLSerializer(); // XMLSerializer 是浏览器自带的 api，可以将 dom 对象序列化成 string
const str = serializer.serializeToString(cloneDoc);
document.documentElement.innerHTML = str;

至此，我们就完成了对用户界面某一时刻的远程录制功能。

定时快照

但是我们的目的是录制视频，只有一个 dom 快照显然是不够的。了解动画的同学都应该知道，动画是由每秒至少 24 帧的画面按顺序播放而产生的。在这里顺便科普一下这块的知识，当我们人眼观察到一个物体之后，这个画面会在我们的视网膜中停留16.7ms左右的的时间，专业名词叫做视觉停留，那么具体到给我们的感觉就是这个画面是“渐渐”消失的。

那么当我们在播放动画的时候，当第一帧画面在我们的视网膜中刚刚消失的时候，把第二帧放出来，那么给人的感觉就是画面是连续的，是在动的。但是动画里的人物动作给人的感觉还是有点卡顿、有点不自然的，为什么呢？我们来算一下: 1秒/24帧 = 41.7毫秒，远远低于人眼可分辨的16ms的间隔，所以我们会觉得有点卡卡的。