bac1d7b048
* 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
978 B
Markdown
45 lines
978 B
Markdown
# Canvas
|
|
|
|
Canvas 是一种特殊的 HTML 元素，默认情况下其内容不会被 rrweb 观测。我们可以通过特定的配置让 rrweb 能够录制并回放 Canvas。
|
|
|
|
录制时包含 Canvas 内的内容：
|
|
|
|
```js
|
|
rrweb.record({
|
|
emit(event) {},
|
|
// 对 canvas 进行录制
|
|
recordCanvas: true,
|
|
});
|
|
```
|
|
|
|
或者启用每秒 15 帧的 Canvas 图像快照记录：
|
|
|
|
```js
|
|
rrweb.record({
|
|
emit(event) {},
|
|
recordCanvas: true,
|
|
sampling: {
|
|
canvas: 15,
|
|
},
|
|
// 图像的格式
|
|
dataURLOptions: {
|
|
type: 'image/webp',
|
|
quality: 0.6,
|
|
},
|
|
});
|
|
```
|
|
|
|
回放时对 Canvas 进行回放：
|
|
|
|
```js
|
|
const replayer = new rrweb.Replayer(events, {
|
|
UNSAFE_replayCanvas: true,
|
|
});
|
|
replayer.play();
|
|
```
|
|
|
|
**回放 Canvas 将会关闭沙盒策略，导致一定风险**。
|
|
|
|
另外，您可以使用 canvas-webrtc 插件通过 WEBRTC 流式传输 Canvas 元素。
|
|
有关更多信息，请参考[canvas-webrtc 文档](../../packages/rrweb/src/plugins/canvas-webrtc/readme.md)
|