javascripthtmlsafarihtml5-videogetusermedia

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

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 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.

Any idea how to can I make the video appear right away?

Cheers!

UPD: fixed typo in <template>

Solution

  • After a decent amount of back-and-forth, I've found a workaround to make it work.

    Basically, when getUserMedia is called I programmatically create a video tag, add a video stream to it, add it to the DOM. Having container div helps a lot to position it in the right spot.

    Working demo - https://jsfiddle.net/alex_oliynyk/402ed6wq/95/

    Also submitted the bug report for the WebKit team.

    Best,