HTML5原生不支持直接播放RTSP协议的流媒体，因为RTSP是实时流传输协议，浏览器默认没有对应的解码能力，也不支持该协议的网络请求，所以需要借助额外的技术方案来实现播放效果。
核心实现思路
要实现HTML5播放RTSP流，核心思路是将RTSP流转换为HTML5支持的流格式，再通过前端支持的播放器来渲染。常见的转换路径有两种：一种是将RTSP流转为HLS格式，另一种是将RTSP流转为WebSocket传输的FLV格式，两种方式各有适用场景。
方案一：RTSP转HLS格式播放
HLS是苹果推出的流媒体传输协议，HTML5的<video>标签原生支持该格式，兼容性较好，适合对延迟要求不高的场景。
实现步骤
- 部署流媒体转码服务，比如使用ffmpeg或者Nginx配合相关模块，将RTSP流拉取后转为HLS格式，生成m3u8索引文件和ts切片文件。
- 将生成的HLS静态资源部署到Web服务器，确保前端可以通过HTTP协议访问到m3u8文件。
- 前端使用<video>标签加载m3u8地址，即可完成播放。
以下是ffmpeg转RTSP为HLS的命令示例：
# 拉取RTSP流并转为HLS格式，输出到指定目录 ffmpeg -i rtsp://192.168.0.1:554/stream -c:v copy -c:a copy -f hls -hls_time 5 -hls_list_size 10 -hls_flags delete_segments output.m3u8
前端播放的代码示例：
<video controls width="800" height="450"> <source src="http://ipipp.com/hls/output.m3u8" type="application/x-mpegURL"> 您的浏览器不支持HLS播放 </video>
方案二：RTSP转WebSocket FLV播放
该方案延迟更低，适合对实时性要求高的监控场景，需要借助flv.js等前端播放库来解析FLV格式流。
实现步骤
- 服务端使用ffmpeg将RTSP流转为FLV格式，通过WebSocket协议推送给前端。
- 前端引入flv.js库，建立WebSocket连接接收FLV流，再通过flv.js将流喂给<video>标签解码播放。
以下是Node.js服务端转流推送的示例代码：
const WebSocket = require('ws');
const { spawn } = require('child_process');
// 创建WebSocket服务
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
// 拉取RTSP流并转为FLV格式输出
const ffmpeg = spawn('ffmpeg', [
'-i', 'rtsp://192.168.0.1:554/stream',
'-c:v', 'copy',
'-c:a', 'copy',
'-f', 'flv',
'pipe:1'
]);
// 将ffmpeg的输出推送给前端
ffmpeg.stdout.on('data', (data) => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(data);
}
});
ws.on('close', () => {
ffmpeg.kill();
});
});
前端播放的示例代码：
<script src="https://ipipp.com/flv.js"></script>
<video id="videoElement" controls width="800" height="450"></video>
<script>
if (flvjs.isSupported()) {
const videoElement = document.getElementById('videoElement');
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'ws://127.0.0.1:8080'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
两种方案对比
可以通过下表选择适合自己场景的方案：
| 对比项 | RTSP转HLS | RTSP转WebSocket FLV |
|---|---|---|
| 延迟 | 较高，通常5-10秒 | 较低，通常1-3秒 |
| 兼容性 | 原生支持，兼容性更好 | 需要引入第三方库，依赖浏览器支持MSE |
| 适用场景 | 直播回放、非实时性要求场景 | 安防监控、实时性要求高的场景 |
注意事项
- 转流服务需要考虑RTSP流的稳定性，增加断流重连机制，避免服务异常中断。
- 如果部署在公网环境，需要做好WebSocket或者HLS资源的访问权限控制，避免流媒体资源被非法盗用。
- ffmpeg转流时可以根据需求调整编码参数，平衡流的清晰度和带宽占用。