rrweb 文档
rrwebDocs

简体中文

English

简体中文

English

rrweb canvas webrtc 插件 ​

通过 WebRTC 实时流式传输 canvas 元素内容的插件

通过 yarn live-stream 进行实时直播的示例 ​

https://user-images.githubusercontent.com/4106/186701616-fd71a107-5d53-423c-ba09-0395a3a0252f.mov

使用说明 ​

录制端 ​

js
// Record side

import { record } from '@rrweb/record';
import { RRWebPluginCanvasWebRTCRecord } from '@rrweb/rrweb-plugin-canvas-webrtc-record';

const webRTCRecordPlugin = new RRWebPluginCanvasWebRTCRecord({
  signalSendCallback: (msg) => {
    // provides webrtc sdp offer signal & connect message
    // make sure you send this to the replayer's `webRTCReplayPlugin.signalReceive(signal)`
    sendSignalToReplayer(msg); // example of function that sends the signal to the replayer
  },
});

record({
  emit: (event) => {
    // send these events to the `replayer.addEvent(event)`, how you do that is up to you
    // you can send them to a server for example which can then send them to the replayer
    sendEventToReplayer(event); // example of function that sends the event to the replayer
  },
  plugins: [
    // add the plugin to the list of plugins, and initialize it via `.initPlugin()`
    webRTCRecordPlugin.initPlugin(),
  ],
  recordCanvas: false, // we don't want canvas recording turned on, we're going to do that via the plugin
});

回放端 ​

js
// Replay side
import { Replayer } from '@rrweb/replay';
import { RRWebPluginCanvasWebRTCReplay } from '@rrweb/rrweb-plugin-canvas-webrtc-replay';

const webRTCReplayPlugin = new RRWebPluginCanvasWebRTCReplay({
  canvasFoundCallback(canvas, context) {
    console.log('canvas', canvas);
    // send the canvas id to `webRTCRecordPlugin.setupStream(id)`, how you do that is up to you
    // you can send them to a server for example which can then send them to the replayer
    sendCanvasIdToRecordScript(context.id); // example of function that sends the id to the record script
  },
  signalSendCallback(signal) {
    // provides webrtc sdp offer signal & connect message
    // make sure you send this to the record script's `webRTCRecordPlugin.signalReceive(signal)`
    sendSignalToRecordScript(signal); // example of function that sends the signal to the record script
  },
});

const replayer = new Replayer([], {
  UNSAFE_replayCanvas: true, // turn canvas replay on!
  liveMode: true, // live mode is needed to stream events to the replayer
  plugins: [webRTCReplayPlugin.initPlugin()],
});
replayer.startLive(); // start the replayer in live mode

replayer.addEvent(event); // call this whenever an event is received from the record script

启用 canvas 回放会向回放 iframe 添加 allow-scripts，并脱离 rrweb 的沙箱脚本执行保护。请仅对你能接受其风险的回放数据使用 UNSAFE_replayCanvas。

更多信息 ​

https://github.com/rrweb-io/rrweb/pull/976

在 GitHub 上编辑 README

rrweb canvas webrtc 插件发布说明 ​

2.1.0—2.1.1 ​

这些版本中本包没有变更，仅递增版本号以与其他包保持同步

2.0.1 ​

补丁变更 ​

  • 更新依赖 [5f52d63]：
    • rrweb@2.0.1

2.0.0 ​

重大变更 ​

  • #1497 2606a2a 感谢 @Juice10！ - 将插件从 rrweb 中拆分出来，移入各自独立的包：@rrweb/packer、@rrweb/rrweb-plugin-canvas-webrtc-record、@rrweb/rrweb-plugin-canvas-webrtc-replay、@rrweb/rrweb-plugin-sequential-id-record、@rrweb/rrweb-plugin-sequential-id-replay、@rrweb/rrweb-plugin-console-record、@rrweb/rrweb-plugin-console-replay。更多信息请查看各包的 README，或访问 https://github.com/rrweb-io/rrweb/pull/1033 查看具体变更。

  • #1497 2606a2a 感谢 @Juice10！ - 分发文件有了新的文件名、路径和扩展名。重要：如果你直接引用分发文件或类型，可能需要更新你的路径/文件名。例如你从 rrweb/typings/... 或 rrdom/es 导入。但如果你使用 import rrweb from 'rrweb'，则不会察觉到这一变更带来的差异。 如果你直接在 script 标签中引入 rrweb 文件，可能需要将该路径更新为 .umd.cjs 文件。现在所有 .js 文件都使用 ES 模块，可用于现代浏览器、node.js 以及支持 ES 模块的打包工具。所有 npm 包现在还会同时提供 .cjs 和 .umd.cjs 文件。.umd.cjs 文件是将所有文件打包在一起的 CommonJS 模块，便于向浏览器环境交付单个文件（类似于之前的 .js 文件）。.cjs 文件是可用于旧版 Node.js 环境的 CommonJS 模块。类型在 package.json 中应有更完善的定义；如果你需要特定类型，它们可能从新的包中导出（例如 PlayerMachineState 和 SpeedMachineState 现在从 @rrweb/replay 导出）。可用文件请查看 package.json 的 main 和 exports 字段。

补丁变更 ​

2.0.0-alpha.20 ​

补丁变更 ​

  • 更新依赖 [6388fb5]：
    • rrweb@2.0.0-alpha.20

2.0.0-alpha.19 ​

补丁变更 ​

2.0.0-alpha.18 ​

补丁变更 ​

  • #1593 5a78938 感谢 @daibhin！ - NodeType 枚举已从 rrweb-snapshot 移至 @rrweb/types 以下类型已从 rrweb-snapshot 移至 @rrweb/types：documentNode、documentTypeNode、legacyAttributes、textNode、cdataNode、commentNode、elementNode、serializedNode、serializedNodeWithId、serializedElementNodeWithId、serializedTextNodeWithId、IMirror、INode、mediaAttributes、attributes 和 DataURLOptions
  • 更新依赖 [04ee6ed, 5fbb904, 5a78938, 53b83bb]：
    • rrweb@2.0.0-alpha.18

2.0.0-alpha.17 ​

补丁变更 ​

2.0.0-alpha.15 ​

重大变更 ​

  • #1497 2606a2a 感谢 @Juice10！ - 将插件从 rrweb 中拆分出来，移入各自独立的包：@rrweb/packer、@rrweb/rrweb-plugin-canvas-webrtc-record、@rrweb/rrweb-plugin-canvas-webrtc-replay、@rrweb/rrweb-plugin-sequential-id-record、@rrweb/rrweb-plugin-sequential-id-replay、@rrweb/rrweb-plugin-console-record、@rrweb/rrweb-plugin-console-replay。更多信息请查看各包的 README，或访问 https://github.com/rrweb-io/rrweb/pull/1033 查看具体变更。

  • #1497 2606a2a 感谢 @Juice10！ - 分发文件有了新的文件名、路径和扩展名。重要：如果你直接引用分发文件或类型，可能需要更新你的路径/文件名。例如你从 rrweb/typings/... 或 rrdom/es 导入。但如果你使用 import rrweb from 'rrweb'，则不会察觉到这一变更带来的差异。 如果你直接在 script 标签中引入 rrweb 文件，可能需要将该路径更新为 .umd.cjs 文件。现在所有 .js 文件都使用 ES 模块，可用于现代浏览器、node.js 以及支持 ES 模块的打包工具。所有 npm 包现在还会同时提供 .cjs 和 .umd.cjs 文件。.umd.cjs 文件是将所有文件打包在一起的 CommonJS 模块，便于向浏览器环境交付单个文件（类似于之前的 .js 文件）。.cjs 文件是可用于旧版 Node.js 环境的 CommonJS 模块。类型在 package.json 中应有更完善的定义；如果你需要特定类型，它们可能从新的包中导出（例如 PlayerMachineState 和 SpeedMachineState 现在从 @rrweb/replay 导出）。可用文件请查看 package.json 的 main 和 exports 字段。

补丁变更 ​