[BUG] video element not playing during recording

[TejasBob]

Hi @tungs,
Thanks for this amazing library.

I'm recording a fabricjs canvas that has a video in it. I have added the same video element in DOM and kept it as hidden.
I'm using Google Chrome (103.0.5060.53 (Official Build) (arm64) ) on MacOS Monterey for recording canvas (instead of Chromium).
Everything works fine with [email protected]
But If I upgrade to v0.3.3, the video element on the page doesn't play.
I tried both headless and headful mode. In both cases the video element doesn't play.
Interestingly, GIFs are recorded correctly.
I can not share exact code for reproducing this.

How can I debug this issue?
Thanks!

[shaotianyu]

Hi @tungs, Thanks for this amazing library.

I'm recording a fabricjs canvas that has a video in it. I have added the same video element in DOM and kept it as hidden. I'm using Google Chrome (103.0.5060.53 (Official Build) (arm64) ) on MacOS Monterey for recording canvas (instead of Chromium). Everything works fine with [email protected] But If I upgrade to v0.3.3, the video element on the page doesn't play. I tried both headless and headful mode. In both cases the video element doesn't play. Interestingly, GIFs are recorded correctly. I can not share exact code for reproducing this.

How can I debug this issue? Thanks!

I have encountered similar problems. Have you solved them？
thank you

[TejasBob]

nope, didn't find any solution.

[tungs]

Hi, apologies for the late response on this. I tried to recreate this issue tonight without much success by running timeweb v0.3.1 and v0.1.1 in the browser (which are the respective versions of timeweb that timecut v0.3.3 and v0.3.0 use to handle time), with a simple fabric and video demo. They both seem to seek fine.

It might be a problem with timesnap/timecut. This'll require some more investigation on my part.

I did run into some issues with the video files that I was testing with, but the issues were consistent across both versions of timeweb. Some general issues arise when:

• When the video isn't seekable
• When the video is hosted on a different domain/origin than the web page (creating a 'dirty canvas'), and trying to capture using canvas capture mode
• When the page is being opened locally via the file protocol (i.e. file://, which timecut uses by default if there's no protocol in the url)

Just to check, do you know at what version it stops working between v0.3.0 and v0.3.3? Are your files being served on a web server that supports seeking to videos?

I'm surprised GIFs are being recorded correctly (i.e. smoothly and consistently), since the timing of GIFs aren't supported/handled at all. Is the motion smooth?

Also are there any error messages?

[gen4sp]

experiencing the similar issue

[vshepel]

Any results? I tried controlling the video with GSAP, but it doesn't show up when recording...

@TejasBob About the GIF, can you tell me with what options did you record? I tried recording, in my case the GIF was played 5 times, whereas in reality 1

[Vinlic]

I'd like to recommend my latest open-source project, WebVideoCreator, which supports capturing frames from multiple pages and synthesizing them into a video.

[Aurumdev952]

I had the same issue so to fix it I had to use Chrome instead of chromium and also had to manually play the video in the preparePage function.
preparePage: (page) => { page.evaluate(() => document.querySelector("video")?.play()); }

[Vinlic]

@Aurumdev952
If you are using WVC, the video element should not need to be played manually. If you find that the video element does not play, you can try adding a capture attribute to it.
https://github.com/Vinlic/WebVideoCreator/blob/master/README.en-US.md#inserting-video
You can refer the issue to WVC: https://github.com/Vinlic/WebVideoCreator/issues/new