javascript - Video 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 仅针对 streams 而不是 blob 和 mediasources。

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

If you still have code that relies on createObjectURL() to attach streams to media elements

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

TypeError: Failed to set the 'srcObject' property on 'HTMLMediaElement

看起来您的浏览器还没有为 blob 实现 srcObject。这是普通的 atm。

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

MDN 上 srcObject呼应这个:

As of November 2017, browsers only support MediaStream. For MediaSource, Blob and File, you have to create a URL with URL.createObjectURL() and assign it to HTMLMediaElement.src.