视频媒体设备将 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，而只有stream不能使用src？

Answer 1

URL.createObjectURL

仅针对 streams 弃用，对于 blob 和媒体源不弃用。

您引用的 MDN 警告位于标题为“对媒体流使用对象 URL”的部分下。警告本身说：

如果您仍然有依赖 createObjectURL() 来将

streams 附加到媒体元素的代码

人们正在努力弃用

URL.createObjectURL

，特别是围绕

streams，因为流本质上是本地对象。

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

看起来您的浏览器尚未为 blob 实现

srcObject

。这是常见的atm。

例如Chrome 和 Firefox 都对流的 srcObject 提供

部分支持

，但不支持 blob、文件或媒体源。 MDN 上的

srcObject

呼应了这一点：

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

Answer 2

var fileInfo = {type: "video/mp4"}
video.srcObject = new Blob([blob], fileInfo);

使用另一篇文章中的基本结构，以下代码对我有用：

function setVideoFromBlob(blob, fileInfo = {type: "video/mp4"}) {
    // Older browsers may not have srcObject
    if ('srcObject' in video) {
        try {
           //fileInfo (type) required by safari, but not by chrome..
           video.srcObject = new Blob([blob], fileInfo);
        } catch (err) {
            if (err.name != "TypeError") {
                throw err;
            }
            // Even if they do, they may only support MediaStream
            video.src = URL.createObjectURL(blob);
        }
    } else {
        video.src = URL.createObjectURL(blob);
    }
}

希望这可以帮助一些人。

Answer 3

MDN

的代码片段，详细说明了支持旧版浏览器的后备方案：

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

Answer 4