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 数据块。我希望能够在我收到它们时将它们流式传输到Image()正在解码它们的实时解码器，而不是简单地累积它们，将它们转换为 Blob，然后通过URL.createObjectURL(blob).

有没有办法以流媒体方式完成此任务？

（注 1：如果需要，我可以使用 FireFox 特定的解决方案。）

（注意 2：我尝试将HTMLVideoElementsrc设置为例如 PNG 但看起来视频元素确实很挑剔并且只支持视频格式而不是静止HTMLVideoElement.srcObject图像。如果我可以加载图像静止图像，那也可能使基于 MediaStream 的解决方案成为可能）。

Answer 1

URL.createObjectURL( MediaStreamInstance )已被弃用，URL.createObjectURL( BlobInstance )也不是此方法的其他有效输入（如 MediaSource）。

MediaStreams 只能公开视频和音频媒体数据，我找不到确切的引用，但阅读规范使它非常清楚，事实上 aMediaStreamTrack.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">

在 an 中拥有真正流的唯一方法<img>是通过MJPEG 格式。

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

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

这是在规范的 repo 上发生的长时间讨论。
这是 Firefox 的错误报告。
这是 Chrome 的一个。

（请注意，唯一被删除的是能够通过 blobURI创建<iframe>或<object>指向这样的 MediaStream，但没有真正的用例来使用这些而不是<video>元素。）