1872508 - `canvasContext.drawImage` fails to draw `<video>` element for most codecs

Status: RESOLVED DUPLICATE of bug 1526207

(Core :: Graphics, defect)

Description

[R. N. West [:rnwst]]

Steps to reproduce

1. Connect to a device running Firefox Nightly for Developers on a desktop Firefox instance via the about:debugging page.
2. Open a YouTube video of your choice (e.g. https://www.youtube.com/watch?v=4WXs3sKu41I) in Firefox for Android.
3. Inspect the corresponding tab in the desktop Firefox instance.
4. On the device, play the video, then pause it. This ensures that YouTube actually loads the video, otherwise the video element will lack a src attribute.
5. Check the codec that is being used. This can be done by tapping on the cog wheel and selecting 'Stats for nerds'. The codec must be VP9 or AVC/H.264. This issue doesn't seem to occur when the codec is AV1. On Firefox on Android, YouTube only seems to serve popular, low resolution videos as AV1.
6. In the developer console, execute the following code to screenshot the video and view it:

const video = document.querySelector('video');
const canvas = document.createElement('canvas');
const canvasContext = canvas.getContext('2d', {alpha: false});
canvas.height = video.videoHeight;
canvas.width = video.videoWidth;
// Now screenshot the video.
canvasContext.drawImage(video, 0, 0, canvas.width, canvas.height);
const screenshotBase64 = canvas.toDataURL('image/png');
// Now view the screenshot on the device.
const link = document.createElement('a');
document.body.appendChild(link);
link.href = screenshotBase64;
link.target = '_self';
link.click();

7. Observe that the screenshot is black.

Expected behavior

The screenshot should show the current video frame.

Actual behavior

No video frame is showing. It appears that canvasContext.drawImage fails to draw the <video> element.

Device information

• Firefox for Android version: 123.0a1 (Build #2015994695), 6204ff8c60+
• Android device model: Pixel 7a
• Android OS version: 14

Further information

As mentioned above, this issue seems to be codec dependent. Some videos are served as AV1, such as Me at the zoo, where the problem does not occur. YouTube only seems to serve AV1 on Firefox for Android for popular videos that are not available in high resolution. For Chrome on Android, it seems to serve AV1 for popular videos, irrespective of resolution. I suspect that Firefox on Android reports AV1 at high resolution as not being power efficient or smooth, via decodingInfo() or a similar API, but I haven't verified this.

I also injected a script into the YouTube page at page load to overwrite the mediaSource.isTypeSupported and videoElement.canPlayType functions, to report VP9 as not being supported. YouTube then served AVC/H.264, for which the problem also occurs. Furthermore, this HTML 5 canvas demo also doesn't seem to work on Firefox on Android. That video codec seems to be VP8, at least on desktop Chromium (I haven't investigated if the same codec is used on Firefox on Android).

Possibly related bugs: bug 1479947, bug 1486659

Comment 1

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

The severity field is not set for this bug.
:jonalmeida, could you have a look please?

For more information, please visit BugBot documentation.

Comment 2

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

The severity field is not set for this bug.
:bhood, could you have a look please?

For more information, please visit BugBot documentation.