本地IP摄像头MJPEG监控代码在Chrome/Opera/Edge失效问题求助

问题原因 #

Chrome、Opera、Edge这类Chromium内核浏览器，出于安全限制，禁止在页面内的<img>标签src属性中直接嵌入HTTP Basic Auth的明文凭据（即user:pass@格式的URL），但Firefox允许这种写法；直接在地址栏输入带凭据的URL时，浏览器会单独处理认证流程，所以可以正常显示。

解决方案 #

方案1：通过JavaScript添加认证头加载画面 #

1. 先修改HTML，移除src中的明文凭据，保留data-url存储原始地址：

<img src="" alt="Loading..." class="httpCam Mjpeg" data-url="http://192.168.1.X:80/Streaming/channels/1/preview?">

2. 添加JavaScript代码，通过Fetch API携带认证头获取画面并赋值给img：

async function loadCamera() {
  const camImg = document.querySelector('.httpCam.Mjpeg');
  const camUrl = camImg.dataset.url;
  // 替换为你的摄像头账号密码
  const auth = btoa('admin:passwd');
  
  try {
    const res = await fetch(camUrl, {
      headers: {
        'Authorization': `Basic ${auth}`
      }
    });
    if (!res.ok) throw new Error('认证失败');
    const blob = await res.blob();
    camImg.src = URL.createObjectURL(blob);
  } catch (err) {
    console.error(err);
    camImg.alt = '摄像头加载失败';
  }
}

window.onload = loadCamera;

方案2：调整摄像头认证设置（推荐，更简洁） #

如果本地网络环境安全，可以修改摄像头的Web访问设置：

• 关闭HTTP Basic Auth认证
• 添加本地IP白名单，允许你的设备无需认证访问摄像头画面
  修改后直接使用不带凭据的URL即可：

<img src="http://192.168.1.X:80/Streaming/channels/1/preview?" alt="Loading..." class="httpCam Mjpeg">

方案3：使用iframe中转（备选） #

创建一个单独的HTML文件（比如cam-proxy.html），里面只写带凭据的img标签，然后在主页面用iframe嵌入这个文件：

<iframe src="cam-proxy.html" width="640" height="480" frameborder="0"></iframe>

cam-proxy.html内容：

<!DOCTYPE html>
<html>
<body style="margin:0">
  <img src="http://admin:passwd@192.168.1.X:80/Streaming/channels/1/preview?" style="width:100%;height:100%">
</body>
</html>

注意：部分新版本Chromium浏览器可能仍会限制iframe中的凭据，需要测试。

内容的提问来源于stack exchange，提问作者Kagan Biskiner