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

Question

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

在 macOS 和 Safari 更新 (14.0 -> 14.0.3) 后，我正在使用的来自网络摄像头的视频流 navigator.mediaDevices.getUserMedia 在一段时间内 <video> 只显示黑色并更新实际视频在某个时候（有时不是）。它位于 <template> 内，我使用 JavaScript.

添加到 DOM

简而言之：

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

带有可重现演示的 JsFiddle - https://jsfiddle.net/alex_oliynyk/402ed6wq/54/

有问题的 Gif - https://share.getcloudapp.com/2NuElvYl

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

知道如何让视频立即显示吗？

干杯！

UPD：修复了 <template>

中的拼写错误

Answer 1

经过相当多的来回反复，我找到了一个解决方法来让它工作。

基本上，当调用 getUserMedia 时，我以编程方式创建视频标签，向其添加视频流，然后将其添加到 DOM。拥有容器 div 有助于将其放置在正确的位置。

工作演示 - https://jsfiddle.net/alex_oliynyk/402ed6wq/95/

还为 WebKit 团队提交了 bug report。

最佳，

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

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

javascript

html

safari

html5-video

getusermedia