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: Failed to set the 'srcObject' property on 'HTMLMediaElement': The provided value is not of type '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，因为流本质上是本地的 objects。

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

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

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

srcObject 上的 MDN 回应：

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.

Answer 2

除了 jib 的回答之外，这里还有来自 MDN 的代码片段，详细说明了支持旧版浏览器的后备方案：

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

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

Video mediaDevices Assign a Blob To 'videoRef.srcObject' In Place of 'src'

javascript

html5-video

webrtc

recordrtc