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

Question

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

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

有没有人知道任何其他方式来展示MJPEG-Stream？ （除了使用其他浏览器，这在Android App中是不可能的）

Answer 1

您可以在不重复发出Http请求的情况下执行此操作。只有一个就足够了。您可以使用fetch api创建一个ReadableStream，访问它的Reader并继续从流中读取。

一旦你让读者继续递归地从流中读取块。在字节流中查找SOI（0xFF 0xD8），它表示标题的结尾和JPEG帧的开头。标题将包含要读取的JPEG字节长度。从块和任何连续的块读取许多字节并将其存储到Uint8Array中。成功读取帧后，将其转换为blob，从中创建一个UrlObject并将其分配给img对象的src属性。

您可以将标头和凭据作为参数提供给fetch方法。

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

继续这样做，直到连接关闭。

无耻的插头。这是github工作样本的链接。您可以根据需要添加标头。