javascript - HTMLImageElement-src作为流

过去，您可以使用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数据块。我希望能够在接收它们时将它们流式传输到Image()中，该代码将即时对其进行解码，而不是简单地对其进行累加，将它们转换为Blob，然后通过URL.createObjectURL(blob)转换为URL。

有什么方法可以通过流媒体方式完成？

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

(注2:我尝试将HTMLVideoElement src设置为PNG，但似乎视频元素确实很挑剔，并且仅支持视频格式，而不支持静止图像。如果我可以让HTMLVideoElement.srcObject加载图像静止图像，则可能使基于MediaStream的解决方案成为可能)。

最佳答案

不建议使用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>中具有真正的流的唯一方法是通过MJPEG format。

已经决定不再允许MediaStreams，因为很多时候作者并没有撤消MediaStreams，并且必须保持通过blobURI链接的MediaStream保持 Activity 状态，这意味着即使在硬件来源的情况下，在此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>元素来使用它们。)