HTMLImageElement-src作为流 [英] HTMLImageElement - src as stream

问题描述

过去，您可以使用URL.createObjectURL()并将其传递给MediaStream.但是，此内容已被删除(请参见 https://www.fxsitecompat.dev/zh-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/).

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

但是，HTMLImageElement不能从HTMLMediaElement继承.它也没有srcObject.

在我的特定情况下，我正在开发一个FireFox插件，该插件利用WebRequest过滤器流功能进行图像转换.使用该API，我可以获得ArrayBuffer数据块.我希望能够在将它们接收到Image()时对其进行流传输，而该Image()正在对其进行解码，而不是简单地将它们累加，转换为Blob，然后通过URL.createObjectURL(blob)转换为URL.

是否可以通过流媒体方式完成此操作?

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

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

解决方案

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

MediaStreams仅能公开视频和音频媒体数据，如果确切地说，我找不到报价，但是 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 流的唯一方法是通过这里是关于规范回购的漫长讨论.
这是Firefox的错误报告.
这是Chrome浏览器的.

(请注意，唯一被删除的功能是能够通过blobURI使<iframe>或<object>指向此类MediaStream的能力，但是没有真正的用例来代替它们<video>元素.)

In the past, you could use URL.createObjectURL() and pass it a MediaStream. However, this has been removed (see https://www.fxsitecompat.dev/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/).

The replacement functionality was to instead use HTMLMediaElement.srcObject. This does a good job of covering the video case.

However, HTMLImageElement does not inherit from HTMLMediaElement. It does not have srcObject, either.

In my specific case, I am developing a FireFox plugin that utilizes the WebRequest filter stream functionality to do image transformations. With that API I get ArrayBuffer chunks of data. I would like to be able to stream these as I receive them to an Image() that is decoding them on the fly rather than simply accumulating them, turning them into a Blob, and then converting into a URL via URL.createObjectURL(blob).

Is there a way I can accomplish this in a streaming fashion?

(Note 1: I'm ok with a FireFox specific solution if need be.)

(Note 2: I tried setting HTMLVideoElement src to e.g. PNG but it appears that the video element is indeed picky and only supports video formats rather than stills. If I could get HTMLVideoElement.srcObject to load image stills, that might make a MediaStream-based solution possible, too).

解决方案

URL.createObjectURL( MediaStreamInstance ) has been deprecated, not URL.createObjectURL( BlobInstance ) nor other valid inputs for this method (like MediaSource).

MediaStreams are only able to expose video and audio media data, I couldn't find a quote were it's been said exactly, but reading the specs makes it pretty clear, along with the fact a MediaStreamTrack.kind can only be "audio" or "video".

Just like you can't set <img src="video.mp4">, you never could pass a MediaStream to an <img>, so it is not a problem for you, and URL.createObjectURL will work as you wish:

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">

The only way to have a true stream in an <img> is through the MJPEG format.

---

It has been decided that MediaStreams should not be allowed anymore, because too often authors didn't revoke it when they should have, and a MediaStream that got linked by a blobURI had to be kept alive, meaning that even the hardware source in case of a local stream had to be kept running for the whole life of this blobURI (which can be quite long in some circumstances).

When all major browsers finally did support the MediaElement.srcObject property for MediaStreams, that made little sense to keep this.

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

(note that the only one thing that got removed is the ability to make an <iframe> or <object> point to such a MediaStream through a blobURI, but there is no real use case to use these instead of the <video> element.)

这篇关于HTMLImageElement-src作为流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！