rrweb (Record and Replay Web) 主要分为两个核心部分：录制（Record） 和 回放（Replay）。它的原理不是录制视频，而是录制页面的 DOM 变化事件 和 用户交互事件。

录制端实现 (Record)

录制端需要嵌入到你想监控的页面中。它会监听 DOM 的 MutationObserver 和各种用户事件（点击、输入、滚动等）。

import { record } from 'rrweb';

// 存储事件的数组（实际生产中通常直接通过 WebSocket 发送，不全部存内存）
let events = [];

const stopFn = record({
  emit(event) {
    // 每次捕获到事件都会触发此回调
    events.push(event);
    
    // 【重要】实际场景中，这里应该通过 WebSocket 或 HTTP 将 event 发送到后端服务器
    // sendToServer(event); 
    console.log('捕获事件:', event.type, event.data);
  },
  blockClass: 'rr-block',      // 指定忽略录制的 CSS 类（用于隐私保护）
  blockSelector: null,         // 指定忽略录制的选择器
  maskAllInputs: true,         // 是否掩盖所有输入框内容（防止密码泄露）
  maskInputOptions: {},        // 细化配置哪些输入框需要掩盖
  inlineStylesheet: true,      // 是否将样式内联（避免跨域 CSS 加载失败）
  checkoutEveryNms: 60000,     // 每 60 秒进行一次全量快照（防止回放时间过长导致内存爆炸）
  checkoutEveryNth: 1000,      // 或每 1000 个事件进行一次全量快照
});

// 如果需要停止录制，调用 stopFn()
// stopFn();

回放端实现 (Replay)

回放端是一个独立的页面，用于读取录制下来的事件数据并重现当时的情景。

import { Replayer } from 'rrweb';

// 假设这是你从后端获取到的事件列表
const recordedEvents = [ /* ... 之前录制的事件数组 ... */ ];

// 创建一个容器用于播放
const container = document.getElementById('replay-container');

const replayer = new Replayer(recordedEvents, {
  root: container,           // 回放渲染的 DOM 节点
  speed: 1,                  // 播放速度倍数
  maxSpeed: 10,              // 最大加速倍数
  skipInactive: false,       // 是否跳过无操作时间段（设为 true 可快速跳过用户发呆时间）
  showWarning: true,         // 是否显示警告信息
  virtualMode: false,        // 是否开启虚拟模式（用于超长录制，性能更好但功能受限）
  mouseTail: true,           // 是否显示鼠标移动轨迹
  useVirtualDom: true        // 2024+ 新版本特性，使用虚拟 DOM 提升性能
});

// 开始播放
replayer.play(); 

// 其他控制方法
// replayer.pause();
// replayer.resume();
// replayer.setTime(5000); // 跳转到第 5 秒