替代在img-Tag中显示mjpeg（使用基本身份验证）

Question

一段时间后，Chromium发生了更新，确实引入了新的安全性“增强”。他们现在禁止在例如基本身份验证中使用图像元素的source-Attribute。 （有关详细信息，请参阅https://code.google.com/p/chromium/issues/detail?id=305215）

我知道使用基本身份验证是多么不安全，并且您根本不使用任何身份验证。但是，在我的情况下，有很多客户在他们的相机上设置了用户名和密码，而这些相机不支持任何其他认证机制，有一个替代方案非常重要。

有没有人知道任何其他方式来展示MJPEG-Stream？ （除了使用另一个浏览器，这在Android应用程序中是不可能的，例如。）

Answer 1

您可以执行此操作而无需重复发出Http请求。仅一个就足够了。您可以使用fetch api创建一个ReadableStream，访问它的Reader并继续从流中读取。

一旦您有了读取器，便会递归地从流中读取块。在字节流中寻找SOI（0xFF 0xD8），该信号指示标头的结尾和JPEG帧的开头。标头将包含要读取的JPEG长度（以字节为单位）。从块和任何后续块中读取那么多字节，并将其存储到Uint8Array中。一旦你 成功读取框架，将其转换为Blob，从中创建一个UrlObject，并将其分配给img对象的src属性。

您可以将标头和凭据作为获取方法的参数。

fetch("/path/to/mjpeg/stream", {
    Authorization: "Basic dm9yZGVsOnZvcmRlbA=="  
}).then(response => {...})

继续执行直到连接关闭。

无耻的插头。这是指向github上的工作示例的链接。您可以根据需要添加标题。