HTML5不支持RTSP协议,需转为HLS或MSE等浏览器支持的格式;常见方案为服务端用FFmpeg、ZLMediaKit等转封装,前端用Hls.js播放,并注意音频编码、CORS及音轨配置。

HTML5 本身不支持 RTSP 协议
直接在 或 标签里写 src="rtsp://...",浏览器会静默失败——不是“无声”,是根本没加载。Chrome、Firefox、Safari 全部不实现 RTSP 客户端栈,这是标准层面的限制,不是配置或编码问题。
常见误操作包括:
- 用
curl能通 RTSP 地址,就以为前端也能播 - 把 RTSP URL 粘进
后检查控制台,只看到DOMException: The element has no supported sources却不深究协议支持边界 - 尝试加
type="video/mp4"或type="audio/aac"强行伪装,无效
必须转成 HTML5 支持的流格式(如 HLS 或 MSE)
可行路径只有两条:服务端转封装,或客户端用 WebAssembly 解码器(极少见且复杂)。生产环境几乎都选第一种。
典型方案组合:
立即学习“前端免费学习笔记(深入)”;
-
FFmpeg + nginx-rtmp-module:拉取 RTSP 流,转成 RTMP,再由 nginx 推出 HLS(
.m3u8+.ts) - GStreamer + node-media-server:接收 RTSP,输出 HTTP-FLV 或 HLS
-
Wowza / SRS / ZLMediaKit:开箱支持 RTSP 拉流 + HLS/WebRTC 输出,ZLMediaKit 还能直出 MSE 所需的
mp4分片(dash或hls模式)
注意:音频编码必须是 aac(HLS)或 opus(WebRTC),g711、g726 等传统安防音频格式需转码,否则即使流能建立, 仍静音。
用 Hls.js 播放 HLS 音频时仍无声?检查这些点
Hls.js 是最常用的 HLS 前端播放器,但默认行为对纯音频流不友好。
- 确保 HLS 清单(
.m3u8)中包含AUDIOgroup,且EXT-X-MEDIA的TYPE=AUDIO正确声明 -
Hls.js实例需显式启用音频轨道:hls.audioTrack = 0(尤其当流含多音轨时) - 避免用
标签自动播放纯音频 HLS:有些浏览器策略会阻止无用户手势的play(),需绑定点击事件后调用hls.loadSource()和audio.play() - 检查响应头:
Access-Control-Allow-Origin: *必须存在,否则Hls.js无法 fetch.ts片段,控制台报 CORS 错误而非静音
真要“原生”播 RTSP?只能绕过浏览器协议栈
所谓“HTML5 播 RTSP”本质是欺骗:用 WebSocket 传裸 RTP 包,再用 WebAssembly(如 ffmpeg.wasm)解码 + Web Audio API 播放。这条路成本高、延迟大、兼容性差。
实际踩坑点:
-
ffmpeg.wasm默认不编译音频解码器(需手动加--enable-decoder=mp3,aac参数重编) - RTP 时间戳需严格对齐 Web Audio 的
context.currentTime,否则卡顿/跳帧 - RTSP/OVER-UDP 在公网不可靠,必须走 TCP 封装(
rtsp://...?tcp),且服务端要支持 - 移动端 Safari 对 WebAssembly 音频实时处理限制极严,大概率失败
如果不是做内网低延迟监控系统,别碰这条线。优先确认 RTSP 音频源是否真的需要——很多 IPC 摄像头的 RTSP 流根本没开音频通道,ffmpeg -i rtsp://... 查看输出里有没有 Audio: aac 才是第一步。










