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

89 thoughts on “<video> rendered inside <template> shows black for webcam stream (Safari 14.0.3 only)”

  1. inhalateur pharmacie lafayette pharmacie amiens avenue 14 juillet , pharmacie leclerc amboise pharmacie en ligne pas cher , [url=https://kit.co/writle/benicar-vente-libre-benicar-a-vendre-en-ligne#]Benicar vente libre, Benicar Г  vendre en ligne[/url] pharmacie homeopathie argenteuil [url=https://kit.co/tioru/tricor-a-vendre-en-ligne-tricor-prix-sans-ordonnance#]Acheter Tricor 160 mg pas cher[/url] , therapie par le rire pharmacie angers orgemont , pharmacie leclerc yvetot. pharmacie beaulieu horaires pharmacie avignon carreterie [url=https://kit.co/muggngel/retino-a-cream-pharmacie-france-acheter-retino-a-cream-0-05-pas-cher#]Retino-A Cream sans ordonnance France[/url] , pharmacie nancy. pharmacie eisenbeth boulogne billancourt, pharmacie lafayette caen therapie cognitivo-comportementale obesite . pharmacie leclerc nimes, therapie genique cancer pharmacie bailly mozart generique aerius comprime .

    Reply
  2. Pingback: free viagra
  3. Pingback: viagra cheap
  4. Pingback: female viagra
  5. Pingback: cialis 10mg
  6. Pingback: cheap viagra
  7. Pingback: viagra price
  8. Pingback: buy cialis pills

Leave a Comment