Javascript 在img标签中显示mjpeg的替代方案（具有基本身份验证）

Chromium不久前有一个更新，引入了一个新的安全“增强”。它们现在禁止在图像元素的源属性中使用基本身份验证。（有关更多详细信息，请参阅）

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

---

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

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

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

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

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

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

---

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

以这种方式传输HTTP身份验证凭据从未正式指定用于HTTP URL，这主要是用于FTP地址的。其他浏览器很长一段时间以来一直拒绝此项服务（或者至少要求用户确认他们是否希望在遇到此类URL时发送此数据）——因此任何使用此项服务的人都要自担风险，并且应该意识到这可能会在任何时候停止工作。-正式指定了基本身份验证。或者这里有什么问题吗？当然指定了HTTP基本身份验证本身。但是，通过URL传递凭据是不可能的。因此，如果您想在一个使用凭据“安全”的网站中显示实时流，还有什么机会呢。如何传递凭据？在我看来，他们实现的很弱，因此可以使用隐藏的iframe来强制验证：（这个img看起来总是坏掉的，但是chromebook上的调试器显示，如果iframe设置了匹配的基本验证，它正在读取它。）