javascript - 在 img 标签中显示 mjpeg 的替代方案(使用基本身份验证)

Question

不久前 Chromium 进行了一次更新，确实引入了新的安全“增强功能”。他们现在禁止在例如网络中使用基本身份验证。图像元素的源属性。 (有关更多详细信息，请参阅https://code.google.com/p/chromium/issues/detail?id=305215)

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

有谁知道显示 MJPEG 流的其他方式吗？ (除了使用其他浏览器，这在 Android 应用程序中是不可能的)

Answer 1

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

一旦你让读者继续从流中递归地读取 block 。在字节流中查找 SOI (0xFF 0xD8)，它表示 header 结束和 JPEG 帧开始。 header 将包含要读取的 JPEG 长度(以字节为单位)。从 block 和任何连续 block 中读取那么多字节并将其存储到Uint8Array中。一旦你已经成功读取帧，将其转换为 blob，创建一个 UrlObject，并将其分配给您的 img 对象的 src 属性。

您可以提供 header 和凭据作为获取方法的参数。

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

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

无耻的插件。这是 github 上的工作示例的链接.您可以根据需要添加 header 。