如何用PHP/JS实现IP摄像头MJPEG流自动认证显示？

嘿，我来帮你搞定这个问题！你遇到的核心问题是：PHP curl的会话和浏览器的会话完全独立——你用curl发的认证请求，服务器返回的认证凭证（比如Cookie或者会话标识）只存在curl的上下文里，浏览器根本拿不到，所以浏览器请求视频流时还是会触发401。下面给你两个可行的解决方案：

方案一：PHP代理转发视频流（最稳妥，无跨域问题） #

这个思路是让你的PHP脚本充当中间代理：浏览器请求你的PHP页面，PHP带着认证信息去请求摄像头的视频流，然后把流原封不动转发给浏览器。这样浏览器不需要直接和摄像头交互，自然不用手动认证。

代理代码示例（proxy.php） #

<?php
$camUrl = 'http://10.0.0.74/mjpg/1/video.mjpg';
$user = '你的摄像头用户名';
$pass = '你的摄像头密码';

// 初始化curl请求
$ch = curl_init($camUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, false); // 直接输出流，不缓存
curl_setopt($ch, CURLOPT_USERPWD, "{$user}:{$pass}");
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_HEADER, true); // 转发摄像头的响应头

// 获取摄像头的响应头，提取Content-Type
curl_setopt($ch, CURLOPT_NOBODY, true);
curl_exec($ch);
$contentType = curl_getinfo($ch, CURLINFO_CONTENT_TYPE);

// 发送正确的响应头给浏览器
header("Content-Type: {$contentType}");

// 重新请求视频流并输出
curl_setopt($ch, CURLOPT_NOBODY, false);
curl_exec($ch);
curl_close($ch);
?>

前端调用方式 #

在你的网页里直接引用这个代理脚本：

<img src="proxy.php" alt="摄像头视频流" />

方案二：前端JS处理认证（需注意跨域限制） #

如果不想用代理，你可以让前端JS在请求视频流时带上认证信息，但要满足两个前提：

1. 摄像头允许你的网页域名发起跨域请求（即摄像头配置了Access-Control-Allow-Origin响应头）
2. 摄像头使用的是HTTP Basic认证（如果是Digest认证，处理起来会复杂很多）

代码示例 #

const camUrl = 'http://10.0.0.74/mjpg/1/video.mjpg';
const username = '你的摄像头用户名';
const password = '你的摄像头密码';

// 生成Basic认证头
const authHeader = 'Basic ' + btoa(`${username}:${password}`);

// 用Fetch获取流并渲染
fetch(camUrl, {
  headers: {
    'Authorization': authHeader
  }
})
.then(response => response.blob())
.then(blob => {
  const img = document.querySelector('#cam-stream');
  img.src = URL.createObjectURL(blob);
})
.catch(err => console.error('认证或请求失败:', err));

然后在HTML里：

<img id="cam-stream" alt="摄像头视频流" />

你之前PHP代码的小问题 #

顺便提一句：你写的authenticateInput函数里，$authString = '$user:$pass';用了单引号，变量不会被解析，应该改成双引号拼接：$authString = "{$user}:{$pass}";——不过就算改了这个，还是因为会话不共享的问题解决不了根本问题，所以还是用上面的方案更靠谱。

注意事项 #

• 如果摄像头用的是Digest认证，方案一的curl会自动处理（curl默认支持Digest认证），但方案二的JS需要手动处理Digest的认证流程，会麻烦很多，优先选代理方案。
• 代理方案要注意服务器的性能，毕竟要转发视频流，建议给PHP设置合适的超时时间和内存限制。

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