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

废话不多说，直接上解决办法！！！

一、环境

二、启动服务端

三、编写客户端

四、测试运行

一、环境

windows 10 操作系统

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

（下载地址：https://github.com/mpromonet/webrtc-streamer）

二、启动服务端

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

启动成功后，如下所示：

三、编写客户端

如果不想自己编写的，直接下载我的demo即可。

下载地址：https://download.csdn.net/download/qiemengyan/86286352

首先，新建一个新的文件夹，然后将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代码如下：


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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。即可进行视频预览。

相关阅读:
Sweet Snippet 之计算 MaxSortedDistance
自己编写神经网络
深度学习入门（十六）实战Kaggle比赛：预测房价
webservice初探
无需添加udid，ios企业证书的自助生成方法
MTU与TCP-MSS
【Java项目】我是如何实现抢红包功能的？
网络工程师进阶课：华为HCIP认证课程介绍
企业工程项目管理系统源码（三控：进度组织、质量安全、预算资金成本、二平台：招采、设计管理）
zipfile教程

原文地址：https://blog.csdn.net/qiemengyan/article/details/126138830