技术选型：录频解决方案
好的，我把 rrweb 的原理整理成一份精简的要点总结，方便你快速回顾和理解。
📌 rrweb 核心原理（一句话版）
rrweb 不录制画面像素，而是记录 DOM 结构 + 所有变化 + 用户操作，回放时在 iframe 中“重建”页面。
🔍 工作流程
1. 录制阶段（Record）
- 全量快照：开始时，遍历整个 DOM，生成一份完整的“页面快照”（JSON 数据）。
- 增量快照：之后通过
MutationObserver监听所有 DOM 变更（增删节点、属性变化、文本修改），同时监听input、click、scroll等用户交互事件，将这些变化序列化成增量的 JSON 数据。 - 数据压缩：使用序列化 + 去重映射表，减小数据体积（通常比视频小很多）。
2. 回放阶段（Replay）
- 在一个独立的
<iframe>中，根据全量快照重建页面初始状态。 - 按照时间戳顺序，依次回放所有增量事件，重现页面变化和用户操作（如鼠标移动、输入等）。
⚙️ 关键技术点
| 技术手段 | 作用 |
|---|---|
MutationObserver | 监听 DOM 结构、属性、文本变化 |
| 事件监听 | 捕获鼠标、键盘、滚动等交互 |
| 序列化（id 映射） | 将循环引用的 DOM 转为可 JSON 化的数据 |
| 相对时间戳 | 保证回放时事件顺序和延迟一致 |
| iframe 沙箱 | 隔离回放环境，避免影响当前页面 |
✅ 优点
- 无弹窗：不依赖
getDisplayMedia，用户无感知。 - 文件小：存储的是数据变化，体积远小于视频。
- 可交互：回放时支持暂停、快进，甚至修改 DOM 来调试。
- 隐私友好：可配置忽略敏感输入（如密码）。
⚠️ 局限性
- 无法录制 Canvas / WebGL 绘图内容（只能看到初始状态，动画无法记录）。
- 不能完美捕捉 CSS 动画（只记录最终态）。
- 不支持录制 视频 / 音频 标签的播放内容。
- 跨域 iframe 内容无法访问（需特殊配置）。
📦 常用场景
- 用户行为分析（录屏回放）
- Bug 重现与调试
- 客服对话回放
- A/B 测试可视化
如果你想要一个基于 rrweb 的最小化 Demo（index.html），我也可以直接帮你写出来，让你跑起来体验一下。需要吗？