268229b8b3
* feat: record add dataURLOptions parameter control canvas image format and quality * 解决 build failed * Update docs/recipes/canvas.md * Apply formatting changes * Update canvas-manager.ts Fix the error caused when I resolved the merge conflict Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com> Co-authored-by: Yun Feng <yun.feng@anu.edu.au> Co-authored-by: Mark-Fenng <Mark-Fenng@users.noreply.github.com> Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
978 B
978 B
Canvas
Canvas 是一种特殊的 HTML 元素，默认情况下其内容不会被 rrweb 观测。我们可以通过特定的配置让 rrweb 能够录制并回放 Canvas。
录制时包含 Canvas 内的内容：
rrweb.record({
emit(event) {},
// 对 canvas 进行录制
recordCanvas: true,
});
或者启用每秒 15 帧的 Canvas 图像快照记录：
rrweb.record({
emit(event) {},
recordCanvas: true,
sampling: {
canvas: 15,
},
// 图像的格式
dataURLOptions: {
type: 'image/webp',
quality: 0.6,
},
});
回放时对 Canvas 进行回放：
const replayer = new rrweb.Replayer(events, {
UNSAFE_replayCanvas: true,
});
replayer.play();
回放 Canvas 将会关闭沙盒策略，导致一定风险。
另外，您可以使用 canvas-webrtc 插件通过 WEBRTC 流式传输 Canvas 元素。 有关更多信息，请参考canvas-webrtc 文档