本文介绍如何通过html5 video标签和javascript，将ip摄像头的rtsp或http视频流嵌入网页，涵盖获取流地址、前端实现、跨域处理等关键步骤，适用于wifi局域网内的轻量级监控界面开发。
本文介绍如何通过html5 video标签和javascript，将ip摄像头的rtsp或http视频流嵌入网页，涵盖获取流地址、前端实现、跨域处理等关键步骤，适用于wifi局域网内的轻量级监控界面开发。
要在纯HTML/CSS/JavaScript构建的网页中接入IP摄像头，核心思路是：将摄像头提供的视频流（通常是HTTP-FLV、MJPEG、H.264 over HTTP或WebRTC兼容流）直接加载到HTML5 。无需依赖厂商App，也无需复杂后端——前提是摄像头支持标准流协议且网络可达。
✅ 第一步：确认并获取有效的视频流URL
不同品牌IP摄像头暴露的流地址格式各异，常见路径如下（请登录摄像头Web管理界面或查阅说明书）：
| 流类型 | 典型URL示例（假设摄像头IP为 192.168.1.100） |
|---|---|
| MJPEG（最兼容） | http://192.168.1.100:80/cgi-bin/mjpg/video.cgi |
| H.264 over HTTP | http://192.168.1.100:80/vid1.h264（部分海康/大华设备） |
| RTSP（需转码） | rtsp://admin:password@192.168.1.100:554/stream1（不能直接用于） |
⚠️ 注意：RTSP流无法被HTML5 。若摄像头仅提供RTSP，必须通过FFmpeg + Nginx-RTMP或Node.js（如node-rtsp-stream）做实时转封装，输出为浏览器可播的HTTP-FLV或HLS（.m3u8）。
✅ 第二步：HTML + JavaScript 嵌入播放
以下是最小可行代码（MJPEG示例），兼容所有现代浏览器：
<meta charset="UTF-8"><title>IP摄像头实时监控</title><style>
#camera-stream { width: 100%; max-width: 800px; border: 1px solid #ccc; }
</style><h2>主摄像头画面</h2>
<video id="camera-stream" controls autoplay muted></video><script>
const video = document.getElementById('camera-stream');
// 替换为你的实际流地址（务必确保URL可被浏览器直接访问）
const streamUrl = 'http://192.168.1.100/cgi-bin/mjpg/video.cgi';
// 自动重连机制（应对网络抖动）
function loadStream() {
video.src = streamUrl + '?t=' + Date.now(); // 添加时间戳避免缓存
video.onerror = () => {
console.warn('视频流加载失败，3秒后重试...');
setTimeout(loadStream, 3000);
};
}
loadStream();
</script>
⚠️ 关键注意事项
-
跨域限制（CORS）：若摄像头不支持CORS头（如Access-Control-Allow-Origin: *），浏览器会拦截请求。解决方案：
- ✅ 优先尝试：在本地开发时用 http-server --cors 启动服务（而非直接双击HTML）；
- ✅ 局域网部署：用Nginx反向代理摄像头流，并添加add_header 'Access-Control-Allow-Origin' '*';；
- ❌ 不推荐：禁用浏览器安全策略（仅调试用，不可上线）。
认证问题：含用户名密码的URL（如http://user:pass@ip/path）在现代浏览器中已被弃用。建议改用代理或服务端鉴权（如通过fetch+Blob URL中转）。
移动端适配：iOS Safari对自动播放限制严格，需添加 muted 属性；Android建议使用playsinline属性防止全屏跳转。
✅ 进阶建议
- 若需多路摄像头，可用CSS Grid布局+多个
- 结合MQTT（如你已接入）：用Paho MQTT库订阅传感器状态（如移动侦测告警），与视频流联动；
- 安全提醒：切勿将摄像头暴露在公网，局域网内使用静态IP+强密码。
只要摄像头提供标准HTTP视频流，这套方案即可零依赖运行——简洁、可靠、易于维护，完美契合轻量级WiFi监控场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
