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>
45 lines
986 B
Markdown
45 lines
986 B
Markdown
# 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：
|
||
|
||
```js
|
||
rrweb.record({
|
||
emit(event) {},
|
||
recordCanvas: true,
|
||
});
|
||
```
|
||
|
||
Alternatively enable image snapshot recording of Canvas at a maximum of 15 frames per second：
|
||
|
||
```js
|
||
rrweb.record({
|
||
emit(event) {},
|
||
recordCanvas: true,
|
||
sampling: {
|
||
canvas: 15,
|
||
},
|
||
// optional image format settings
|
||
dataURLOptions: {
|
||
type: 'image/webp',
|
||
quality: 0.6,
|
||
},
|
||
});
|
||
```
|
||
|
||
Enable replaying Canvas：
|
||
|
||
```js
|
||
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](../../packages/rrweb/src/plugins/canvas-webrtc/Readme.md)
|