浏览器播放rtsp流媒体解决方案

﹏ヽ暗。殇╰゛Y 2023-10-13 12:39 19阅读 0赞

需要在浏览器上播放监控视频。获取了RTSP协议传输的视频流，而浏览器并不能直接播放RTSP流。

解决方案主要是两种，一种是服务端转流，另一种安装播放插件。

### **1、流媒体概念** ###

传统的网络传输音视频等多媒体信息的方式是完全下载后再播放，下载常常要花数分钟甚至数小时。而采用流媒体技术，就可实现流式传输，将声音、影像或动画由服务器向用户计算机进行连续、不间断传送，用户不必等到整个文件全部下载完毕，而只需经过几秒或十几秒的启动延时即可进行观看。当声音视频等在用户的机器上播放时，文件的剩余部分还会从服务器上继续下载。常用的流媒体协议主要有HTTP渐进下载和基于RTSP/RTP的实时流媒体协议两类。在流式传输的实现方案中，一般采用HTTP/TCP来传输控制信息，而用RTP/UDP来传输实时多媒体数据。

### **2、RTMP、RTSP、HTTP协议** ###

这三个协议都属于互联网 TCP/IP 五层体系结构中应用层的协议。理论上这三种都可以用来做视频直播或点播。但通常来说，直播一般用 RTMP、RTSP。而点播用 HTTP。下面分别介绍下三者的特点。

### **2.1 RTMP协议** ###

（1）是流媒体协议。

（2）RTMP协议是 Adobe 的私有协议，未完全公开。

（3）RTMP协议一般传输的是 flv，f4v 格式流。

（4）RTMP一般在 TCP 1个通道上传输命令和数据。

### **2.2 RTSP协议** ###

（1）是流媒体协议。

（2）RTSP协议是共有协议，并有专门机构做维护。.

（3）RTSP协议一般传输的是 ts、mp4 格式的流。

（4）RTSP传输一般需要 2-3 个通道，命令和数据通道分离。

### **2.3 HTTP协议** ###

（1）不是是流媒体协议。

（2）HTTP协议是共有协议，并有专门机构做维护。

（3）HTTP协议没有特定的传输流。

（4）HTTP传输一般需要 2-3 个通道，命令和数据通道分离。

### **3、RTSP网络层** ###

### **3.1 RTSP与传输层的关系** ###

RTP是基于 UDP协议的， UDP不用建立连接，效率更高；但允许丢包， 这就要求在重新组装媒体的时候多做些工作 RTP只是包裹内容信息，而RTCP是交换控制信息的，Qos是通过RTCP实现的 应用程序对应的是play, seek, pause, stop等命令，RTSP则是处理这些命令，在UDP传输时并使用RTP(RTCP)来完成。如果是TCP连接则不会使用RTP(RTCP)。![a1e0c1a6e2634570be6462227ec94b1d.webp][]

3.2 传输过程

RTSP组合使用了可靠传输协议TCP（控制）和高效传输协议UDP（内容）来串流（streaming）内容给用户。它支持点播（Video-On-Demand）以及直播（Live Streaming）服务。RTSP协议本身并不负责数据传输，**通常（非必须）**是通过RTP（Real-time Transport Protocol）配合RTCP（Real-time Control Protocol）完成数据流和控制命令（同步、QOS管理等）的传输。具体应用中，三者的关系如下图所示：

![format_png][]

### **4、RTSP怎么播放** ###

### **4.1 服务端转流** ###

我们就需要一层中间层，来将 RTSP 流转成前端可以支持的协议，这也引申出了目前实时流技术的几种方向

*  RTSP -> RTMP
 *  RTSP -> HLS
 *  RTSP -> RTMP -> HTTP-FLV

![6cfa91af0ffcf83d2c6ea8f3cd35718f.png][]

### **4.2 插件** ###

以VLC插件为例：

1）安装vlc播放器或vlc的插件

http://download.videolan.org/vlc/2.2.4/win64/vlc-2.2.4-win64.7z

2）前端代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>video</title>
    </head>
    <body>
    <object type='application/x-vlc-plugin' id='vlc' events='True' width="800" height="600" pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.2.2/npapi-vlc-2.2.2.tar.xz">
        <param name='mrl' value='rtsp://221.224.224.38:554/011245010505570801.sdp' />
        <param name='volume' value='50' />
        <param name='autoplay' value='true' />
        <param name='loop' value='false' />
        <param name='fullscreen' value='true' />
    </object>
    </body>
    </html>

### 6.使用live web播放器，该播放器由好游科技开发，无插件，低延时功能齐全。 ###

### **5、 总结** ###

*  服务端转流会增加服务端的压力
 *  vlc插件不支持高版本的谷歌内核浏览器

[a1e0c1a6e2634570be6462227ec94b1d.webp]: https://img-blog.csdnimg.cn/a1e0c1a6e2634570be6462227ec94b1d.webp
[format_png]: https://img-blog.csdnimg.cn/img_convert/7b09c9833cf4f0239044b6715454639a.webp?x-oss-process=image/format,png
[6cfa91af0ffcf83d2c6ea8f3cd35718f.png]: https://img-blog.csdnimg.cn/img_convert/6cfa91af0ffcf83d2c6ea8f3cd35718f.png