<video> 内部渲染 <template> 显示网络摄像头流为黑色（仅限 Safari 14.0.3）

Question

重要通知 - 这种情况发生仅在 Safari 14.0.3 上！

macOS 和 Safari 更新（14.0 -> 14.0.3）后，我使用的网络摄像头视频流在一段时间内仅显示

navigator.mediaDevices.getUserMedia

内部的黑色，并在某些时候更新为实际视频（有时不是）。它位于

<video>

内部，我使用 JavaScript 将其添加到 DOM。简而言之：

<template>

JsFiddle 具有可重现的演示 - 

https://jsfiddle.net/alex_oliynyk/402ed6wq/54/

有问题的 Gif -

https://share.getcloudapp.com/2NuElvYl

此外，我可以确认视频实际上播放得很好。这是应用程序的一部分，我将视频帧发送到后端进行处理，并获得成功的响应。这意味着框架不仅仅是黑色矩形，而且是正确的图像。

知道如何让视频立即出现吗？

干杯！

UPD：修复了

<template><video></video></template> (shows black)
<video></video> (shows ok)

中的拼写错误
    

Answer 1

基本上，当调用

<template>

时，我以编程方式创建一个视频标签，向其添加视频流，并将其添加到 DOM。拥有容器

getUserMedia

有助于将其放置在正确的位置。工作演示 -

https://jsfiddle.net/alex_oliynyk/402ed6wq/95/

还为 WebKit 团队提交了

bug 报告

。 最好的，

Answer 2

div

属性添加到视频标签中。我还添加了

autoplay

，这样视频就不会全屏显示。这是我的完整 html 标签：playsinline