Files
rrweb/docs/recipes/canvas.md
Justin Halsall e238462f30 Record canvas snapshots N times per second (#859)
* 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
2022-04-18 13:24:51 +08:00

36 lines
684 B
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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.**