1845873 - Rendering a video to canvas does not work on initial load

Status: RESOLVED INVALID

(Core :: Audio/Video: Playback, defect)

Description

[Ajay]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0

Steps to reproduce:

Open any video (example https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4)

Pause the video

Try to render this video to a canvas using the following JavaScript

const surface = document.querySelector("video")

const canvas = document.createElement("canvas");
        canvas.width = surface.videoWidth;
        canvas.height = surface.videoHeight;
        canvas.getContext("2d").drawImage(surface, 0, 0); 

canvas.getContext("2d").drawImage(surface, 0, 0); 

Actual results:

Then view the data that was written to the canvas

console.log(canvas.getContext("2d").getImageData(0, 0, 20, 20).data) 

And it will be all 0s.

You can also attach the canvas to the dom to view it and it is transparent.

Expected results:

The video data should be written to the canvas.

Comment 1

[Ajay]

Note:

If you play the video, then pause it, you will be able to render the data to a canvas.

However, if you set the video to a different time (video.currentTime = 5), it will again fail to render until first played, and then paused.

Comment 2

[Ajay]

I'm able to reproduce this on 117.0a1 Firefox Nightly as well

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Audio/Video: Playback' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 4

[Robert Longson [:longsonr]]

Are you waiting for the video element's canplay event to fire before copying it to canvas?

Comment 5

[Ajay]

Yes, in my actual code, I wait for the can play event and the same issue occurs, but to make the reproduction steps clearer, I wanted to show that waiting until the video data is visible on the screen also doesn't work.

Comment 6

[Ajay]

For these reproduction steps, the video is already playing due to autoplay. I can see it on screen, then I click pause and run the canvas render.

Comment 7

[Robert Longson [:longsonr]]

If I follow the steps in comment 0 I don't get all zeroes.

Comment 8

[Ajay]

After some testing on different systems, I think this bug is something specific to my machine, as I am unable to reproduce it in other environments

Windows Firefox 116: Unable to reproduce
Ubuntu VM Firefox 115: Unable to reproduce
Manjaro VM (my distro) Firefox 115: Unable to reproduce

However, it does seem to be a regression, as I cannot reproduce the issue in Firefox 114, but can in 115 and 116. I have tested AppImage builds as well to confirm it's not an issue with my distro's packaging.

It's very odd.

Anyway, thanks for looking into it and sorry it turned out to be something specific to my machine. I'll update this if I notice anything else but for not I guess it's not really a useful report.