WebRTC实现rtsp流在浏览器中播放 H5播放

青旅半醒 2023-10-13 20:14 71阅读 0赞

**一般诸如海康威视，大华等监控视频流都是推送的rtsp或rtmp流，这些都是无法在浏览器中直接播放的。因此出现了以下几种方法实现在浏览器端播放。**

**处理该问题的主流方法大概分为以下几种**

PS（由于浏览器的更迭以及Flash不在被支持，所以依赖IE和Flash的方法如使用IE浏览器配合VLC插件，通过video.js配合Flash实现网页播放此处不作介绍）

1.  通过[nginx][]\+ffmpeg+nginx-http-flv-module模块将rtsp流转为flv格式使用flv.js直接播放
2.  通过webrtc-streamer将rtsp转为WebRTC流播放
3.  其他一些插件

**通过WebRTC实现播放**

*  webrtc-streamer插件开源地址：https://github.com/mpromonet/webrtc-streamer
 *  通过git clone命令下载对应系统webrtc
 *  解压后进入文件目录下，通过CMD打开，输入webrtc-streamer.exe -H 0.0.0.0:9001启动服务（可以指定ip地址和端口号，远程访问注意防火墙）
 *  启动成功后可输入以下地址访问页面预览，注意，如果绑定的不是0.0.0.0请输入对应ip
 *      http://127.0.0.1:9001/webrtcstreamer.html?video=你的rtsp流地址
 *  如果无法查看视频（确保rtsp流地址正确的情况下，不确定可以先用vlc访问一下），可能是权限问题，尝试用管理员身份打开CMD
 *  **通过代码实现**
    
        <html>
        <head>
        <script src="js/adapter.min.js" ></script>
        <script src="js/webrtcstreamer.js" ></script>
        <script>
            var webRtcServer= null;
            window.onload= function()  
            webRtcServer= new WebRtcStreamer("video","http://ip地址:9001");
        	webRtcServer.connect("rtsp地址");
            
            window.onbeforeunload = function()  webRtcServer.disconnect(); 
        </script>
        </head>
        <body class="body">
        <video id="video" autoplay muted ></video>
        </body>
        <style>
        .body
          width:100%;
          height:100%;
          padding:0;
          margin:0;
        
        #video
          padding:0;
          width:720px;
          height:400px;
        
        </style>
        </html>
    
    参考技术A配置文件
    
        http_api
        
            enabled        on;
        
            listen          1985;
        
        
        
        stats
        
            network        0;
        
        
        
        rtc_server
        
            enabled        on;
        
            # Listen at udp://8000
        
            listen          8000;
        
            candidate 192.168.8.97;
        
        
        
        vhost __defaultVhost__
        
           rtc
        
                enabled    on;
        
                rtmp_to_rtc on;
        
           
        
        .....
    
    其实webrtc拉流，需要用到两个端口，一个是1985，一个是8000(udp)  
      
    如果在配置文件中1985改成了1986，则  
      
    http://192.168.8.97:8080/players/rtc\_player.html，中拉流地址：webrtc://192.168.8.97:1986/live/stream  
      
    真正的webrtc的流程：  
      
    1)、webrtc客户端通过API接口/rtc/v1/play/通知SRS服务端创建WebRTC拉流连接，访问的是以下 http://192.168.8.97:1986/rtc/v1/play/  
      
    2)、rtc交互过程，在日志中会有记录，  
      
    RTC remote offer: 客户端请求  
      
    RTC local answer: ...... udp 2130706431 192.168.8.97 8000 typ host generation 0\\r\\n  
      
    返回给客户端的具体地址与端口号 (8000就是前面配置的端口)  
      
    特别注意，在docker中配置，在端口映射时，特别要注意，这个8000端口号，一定要与外网的端口号一样。比如同时改成30049，才能正常拉流。
    
    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将会是一个不错的选择，我们也欢迎大家的了解和试用

[nginx]: https://it.cha138.com/nginx/