视频 mediaDevices 将 Blob 分配给“videoRef.srcObject”以代替“src”

Posted 2023-05-07

【中文标题】视频 mediaDevices 将 Blob 分配给“videoRef.srcObject”以代替“src”

【英文标题】：Video mediaDevices Assign a Blob To 'videoRef.srcObject' In Place of 'src'

【发布时间】：2018-11-13 03:16:41

【问题描述】：

我正在尝试将 blob 作为视频元素的 src。我的代码在以下情况下运行良好：

videoRef.src = URL.createObjectURL(blob)

但不推荐使用 'src' 和 'URL.createObjectURL' 来代替使用 'srcObject' https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

和https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

我的问题是如何像这样简单地将 blob 文件添加到 srcObject：

videoRef.srcObject = blob

当我尝试上述代码时，我收到错误消息：“TypeError: 无法在 'htmlMediaElement' 上设置 'srcObject' 属性：提供的值不是 'MediaStream' 类型。”

如何不使用已弃用的 videoRef.src 并将 blob 直接应用于 videoRef.srcObject ？还是blob类型可以用src，只有stream不能用src？

【参考方案1】：

URL.createObjectURL 仅被 流 弃用，而不是 blob 和媒体源。

您引用的 MDN 警告位于标题为 Using object URLs for media streams 的部分下。警告本身说：

如果您仍有依赖 createObjectURL() 将 流 附加到媒体元素的代码

正在努力弃用 URL.createObjectURL，特别是围绕 流，因为流本质上是本地对象。

TypeError：无法在“HTMLMediaElement”上设置“srcObject”属性

您的浏览器似乎还没有为 blob 实现 srcObject。这是普通的atm。

例如Chrome 和 Firefox 都有 partial support 用于 srcObject 仅用于流，而不是 blob、文件或媒体源。

srcObject 上的 MDN 回应了这一点：

截至 2017 年 11 月，浏览器仅支持 MediaStream。对于 MediaSource、Blob 和 File，您必须使用 URL.createObjectURL() 创建一个 URL 并将其分配给 HTMLMediaElement.src。

【讨论】：

URL.createObjectURL 仅在流中被弃用......很棒的响应。谢谢！

但是在这里developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/… 他们给出了一个MediaSource 的例子，并为createObjectURL 选项添加了一条评论“避免在新的浏览器中使用它，因为它正在消失”。这令人困惑。

@AlexanderZinchuk 你说得对，MDN example 令人困惑，所以我更新了它。 PTAL！

我爱你，希望你有我的孩子

【参考方案2】：

除了 jib 的回答之外，这里有一个来自 MDN 的代码 sn-p，详细说明了支持旧浏览器的后备方案：

const mediaSource = new MediaSource();
const video = document.createElement('video');
try 
  video.srcObject = mediaSource;
 catch (error) 
  video.src = URL.createObjectURL(mediaSource);