Web网页实现多路播放RTSP视频流（使用WebRTC）

- 日理万妓 2023-10-13 20:18 95阅读 0赞

### 一、环境 ###

windows 10 操作系统

webrtc-streamer-v0.7.0-dirty-Windows-AMD64-Release.tar.gz

### 二、启动服务端 ###

解压下载好的webrtc-streamer-v0.7.0-dirty-Windows-AMD64-Release.tar.gz文件，打开文件，到webrtc-streamer.exe文件所在目录下，在地址栏输入cmd，然后命令行输入：webrtc-streamer.exe，回车。如下所示：![b78988d7a32a45f7943491917d49656b.png][]

启动成功后，如下所示：![5a2a4d8378ad4dcd92c58d88be93d536.png][]

### 三、编写客户端 ###

首先，新建一个新的文件夹，然后将webrtc-streamer-v0.7.0-dirty-Windows-AMD64-Release\\html\\libs 目录下的adapter.min.js文件、jquery-3.5.1.min.js文件和webrtc-streamer-v0.7.0-dirty-Windows-AMD64-Release\\html 目录下webrtcstreamer.js文件拷贝到新的文件夹下。

然后在新的文件夹下新建play1.html、play2.html和index.html。play1.html和play2.html分别加载两路不同的rtsp视频流。如果只有一路rtsp视频流，可忽略play2.html。

整个目录结构如下图所示：

index.html代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <iframe src="play1.html" style="width:600px;height: 700px;"></iframe>
    <iframe src="play2.html" style="width:600px;height: 700px;"></iframe>
    </body>
    </html>

play1.html代码如下：

<html>
    <head>
    <script src="adapter.min.js" ></script>
    <script src="webrtcstreamer.js" ></script>
    <script>        
        var webRtcServer= null;
    
        window.onload= function() { 
            webRtcServer= new WebRtcStreamer("video","http://127.0.0.1:8000");
    	   webRtcServer.connect("rtsp://admin:gosunyun888@192.168.0.5:554/h264/ch1/main/av_stream");
        }
        window.onbeforeunload = function() { 
        	webRtcServer.disconnect(); 
    
        }
    </script>
    </head>
    <h2>高清</h2>
    <body> 
        <video id="video"  width="500px" height="600px" />
    </body>
    </html>

play2.html代码如下：

<html>
    <head>
    <script src="adapter.min.js" ></script>
    <script src="webrtcstreamer.js" ></script>
    <script>        
        var webRtcServer= null;
        window.onload= function() { 
            webRtcServer= new WebRtcStreamer("video","http://127.0.0.1:8000");
    	    webRtcServer.connect("rtsp://192.168.0.6:554/type=0&id=1");
    
        }
        window.onbeforeunload = function() { 
        	webRtcServer.disconnect();
        }
    </script>
    </head>
    <body>
    <h2>右</h2>
        <video id="video"  width="500px" height="600px" />
    </body>
    </html>

### 四、测试运行 ###

浏览器打开index.html。即可进行视频预览。

Liveweb是好游科技自主开发的网页播放器，支持 RTSP、RTMP、HTTP、HLS、UDP、RTP、File 等多种流媒体协议播放，同时也有多种显示方式 (GDI,D3D) 及格式 (RGB24,YV12,YUY2,RGB565)，经过 7x24 小时连续拷机测试，能够很好的处理断连.

iveweb是可支持H.264/H.265视频播放的流媒体播放器，性能稳定、播放流畅，可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等，具备较高的可用性。liveweb还拥有Windows、Android、iOS版本，其灵活的视频能力，极大满足了用户的多样化场景需求。

liveweb具备较强的灵活性，在视频直播过程中liveweb可通过H5进行视频解码，只要客户端支持H5，就能完美进行视频的无插件直播，同时还支持大码率视频直播，并可支持H.264、H.265两种编码格式。如果大家正在找寻一款供能强大的流媒体播放器，那么liveweb将会是一个不错的选择，我们也欢迎大家的了解和试用

[b78988d7a32a45f7943491917d49656b.png]: https://img-blog.csdnimg.cn/b78988d7a32a45f7943491917d49656b.png
[5a2a4d8378ad4dcd92c58d88be93d536.png]: https://img-blog.csdnimg.cn/5a2a4d8378ad4dcd92c58d88be93d536.png