优秀的 JavaScript 前端录制回放库 - rrweb

rrweb 是’记录和重播 web 的简写，使用现代浏览器的 API 并提供给用户任意操作的 web 界面中的强大功能。

文档

使用

import { record, replayer } from 'rrweb';
let events = [];

rrweb.record({
  emit(event) {
    // 将 event 存入 events 数组中
    events.push(event);
  },
});

// save 函数用于将 events 发送至后端存入，并重置 events 数组
function save() {
  const body = JSON.stringify({ events });
  events = [];
  fetch('http://YOUR_BACKEND_API', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body,
  });
}

// 每 10 秒调用一次 save 方法，避免请求过多
setInterval(save, 10 * 1000);

重播

import { record, replayer } from 'rrweb';
const replayer = new rrweb.Replayer(events);

// 播放
replayer.play();

// 从第 3 秒的内容开始播放
replayer.play(3000);

// 暂停
replayer.pause();

// 暂停至第 5 秒处
replayer.pause(5000);

// 销毁播放器 (提示：这个操作不可逆)
replayer.destroy();

播放器

import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';
new rrwebPlayer({
  target: document.body, // 可以自定义 DOM 元素
  // 配置项
  props: {
    events,
  },
});

优秀的 JavaScript 前端录制回放库 - rrweb

文档

使用

重播

播放器

后记