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

LiveWeb视频管理平台

于 2023-07-19 15:34:41 发布

阅读量2.4k

点赞数

文章标签： webrtc H5播放器网页播放器 liveweb播放器前端

本文链接：https://blog.csdn.net/xiehuanbin/article/details/131810121

版权

一、环境

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，回车。如下所示：

启动成功后，如下所示：

三、编写客户端

首先，新建一个新的文件夹，然后将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将会是一个不错的选择，我们也欢迎大家的了解和试用

LiveWeb视频管理平台

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Web网页实现多路播放RTSP视频流（使用WebRTC）

liveweb具备较强的灵活性，在视频直播过程中liveweb可通过H5进行视频解码，只要客户端支持H5，就能完美进行视频的无插件直播，同时还支持大码率视频直播，并可支持H.264、H.265两种编码格式。
复制链接

扫一扫