HTML嵌入RTSP视频流方法详解

HTML 的 `

HTML 本身不支持直接嵌入 RTSP 流，video 标签只接受 HTTP(S) 协议的 MP4/WebM/HLS/DASH 等格式，rtsp:// 地址会直接被浏览器忽略或报错。

为什么 不工作

RTSP 是一个基于 TCP/UDP 的实时控制协议，不传输实际音视频数据（那是 RTP 干的），而现代浏览器出于安全、架构和标准化考虑，完全移除了对 RTSP/RTP 的原生支持。Chrome、Firefox、Edge 均会在控制台抛出类似错误：

Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

这不是路径写错或跨域问题，是协议被硬性拦截。

• RTSP 需要专用解码、网络保活、NAT 穿透能力，浏览器无此运行时环境
• 历史遗留插件（如 VLC Web Plugin）已全部废弃，且不兼容现代浏览器沙箱
• 移动端（iOS/Android WebView）同样不支持，连降级方案都没有

可行替代方案：服务端转流 + 前端播放 HLS 或 WebRTC

必须通过中间服务把 RTSP 流转换成浏览器可识别的格式。主流路径只有两条，选型取决于延迟容忍度和部署能力：

• HLS 方案（推荐入门）：用 ffmpeg 或 gstreamer 拉取 RTSP，切片为 .m3u8 + .ts，前端用 加载。延迟通常 5–30 秒
• WebRTC 方案（低延迟首选）：用 Janus、Mediasoup 或 Node-RED + webrtc-streamer 将 RTSP 转为 WebRTC 信令流，前端调用 RTCPeerConnection 播放。延迟可压至 500ms 内

例如用 ffmpeg 启动 HLS 转发：

ffmpeg -i "rtsp://admin:password@192.168.1.100:554/stream1" \
  -c:v libx264 -c:a aac -f hls \
  -hls_time 2 -hls_list_size 3 -hls_flags delete_segments \
  /var/www/html/stream.m3u8

前端只需：

<video controls autoplay>
  <source src="/stream.m3u8" type="application/x-mpegURL">
</video>

常见踩坑点：跨域、证书、编码兼容性

即使转流成功，仍可能黑屏或报错，关键检查项：

• Access-Control-Allow-Origin 必须设置，否则 fetch 或 HLS.js 会因 CORS 失败
• HLS 的 .m3u8 和 .ts 文件需同域或配好 CORS，Nginx 示例配置中不能漏掉 add_header 'Access-Control-Allow-Origin' '*';
• RTSP 源若为 H.265 编码，HLS.js 默认不支持，需加参数 enableWorker: true, enableSoftwareDecoding: true 或强制转 H.264
• 部分 IPC 厂商（如海康、大华）RTSP URL 含特殊字符（如 ch=1&stream=0），务必用 encodeURIComponent() 处理再拼接进 ffmpeg 命令

真正卡住人的从来不是“怎么写 HTML”，而是搞清谁来承担协议转换——浏览器不做，就必须有服务端或边缘设备顶上。没转流服务，rtsp:// 在任何 标签里都只是个死链接。

理论要掌握，实操不能落！以上关于《HTML嵌入RTSP视频流方法详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！