回溯-基本思路

一、前端采集

1. html2json
前端通过js把html转成dom，(当然也可以不转，那样可能后端不好做数据压缩和增量更新) 然后上传存储，同时需要生成一个唯一id并且带上当时的时间戳，当然也可以是账号id,需要使用id串联起来整个回溯的流程。

2. 监控变化上传数据

第二部我们需要把用户在界面的每次操作都记录下（包括：光标的移动，dom变化，属性变化等等）这些变化都需要把对应的html2json上传到后端，监控dom和属性等变化使用MutationObserver

 // 选择需要观察变动的节点
const targetNode = document.body;
// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };
// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};
// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);
// 以上述配置开始观察目标节点
observer.observe(targetNode, config);
// 之后，可停止观察
observer.disconnect();

对于光标的移动，这个如果要区分移动端和pc端，需要去监控mouse 和 touch 相关事件，把事件名称和当前的时间戳以及光标移动的轨迹上传到后端保存。

document.body.addEventListener('mousemove', e => {
  //todo
});

document.body.addEventListener('touchmove', e => {
  //todo
});

二、后端压缩处理存储数据

后端可以使用json-diff把数据进行处理，压缩处理之后供回放使用。

三、播放

1. json2html

播放首先需要把json数据在转成html，然后写入到iframe中来展示页面，这个我们系列文章中已经有实现方案，当然node端也可以实现使用parse5.

2. 数据流播放
前端通过接口返回的数据流进行播放，同时需要使用canvas来模拟光标的动作，iframe播放ui展示

3. 转成视频
当然我们的播放其实是特定的播放器，无法让发给别人直接看，要想让视频可以独立播放不依赖我们的系统，我们需要把它转成MP4或者其他的视频格式，这里可以使用puppeteer来定时截图，然后把截图使用FFmpeg转成视频。