如何在Chrome和Opera中通过HTML显示/image/jpeg.cgi摄像头快照？

问题原因 #

Chrome、安卓Opera等现代浏览器出于安全策略，禁止在<img>标签的src属性中直接嵌入HTTP Basic认证的用户名和密码（即http://user:pass@ip这种格式），但在新窗口打开时浏览器会单独触发认证流程，所以能正常显示。

解决方案：PHP代理脚本 #

通过PHP脚本作为中间代理，由服务器端发起请求获取摄像头快照并返回给浏览器，避开浏览器的限制。

步骤1：创建PHP代理脚本 #

新建一个名为camera-proxy.php的文件，内容如下：

<?php
// 替换为你的摄像头实际信息
$camera_ip = 'my-ip';
$username = 'guest';
$password = '1234';
// 摄像头快照接口，可保留profileid参数
$image_url = "http://{$camera_ip}/image/jpeg.cgi?profileid=1";

// 使用cURL请求摄像头快照
$ch = curl_init($image_url);
curl_setopt($ch, CURLOPT_USERPWD, "{$username}:{$password}");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$image_data = curl_exec($ch);
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

// 返回图片内容或错误信息
if ($http_code === 200) {
    header('Content-Type: image/jpeg');
    echo $image_data;
} else {
    header('Content-Type: text/plain');
    echo "获取快照失败，HTTP状态码: {$http_code}";
}
?>

步骤2：在HTML中引用代理脚本 #

将原来的<img>标签修改为引用这个PHP脚本：

<img src="camera-proxy.php" alt="D-Link摄像头快照">

注意事项 #

• 确保你的PHP服务器已开启cURL扩展（绝大多数主机默认支持）
• 确认服务器所在网络能访问到摄像头（同局域网或端口已对外开放）
• 若不需要profileid=1参数，可从$image_url中移除

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