几种浏览器播放RTSP视频流解决方案

待我称王封你为后i 2023-10-13 12:39 29阅读 0赞

*   *  [概述][Link 1]
     *  [方案][Link 2]
        
         *  [1.H5 + websocket\_rtsp\_proxy 实现视频流][1.H5 _ websocket_rtsp_proxy]
         *  [2. RTSP转RTMP，转http-flv，播放端用flv.js播放][2. RTSP_RTMP_http-flv_flv.js]
         *  [3. RTSP转RTMP，转hls，播放端用video.js播放][3. RTSP_RTMP_hls_video.js]
         *  [4.VLC或者liveweb播放][4.VLC_liveweb]
         *  [5.RTSP转WebRTC播放][5.RTSP_WebRTC]

> [参考][Link 3]

### 概述 ###

### 方案 ###

#### 1.H5 + websocket\_rtsp\_proxy 实现视频流 ####

Streamedian 提供了一种`html5_rtsp_player` \+ `websock_rtsp_proxy`的技术方案，可以通过html5的video标签直接播放RTSP的视频流。![26afd2f0c5e24cc98456ef6fea5da1d8.png][]

#### 2. RTSP转RTMP，转http-flv，播放端用flv.js播放 ####

flv.js在获取到FLV格式的音视频数据后将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，再通过Media Source Extensions API 传递给原生HTML5 Video标签进行播放。

flv.js 是使用 ECMAScript 6 编写的，然后通过 Babel Compiler 编译成 ECMAScript 5，使用 Browserify 打包。

flv.js 从服务器获取FLV再解封装后转给Video标签的原因如下：

*  兼容目前的直播方案：目前大多数直播方案的音视频服务都是采用FLV容器格式传输音视频数据。
 *  flv格式简单，相比于MP4格式转封装简单、性能上也占优势，解析起来更快更方便。

#### 3. RTSP转RTMP，转hls，播放端用video.js播放 ####

Video.js是一款web视频播放器，支持html5和flash两种播放方式。更有自定义皮肤，插件，组件，语言还有丰富的选项配置。

#### 4.VLC或者liveweb播放 ####

VLC不再多说，几乎做流媒体的开发者都知道，liveweb是好游播放器，延迟和功能体验更好。

#### 5.RTSP转WebRTC播放 ####

浏览器对webrtc的支持良好，特别是在H264编码方面几个主流的浏览器都已经支持了。webrtc使用SRTP进行媒体数据的传输，那么我们只需要将RTp中的负载数据通过webrtc通道发送给浏览器，而浏览器端只需要通过video标签播放即可，目前RTSP转WebRTC对浏览器的适配比较好，延迟也比较低。

[Link 1]: http://static.kancloud.cn/idcpj/python/3060295#_4
[Link 2]: http://static.kancloud.cn/idcpj/python/3060295#_6
[1.H5 _ websocket_rtsp_proxy]: http://static.kancloud.cn/idcpj/python/3060295#1H5__websocket_rtsp_proxy__7
[2. RTSP_RTMP_http-flv_flv.js]: http://static.kancloud.cn/idcpj/python/3060295#2_RTSPRTMPhttpflvflvjs_13
[3. RTSP_RTMP_hls_video.js]: http://static.kancloud.cn/idcpj/python/3060295#3_RTSPRTMPhlsvideojs_24
[4.VLC_liveweb]: http://static.kancloud.cn/idcpj/python/3060295#4VLCSmartPlayer_30
[5.RTSP_WebRTC]: http://static.kancloud.cn/idcpj/python/3060295#5RTSPWebRTC_36
[Link 3]: https://cloud.tencent.com/developer/article/1805057
[26afd2f0c5e24cc98456ef6fea5da1d8.png]: https://img-blog.csdnimg.cn/26afd2f0c5e24cc98456ef6fea5da1d8.png