本文介绍如何通过html5 video标签和javascript将ip摄像头的rtsp/http视频流嵌入网页，涵盖获取流地址、前端实现、跨域解决方案及常见注意事项。
本文介绍如何通过html5 video标签和javascript将ip摄像头的rtsp/http视频流嵌入网页，涵盖获取流地址、前端实现、跨域解决方案及常见注意事项。
要在纯前端（HTML/CSS/JavaScript）构建的网页中实时显示IP摄像头画面，核心在于获取摄像头提供的标准视频流URL，并通过HTML5 <video> 标签直接播放。大多数现代IP摄像头（如海康威视、大华、Axis、Reolink等）均支持输出H.264/H.265编码的HTTP-FLV、MJPEG或HLS（.m3u8）流，部分高端型号也提供WebRTC或RTSP over WebSockets方案——但最轻量、兼容性最佳的入门方式是使用原生 <video> 标签加载HTTP协议流。
✅ 基础实现步骤
-
确认并获取视频流URL
登录摄像头Web管理界面（通常为 http://<camera-ip>），在「网络」→「视频服务」或「流媒体设置」中查找以下典型流地址格式（具体路径请以设备手册为准）：-
MJPEG 流（兼容性最强，适合低帧率监控）：
http://192.168.1.100:80/videostream.cgi?user=admin&pwd=12345 -
HLS 流（iOS/Safari友好，需摄像头支持）：
http://192.168.1.100:80/Streaming/Channels/101/hls/PrimaryStream.m3u8 - ❌ 注意：原生RTSP（如 rtsp://admin:12345@192.168.1.100:554/stream1）无法被HTML5 <video> 直接播放，必须经由后端转封装为HLS或WebRTC。
-
MJPEG 流（兼容性最强，适合低帧率监控）：
HTML + JavaScript 嵌入代码
在页面中添加 <video> 元素，并用JavaScript动态注入流地址：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>IP摄像头实时监控</title>
<style>
#camera-stream { width: 100%; max-width: 960px; border: 1px solid #ddd; border-radius: 4px; }
</style>
</head>
<body>
<h2>主摄像头画面</h2>
<video id="camera-stream" controls autoplay muted></video>
<script>
const videoEl = document.getElementById('camera-stream');
// ✅ 替换为你的实际流地址（务必测试该URL在浏览器地址栏可直接播放）
const streamUrl = 'http://192.168.1.100:80/videostream.cgi?user=admin&pwd=12345';
videoEl.src = streamUrl;
videoEl.onerror = () => {
console.error('视频流加载失败，请检查URL、网络连通性及跨域配置');
videoEl.innerHTML = '⚠️ 摄像头连接失败：请确认流地址正确且服务已启用';
};
</script>
</body>
</html>? 关键提示：
- 添加 muted 属性——多数浏览器要求自动播放的视频必须静音；
- 使用 onerror 事件捕获加载失败，便于调试；
- 避免将账号密码硬编码在前端——生产环境应通过后端API代理流地址，隐藏敏感信息。
⚠️ 跨域（CORS）问题与解决方案
当网页域名（如 http://localhost:3000）与摄像头IP（如 http://192.168.1.100）不同时，浏览器会因同源策略拒绝加载流媒体资源，控制台报错 Blocked by CORS policy。
| 方案 | 说明 | 适用场景 |
|---|---|---|
| ✅ 后端代理（推荐） | 用Node.js/Nginx/Python等搭建反向代理，使流URL变为同源（如 /api/camera-stream），由服务端转发请求并注入 Access-Control-Allow-Origin: * 响应头 | 生产环境、需安全管控 |
| ? 摄像头启用CORS（若支持） | 少数新型IP摄像头（如部分ONVIF 2.4+设备）可在Web设置中开启CORS头 | 快速验证，非通用方案 |
| ? 开发临时绕过（仅限测试） | Chrome启动时加参数 --unsafely-treat-insecure-origin-as-secure="http://192.168.1.100" --user-data-dir=/tmp/chrome-test | 本地开发调试，切勿用于正式环境 |
? 补充建议与进阶方向
- 性能优化：对高分辨率摄像头（如4K），优先选用HLS流并配置合适码率；MJPEG在高帧率下易造成带宽压力。
- 多路画面：通过多个 <video> 标签+独立URL实现，配合CSS Grid布局。
- MQTT集成：你提到的MQTT可用于传输元数据（如移动侦测告警、温度传感器值），而非视频流本身——可用Paho MQTT库订阅主题，在网页中联动显示状态。
- 安全性加固：生产部署务必禁用摄像头默认弱口令，启用HTTPS（若支持），并通过Nginx Basic Auth或JWT网关限制流访问权限。
只要摄像头开放了标准HTTP视频接口，无需依赖厂商SDK或专用App，纯前端即可完成专业级集成——这是IP监控走向开放Web生态的关键一步。
立即学习“前端免费学习笔记（深入）”；
