javascript - HTMLImageElement - src 作为流

Question

过去，您可以使用 URL.createObjectURL() 并向其传递一个 MediaStream。但是，这已被删除(请参阅 https://www.fxsitecompat.dev/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/ )。

替换功能是改为使用 HTMLMediaElement.srcObject。这很好地覆盖了视频案例。

但是，HTMLImageElement 不继承自 HTMLMediaElement。它也没有 srcObject。

在我的具体案例中，我正在开发一个 FireFox 插件，它利用 WebRequest 过滤器流功能来进行图像转换。使用该 API，我可以获得 ArrayBuffer 数据 block 。我希望能够在收到它们时将它们流式传输到一个 Image() 中，它正在动态解码它们，而不是简单地累积它们，将它们变成一个 Blob，然后再转换成一个 URL通过 URL.createObjectURL(blob)。

有没有办法以流式传输的方式完成此操作？

(注意 1:如果需要，我可以使用 FireFox 特定的解决方案。)

(注意 2:我尝试将 HTMLVideoElement src 设置为例如 PNG，但看起来视频元素确实很挑剔，只支持视频格式而不是静止图像。如果我能得到 HTMLVideoElement。 srcObject 来加载静止图像，这也可能使基于 MediaStream 的解决方案成为可能)。

Answer 1

URL.createObjectURL( MediaStreamInstance ) 已被弃用，URL.createObjectURL( BlobInstance ) 或此方法的其他有效输入(如 MediaSource)均已弃用。

MediaStreams 只能公开视频和音频媒体数据，我找不到确切的引述，但 reading the specs 说得很清楚，而且 MediaStreamTrack.kind 只能是 "audio" 或 "video"。

就像您无法设置 <img src="video.mp4"> 一样，您永远无法将 MediaStream 传递给 <img> ，所以这对您来说不是问题，并且 URL.createObjectURL 将按您的意愿工作:

const img = document.getElementById( 'img' );
fetch( "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" )
.then( (resp) => resp.arrayBuffer() )
.then( (buf) => {
  const blob = new Blob( [buf], { type: 'image/png' } );
  img.src = URL.createObjectURL( blob );
} );

<img id="img">

在 <img> 中拥有 true 流的唯一方法是通过 MJPEG format 。

---

已经决定不再允许使用 MediaStreams，因为作者经常没有在他们应该撤销它的时候撤销它，并且由 blobURI 链接的 MediaStream 必须保持事件状态，这意味着即使是硬件源如果本地流必须在此 blobURI 的整个生命周期内保持运行(在某些情况下可能会很长)。

当所有主流浏览器最终都支持 MediaStreams 的 MediaElement.srcObject 属性时，保留它就没有意义了。

Here is a long discussion that occurred on the specs' repo .
Here is Firefox's bug report.
Here is Chrome's one .

(请注意，唯一被删除的是通过 blobURI 使 <iframe> 或 <object> 指向此类 MediaStream 的能力，但没有真正的用例来使用这些而不是 <video> 元素。 )