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 吗？

原文由 Will 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

类型错误：无法在“HTMLMediaElement”上设置“srcObject”属性

看起来您的浏览器尚未为 blob 实现 srcObject 。这是普通的atm。

例如，Chrome 和 Firefox 仅对流的 srcObject 提供 部分支持，但不支持 blob、文件或媒体源。

srcObject 上的 MDN 回应了这一点：

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

原文由 jib 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在这里添加我最近在 iOS 和 MacOS 上使用 Safari 的“有趣”体验。我终于发现最新版本需要更多的爱才能播放 blob 视频，即使用新的 video.srcObject（不是 .src）需要提供一个新的 Blob，其中包含有关视频的类型信息被播放。例如：

 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);
    }
}

希望这可以帮助一些人。

原文由 Mann1ng 发布，翻译遵循 CC BY-SA 4.0 许可协议