网页录屏 - rrweb

官网： https://www.rrweb.io/
github： https://gitcode.net/mirrors/rrweb-io/rrweb

1、rrweb 是什么

1、定义：rrweb 指的是record and replay the web，它是一个用于记录和回放用户在网络上的交互的工具；

2、用途：分析用户；重现bug；代替视频录制；实时协作；

3、流程：
录屏：dom 操作——事件记录、序列化——存储数据到数据库；
播放：从数据库读取数据——通过时间队列还原不同时间的操作——通过rrweb播放；

4、兼容性：不支持 IE11 以下的浏览器；兼容查看；

2、基本概念

rrweb 主要由 rrweb 、 rrweb-player 和 rrweb-snapshot 三个库组成：

rrweb：提供了 record 和 replay 两个方法；record 方法用来记录页面上 DOM 的变化，replay 方法支持根据时间戳去还原 DOM 的变化。
rrweb-player：基于 svelte 模板实现，为 rrweb 提供了回放的 UI 工具，支持暂停、倍速播放、拖拽时间轴等功能。内部调用了 rrweb 的提供的 replay 等方法。
rrweb-snapshot：包括 snapshot 和 rebuilding 两大特性，snapshot 用来序列化 DOM 为增量快照（所以录屏体积比较小），rebuilding 负责将增量快照还原为 DOM。

3、安装

可以直接 script 标签引入，也可以使用 npm 安装；可查看中文文档；

4、录制和播放（vue）

1、安装依赖包

	npm install --save rrweb
	npm install --save rrweb-player

2、录制

import rrweb from ‘rrweb’;

let events = [];
let stopFn = rrweb.record({
  emit(event) {
    if (events.length > 100) {
      // 当事件数量大于 100 时停止录制
      stopFn();
    }
    // 将 event 存入 events 数组中
    events.push(event);
  },
});

rrweb 在录制时会不断将各类 event 传递给配置的 emit 方法，你可以使用任何方式存储这些 event 以便之后回放。调用 record 方法将返回一个函数，调用该函数可以终止录制；

3、播放

import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';

new rrwebPlayer({
  target: document.body, // 可以自定义 DOM 元素
  // 配置项
  props: {
    events,
  },
});

也可以使用 rrweb 提供的 replay 来实现回放，如果需要功能更强的回放播放器 UI，可以使用 rrweb-player；

5、原理

record 方法内部会根据事件类型去初始化事件的监听，例如 DOM 元素变化、鼠标移动、鼠标交互、滚动等都有各自专属的事件监听方法。

1、要实现对 DOM 元素变化的监听，离不开浏览器提供的 MutationObserver API，该 API 会在一系列 DOM 变化后，通过批量异步的方式去触发回调，并将 DOM 变化通过 MutationRecord 数组传给回调方法；

2、初始化 rrweb.Replayer 实例时，会创建一个 iframe 作为承载事件回放的容器；

源码里面的具体操作可以参考：https://blog.csdn.net/qq_42415326/article/details/124734467；

总结：

录制的时候，通过浏览器的 MutationObserver API 来对 DOM 操作进行监听和收集；调用 snapshot 的 serializeNodeWithId 方法对 DOM 节点进行增量序列化处理，然后保存；
播放的时候，先通过 iframe 来创建出一个沙箱环境，接着重建 document 全量快照；通过 requestAnimationFrame 模拟定时器的方式来播放增量快照；