浏览器显示RTSP视频的解决方案调研

最新推荐文章于 2025-05-21 12:17:43 发布

bslayer

最新推荐文章于 2025-05-21 12:17:43 发布

阅读量801

点赞数

CC 4.0 BY-SA版权

文章标签： rtsp html5

本文链接：https://blog.youkuaiyun.com/bslayer/article/details/118341098

本文介绍了如何在浏览器中显示RTSP视频，包括使用ffmpeg将RTSP转为HLS，通过Nginx发布，Video.js播放的方案，以及探讨了WebRTC的解决方案，如webrtc-streamer和Kurento-rtsp2webrtc，推荐使用Kurento-Server + Kurento-rtsp2webrtc方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近期需要在浏览器上显示来自海康威视的RTSP流媒体视频源，本以为是个挺简单的任务，结果调查一圈发现居然无解。

面向旧版浏览器的可行的替代方案有两个：RTSP转RTMP或HLS。其中RTMP需要Flash，现在的技术发展路线下，Flash这种已经被放弃的方案显然不能要，那就只剩一个RTSP->HLS了。

具体一点讲，实践过可行的是这么个路线：
1、ffmpeg : RTSP -> HLS ( m3u8文件 + 若干ts视频缓存文件），实时进行视频转码
2、Nginx 通过 http 发布 m3u8文件
3、Video.js 播放 m3u8，Video.js其实是不断刷m3u8文件，然后去读取对应的ts视频缓存文件
经本人测试 IE11, FF, Chrome, Edge均可，移动端浏览器就更简单了直接读第二步那个m3u8即可。

所以对应的几个主要关键步骤是：

1、ffmpeg的转码
bin\ffmpeg -f rtsp -rtsp_transport tcp -i "rtsp://xxxxxxxx/xxxxx" -strict -2 -c:v libx264 -vsync 2 -c:a aac -f hls -hls_time 4 -hls_list_size 5 -hls_wrap 10 D:/nginx-1.21.0/html/hls/test.m3u8
红色的是视频源和转码后的m3u8文件及对应的缓存文件存储位置（以上设置会产生10个缓存文件）

2、Nginx的设置
http -> server下增加