替代在img标记中显示mjpeg(使用基本身份验证）

Alternative to showing mjpeg in an img-Tag (with Basic-Authentication)

本文关键字：身份验证 mjpeg 显示 img      更新时间：2023-09-26

不久前Chromium中有一个更新，确实引入了新的安全"增强"。他们现在禁止在例如图像元素的源属性中使用基本身份验证。（请参见https://code.google.com/p/chromium/issues/detail?id=305215了解更多详细信息）

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

有人知道其他显示MJPEG流的方式吗？（除了使用另一个浏览器之外，这在Android应用程序中是不可能的，例如）

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

一旦你让阅读器继续递归地从流中读取块。在字节流中查找SOI（0xFF 0xD8），该SOI表示报头的结束和JPEG帧的开始。标头将包含要读取的JPEG的长度（以字节为单位）。从块和任何连续的块中读取那么多字节，并将其存储到Uint8Array中。一旦你成功读取框架，将其转换为blob，从中创建一个UrlObject，并将其分配给img对象的src属性。

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

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

继续执行此操作，直到连接关闭。

无耻的插头。下面是github上一个工作示例的链接您可以根据需要添加标题。

相关文章：