* Only record canvas when recordCanvas is true * All should be compiled first Makes recompiling+debugging a lot faster * Add support for compiling web workes Replaces @rollup/plugin-typescript for rollup-plugin-typescript2 as the former is incompatible with rollup-plugin-web-worker-loader * Update yarn.lock * Upgrade to typescript 4.5.5 * add support for replay of ImageBitmap in 2d canvas * Snapshot canvases in a web-worker on FPS basis * Fix performance of canvas recording and playback * Wait for all images to be preloaded before checking results * flatten base64 strings, as encoding isn't consistent * Cleanup * Add serializing to 2d canvases as well * Disable blob serialize test We don't have any code for it yet * Upgrade @rollup/plugin-commonjs to 21.0.2 Fixes https://linguinecode.com/post/import-export-appear-at-the-top-level * Move canvas recording options to `sampling` Based on: https://github.com/rrweb-io/rrweb/pull/859#discussion_r846582146
36 lines
684 B
Markdown
36 lines
684 B
Markdown
# Canvas
|
||
|
||
Canvas is a special HTML element, which 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,
|
||
},
|
||
});
|
||
```
|
||
|
||
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.**
|