rrweb-modual

rrweb 模块集合 - 包含 rrweb 相关的所有核心模块的统一 node 库。

功能特性

• 🎯 统一入口: 提供所有 rrweb 相关模块的统一访问入口
• 📦 模块化设计: 包含 rrdom、rrweb、rrweb-player 等核心模块
• 🔧 TypeScript 支持: 完整的 TypeScript 类型定义
• 🚀 高性能: 基于原生 rrweb 核心，性能优异
• 📱 多平台支持: 支持浏览器和 Node.js 环境

安装

npm install rrweb-modual
# 或
yarn add rrweb-modual
# 或
pnpm add rrweb-modual

快速开始

基本使用

import { record, Replayer } from 'rrweb-modual';

// 开始录制
const stopRecording = record({
  emit(event) {
    console.log('录制事件:', event);
  },
  recordCanvas: true,
  recordCrossOriginIframes: true,
});

// 停止录制
// stopRecording();

// 创建回放器
const replayer = new Replayer(events, {
  root: document.getElementById('replayer'),
  speed: 1,
  skipInactive: true,
});

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

完整示例

查看 使用示例 目录，包含：

• 🌐 HTML 示例 - 浏览器端完整示例
• 🖥️ Node.js 示例 - 服务器端使用示例
• 📘 TypeScript 示例 - 类型安全的使用示例

运行示例：

cd example
npm install
npm run serve  # 启动浏览器示例
npm run example:node  # 运行 Node.js 示例
npm run example:ts    # 运行 TypeScript 示例

详细使用方法

基础使用

import { record, replay, Replayer } from 'rrweb-modual';

// 开始录制
const stopRecord = record({
  emit(event) {
    console.log('录制事件:', event);
  }
});

// 停止录制
stopRecord();

// 回放录制
const replayer = new Replayer(events);
replayer.play();

高级功能

import { 
  record, 
  replay, 
  Replayer, 
  Player,
  snapshot,
  addCustomEvent 
} from 'rrweb-modual';

// 添加自定义事件
addCustomEvent('custom-event', {
  data: { custom: 'data' }
});

// 创建快照
const snapshotData = snapshot(document);

// 使用播放器组件
const player = new Player({
  target: document.body,
  props: {
    events: recordedEvents
  }
});

包含的模块

• rrdom: DOM 操作和虚拟 DOM 实现
• rrdom-nodejs: Node.js 环境的 DOM 实现
• rrweb: 核心录制和回放功能
• rrweb-player: 视频播放器组件
• rrweb-snapshot: 快照功能
• rrvideo: 视频相关功能
• types: TypeScript 类型定义
• web-extension: 浏览器扩展支持

API 文档

详细的 API 文档请参考各个子模块的文档：

• rrweb 官方文档
• rrweb-player 文档

开发

# 安装依赖
npm install

# 构建
npm run build

# 开发模式
npm run dev

# 测试
npm test

许可证

MIT License

作者

yxye [email protected]