Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

possible to support <canvas>? #60

Closed
YuhangGe opened this issue Mar 28, 2019 · 11 comments · Fixed by #296
Closed

possible to support <canvas>? #60

YuhangGe opened this issue Mar 28, 2019 · 11 comments · Fixed by #296

Comments

@YuhangGe
Copy link

When replaying web-page with element, the area of canvas has nothing.

Is it possible to support canvas recording?

@Yuyz0112
Copy link
Member

Currently we are not tracking mutations inside canvas. Maybe we can monkey patch some canvas APIs and observe the mutation?

@yao978318542
Copy link

是不是不支持 canvas 啊? 悲剧了 o(╥﹏╥)o

@Yuyz0112
Copy link
Member

First PR for canvas
rrweb-io/rrweb-snapshot#20
by @wuzekang

@crystalpp
Copy link

目前0.9.0的版本是不是还不支持canvas录制后的回放呢

@Yuyz0112
Copy link
Member

本周末会 release 0.9.1,支持 canvas

@crystalpp
Copy link

非常感谢 期待0.9.1

Yuyz0112 added a commit that referenced this issue Aug 22, 2020
close #60, #261

This patch implements the canvas mutation observer.
It consists of both the record and the replay side changes.

In the record side, we add a `recordCanvas` flag to indicate
whether to record canvas elements and the flag defaults to false.
Different from our other observers, the canvas observer was
disabled by default. Because some applications with heavy canvas
usage may emit a lot of data as canvas changed, especially the
scenarios that use a lot of `drawImage` API.
So the behavior should be audited by users and only record canvas
when the flag was set to true.

In the replay side, we add a `UNSAFE_replayCanvas` flag to indicate
whether to replay canvas mutations.
Similar to the `recordCanvas` flag, `UNSAFE_replayCanvas` defaults
to false. But unlike the record canvas implementation is stable and
safe, the replay canvas implementation is UNSAFE.
It's unsafe because we need to add `allow-scripts` to the replay
sandbox, which may cause some unexpected script execution. Currently,
users should be aware of this implementation detail and enable this
feature carefully.
Yuyz0112 added a commit that referenced this issue Aug 22, 2020
* record canvas mutations

close #60, #261

This patch implements the canvas mutation observer.
It consists of both the record and the replay side changes.

In the record side, we add a `recordCanvas` flag to indicate
whether to record canvas elements and the flag defaults to false.
Different from our other observers, the canvas observer was
disabled by default. Because some applications with heavy canvas
usage may emit a lot of data as canvas changed, especially the
scenarios that use a lot of `drawImage` API.
So the behavior should be audited by users and only record canvas
when the flag was set to true.

In the replay side, we add a `UNSAFE_replayCanvas` flag to indicate
whether to replay canvas mutations.
Similar to the `recordCanvas` flag, `UNSAFE_replayCanvas` defaults
to false. But unlike the record canvas implementation is stable and
safe, the replay canvas implementation is UNSAFE.
It's unsafe because we need to add `allow-scripts` to the replay
sandbox, which may cause some unexpected script execution. Currently,
users should be aware of this implementation detail and enable this
feature carefully.

* update canvas integration test
@lniuniu
Copy link

lniuniu commented Aug 26, 2020

本周末会 release 0.9.1,支持 canvas

大佬,说好的发布呢,我用分支中最新的提交编译后,录制视频,canvas无法回放,是不是代码还没完全通啊

@Yuyz0112
Copy link
Member

@lniuniu master 上已经包含 canvas 相关的代码,0.9.1 还需要等别的 bugfix 完成。

录制和回放 canvas 的配置参考 #296 (comment) ,如果遇到问题可以再提 issue

@sunzhengxin92
Copy link

@lniuniu master 上已经包含 canvas 相关的代码,0.9.1 还需要等别的 bugfix 完成。

录制和回放 canvas 的配置参考 #296 (comment) ,如果遇到问题可以再提 issue

大佬,echarts的图标现在是还不能录制么?录制完之后,播放是那部分是白屏

@FrankRoc
Copy link

为什么我下载了最新版(0.9.7)的rrweb 还是不能录制canvas呢

@yakkomajuri
Copy link
Contributor

yakkomajuri commented Mar 1, 2021

大家好!

I'd love to be able to write all of this in Mandarin but 我的中文不好。 我会一点儿说汉语。

Anyway, canvas recording is currently marked as insecure for replay because malicious scripts can run.

I wonder if that happens because the recording used toDataURL? Could we possibly get the pixel array for the canvas and recreate the pixel array in a new canvas when replaying?

我式一试 - I gave this a quick try and it seems to work:

yakkomajuri#1

I could be completely wrong though, so apologies in advance.

谢谢!

@Yuyz0112

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants