<video> rendered inside <template> shows black for webcam stream (Safari 14.0.3 only)

• Component: WebRTC
• Status: RESOLVED FIXED

[Alex]

Hello there!

Important notice - this is happening only on Safari 14.0.3.

After macOS and Safari update (14.0 -> 14.0.3) video stream from the webcam I'm getting using navigator.mediaDevices.getUserMedia shows only black inside <video> for some time and updates to the actual video at some point (sometimes not). This is situated inside <template> which I add to DOM using JavaScript.

In short:
<template><video></video></template> (shows black)
<video></video> (shows ok)

JsFiddle with the reproducible demo - https://jsfiddle.net/alex_oliynyk/402ed6wq/54/

Gif with the issue - https://share.getcloudapp.com/2NuElvYl

Also, I can confirm that video is actually playing fine. This is part of the app where I send frames from the video to the backend for processing and I get a successful response. This means that frames are not just black rectangulars but are proper images.

Best regards,

[Radar WebKit Bug Importer]

<rdar://problem/74546659>

[Ryan]

Reproduced this black screen on M1 Mac as well.
https://codesandbox.io/s/streaming-user-device-dodse
Video seems to come in when the window loses and regains focus.

Template cloning also seems to also affect autoplay behavior of any video.
https://codesandbox.io/s/broken-autoplay-safari-vrr40?file=/src/index.js

I noticed this since it breaks in JavaScript frameworks that rely on this method for cloning nodes to do their templating. Lit uses `document.importNode` which seems to be fine, a number of other frameworks use this method. I'm the maintainer of Solid(https://github.com/solidui/solid) one such framework affected by this.

[youenn fablet]

I cannot reproduce on my iMacPro with STP.
As of back screen on M1 Mac, this is handled internally.
@Ryan, can you try the latest BigSur 11.3 update to see whether the issue is fixed for you on the M1?

[Ryan]

Just updated to 11.3.1 and Safari 14.1 (16611.1.21.161.6). I can still reproduce in all the posted reproductions.

[youenn fablet]

Thanks Ryan, I split your issues as separate issues as they might be M1 specific.
@Alex, are you still seeing this issue. Is it M1 specific?

[Ryosuke Niwa]

I think this is basically https://bugs.webkit.org/show_bug.cgi?id=222657.

[youenn fablet]

I had a look and it seems that the media element thinks it is hidden, hence why rendering does not work.
This probably explains also the autoplay restriction.

[Ryan]

I also reproduced this in Safari 14.1 on my Intel Macbook Pro on Catalina (work computer).

[youenn fablet]

Created attachment 429145 [details]
Patch

[Ryosuke Niwa]

Comment on attachment 429145 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=429145&action=review

> LayoutTests/fast/media/template-hidden.html:19
> +    myVideo.srcObject = await navigator.mediaDevices.getUserMedia({video:true});
> +    await myVideo.play(); 

Do we really need to use getUserMedia here? I think a regular video will be enough?

[youenn fablet]

(In reply to Ryosuke Niwa from comment #10)
> Comment on attachment 429145 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=429145&action=review
> 
> > LayoutTests/fast/media/template-hidden.html:19
> > +    myVideo.srcObject = await navigator.mediaDevices.getUserMedia({video:true});
> > +    await myVideo.play(); 
> 
> Do we really need to use getUserMedia here? I think a regular video will be
> enough?

The test does not need it as it uses internals API.

When running the test manually, it is safer to use this code path since the renderer is different from regular video streaming.

I'll update the patch to have it run in WK1 as well by making the getUserMedia call optional.

[youenn fablet]

Created attachment 429153 [details]
Patch

[Alex]

(In reply to youenn fablet from comment #5)
> Thanks Ryan, I split your issues as separate issues as they might be M1
> specific.
> @Alex, are you still seeing this issue. Is it M1 specific?

Hi!

Yes, still happening for me at Safari 14.1 (16611.1.21.161.6) macOS Big Sur 11.3.1, Intel-based Macbook Pro.

Cheers!

[Eric Carlson]

Comment on attachment 429153 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=429153&action=review

> LayoutTests/fast/media/template-hidden.html:17
> +    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)

Isn’t this test reversed?

[youenn fablet]

Comment on attachment 429153 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=429153&action=review

>> LayoutTests/fast/media/template-hidden.html:17
>> +    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
> 
> Isn’t this test reversed?

Should be fine as is, we call getUserMedia if defined and return undefined otherwise

[EWS]

Committed r277783 (237944@main): <https://commits.webkit.org/237944@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 429153 [details].