Canvas

Canvas 是一种特殊的 HTML 元素，默认情况下不会被 rrweb 录制。录制和回放 Canvas 均提供了一些选项。

启用 Canvas 录制：

import { record } from '@rrweb/record';

record({
  emit(event) {},
  recordCanvas: true,
});

或者，以最高每秒 15 帧的频率启用 Canvas 图像快照录制：

import { record } from '@rrweb/record';

record({
  emit(event) {},
  recordCanvas: true,
  sampling: {
    canvas: 15,
  },
  // optional image format settings
  dataURLOptions: {
    type: 'image/webp',
    quality: 0.6,
  },
});

启用 Canvas 回放：

import { Replayer } from '@rrweb/replay';

const replayer = new Replayer(events, {
  UNSAFE_replayCanvas: true,
});
replayer.play();

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

另外，你可以通过 WebRTC 使用 rrweb-plugin-canvas-webrtc-record 和 rrweb-plugin-canvas-webrtc-replay 插件来流式传输 canvas 元素。更多信息请参阅 canvas-webrtc 文档。

Canvas ​

Canvas