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

Leave a Comment