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>
986 B
986 B
Canvas
Canvas is a special HTML element, and will not be recorded by rrweb by default. There are some options for recording and replaying Canvas.
Enable recording Canvas：
rrweb.record({
emit(event) {},
recordCanvas: true,
});
Alternatively enable image snapshot recording of Canvas at a maximum of 15 frames per second：
rrweb.record({
emit(event) {},
recordCanvas: true,
sampling: {
canvas: 15,
},
// optional image format settings
dataURLOptions: {
type: 'image/webp',
quality: 0.6,
},
});
Enable replaying Canvas：
const replayer = new rrweb.Replayer(events, {
UNSAFE_replayCanvas: true,
});
replayer.play();
Enable replaying Canvas will remove the sandbox, which may cause a potential security issue.
Alternatively you can stream canvas elements via webrtc with the canvas-webrtc plugin. For more information see canvas-webrtc documentation