视频mediaDevices将Blob分配给'videoRef.srcObject'代替'src'

Question

我正在尝试将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，只有流不能使用src？

Answer 1

URL.createObjectURL仅针对 流 而弃用，而不是blob和mediasources。

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

  

如果仍有依赖createObjectURL（）的代码将 流 附加到媒体元素

努力在 流 周围弃用URL.createObjectURL，因为流本身就是本地对象。

  

TypeError：无法设置＆＃39; srcObject＆＃39; ＆＃39; HTMLMediaElement

上的属性

您的浏览器似乎尚未针对blob实施srcObject。这是常见的。

E.g。对于仅用于流的srcObject，Chrome和Firefox都有partial support，但不包括blob，file或mediasource。

srcObject上的MDN回应了这个：

  

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

Answer 2

除jib的答案外，这是MDN的代码段，详细说明了支持旧版浏览器的后备功能：

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