• 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代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <iframe src="play1.html" style="width:600px;height: 700px;">iframe>
    9. <iframe src="play2.html" style="width:600px;height: 700px;">iframe>
    10. body>
    11. html>

        play1.html代码如下： 

    1. <html>
    2. <head>
    3. <script src="adapter.min.js" >script>
    4. <script src="webrtcstreamer.js" >script>
    5. <script>        
    6.     var webRtcServer= null;
    7.  
    8.     window.onload= function() { 
    9.         webRtcServer= new WebRtcStreamer("video","http://127.0.0.1:8000");
    10. 	   webRtcServer.connect("rtsp://admin:gosunyun888@192.168.0.5:554/h264/ch1/main/av_stream");
    11.     }
    12.     window.onbeforeunload = function() { 
    13.     	webRtcServer.disconnect(); 
    14.  
    15.     }
    16. script>
    17. head>
    18. <h2>高清h2>
    19. <body> 
    20.     <video id="video"  width="500px" height="600px" />
    21. body>
    22. html>

        play2.html代码如下：

    1. <html>
    2. <head>
    3. <script src="adapter.min.js" >script>
    4. <script src="webrtcstreamer.js" >script>
    5. <script>        
    6.     var webRtcServer= null;
    7.     window.onload= function() { 
    8.         webRtcServer= new WebRtcStreamer("video","http://127.0.0.1:8000");
    9. 	    webRtcServer.connect("rtsp://192.168.0.6:554/type=0&id=1");
    10.  
    11.     }
    12.     window.onbeforeunload = function() { 
    13.     	webRtcServer.disconnect();
    14.     }
    15. script>
    16. head>
    17. <body>
    18. <h2>右h2>
    19.     <video id="video"  width="500px" height="600px" />
    20. body>
    21. html>

    四、测试运行

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

  • 相关阅读:
    Linux创建YUM仓库
    【机器学习】034_多层感知机Part.2_从零实现多层感知机
    STM32CubeMX和STM32F4
    P1440 求m区间内的最小值
    KingbaseESV8R6 snapshot too old的配置和测试
    苹果发布iOS 16.1 RC版，大量更新内容【附升级方法】
    ABAP(ALV部分）
    程序设计与实践 课程设计与实习报告
    Nacos的集群、负载均衡、环境隔离
    如何集成验证码短信API到你的应用程序
  • 原文地址：https://blog.csdn.net/qiemengyan/article/details/126138830