HTML5不支持RTSP，必须经服务端转为HLS、WebRTC等浏览器兼容协议；推荐FFmpeg+Nginx转HLS，或WebRTC实现低延迟播放，纯前端方案均不可行。
HTML5 本身不支持 RTSP 协议，必须转协议
浏览器原生的 标签只支持 HTTP(S) 协议下的 MP4、WebM、HLS（.m3u8）、DASH 等，完全不识别 RTSP URL（如 rtsp://192.168.1.100:554/stream）。直接把 RTSP 地址填进 src 属性会静音、黑屏或报错 DOMException: The element has no supported sources。
所以“获取 RTSP 流地址”不是前端能独立完成的事——你拿到的 RTSP 地址只是源头，必须经过服务端或边缘网关做协议转换：
- RTSP → RTMP（再用 Flash 或 flv.js 播放，已过时）
- RTSP → HLS（生成
.m3u8+.ts文件，推荐） - RTSP → WebRTC（低延迟，需信令与 SFU/ MCU 支持）
- RTSP → MSE（如通过 FFmpeg + WebSocket 推送 fragmented MP4，较复杂）
用 FFmpeg + nginx-http-flv-module 或 nginx-rtmp-module 转 HLS
这是中小项目最落地的方案：用 FFmpeg 拉取 RTSP 流，推给 Nginx 插件，Nginx 自动切片成 HLS。前端只需加载一个 .m3u8 地址。
关键步骤：
立即学习“前端免费学习笔记（深入）”；
- 安装支持 HLS 的 Nginx（如编译
nginx-rtmp-module，启用hls on） - 运行 FFmpeg 命令拉流并推送到 Nginx：
ffmpeg -i "rtsp://192.168.1.100:554/stream" -c copy -f flv rtmp://localhost:1935/hls/stream
- Nginx 配置中指定 HLS 输出路径，例如生成
/hls/stream.m3u8 - 前端
使用hls.js加载：const video = document.getElementById('video');
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource('http://your-server/hls/stream.m3u8');
hls.attachMedia(video);
}
注意：hls.js 在 Safari 上可直接用原生 src，但 Chrome/Firefox 必须用它；且 HLS 有 10–30 秒延迟，不适合互动场景。
WebRTC 方案：延迟可压到 500ms 内，但部署更重
如果你需要对讲、云台控制或实时告警联动，WebRTC 是更合适的选择，但它不靠“获取地址”完事，而依赖完整信令链路。
典型流程：
- 前端调用信令服务器（如用 Node.js + Socket.IO）发起观看请求
- 信令服务器通知流媒体服务（如
mediasoup、Janus或EasyDarwin）拉取 RTSP 流 - 流媒体服务将 RTSP 解码为帧，再编码为 VP8/VP9/H.264，并通过 WebRTC DataChannel 或 SFU 分发
- 前端用
RTCPeerConnection接收并渲染：pc.addTransceiver('video', { direction: 'recvonly' });
pc.setRemoteDescription(offer);
// 后续处理 answer 和 ICE candidate...
你看到的“RTSP 流地址”在此方案中只用于服务端配置，前端永远接触不到原始 RTSP；所有 SDP 交换、编解码协商、NAT 穿透都由 WebRTC 栈自动处理，但运维成本明显高于 HLS。
别踩坑：哪些“伪方案”实际不可行
网上有些文章说“用 Video.js + rtsp-plugin 就能播 RTSP”，本质是误导——那些插件要么依赖已废弃的 NPAPI 插件（Chrome 早已移除），要么底层仍调用本地 Electron/Node 进程做转码，**不是纯 HTML5 前端方案**。
常见失效点：
-
：所有现代浏览器直接忽略，控制台报错Failed to load resource - 用 WebSocket 直接传 RTSP 数据包：RTSP 是带状态的 TCP 协议，含 SETUP/PLAY 交互，不能简单二进制转发
- 把 RTSP URL 当作 HLS 地址填入
hls.js：会报no EXTM3U delimiter，因为根本不是 m3u8 格式 - 以为改个
Content-Type响应头就能让浏览器识别 RTSP：无意义，解析逻辑在浏览器内核硬编码
真正要动手，先确认你控制得了流媒体服务端——没有服务端配合，纯前端拿 RTSP 流地址没有任何播放意义。
