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

一般诸如海康威视,大华等监控视频流都是推送的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>
    

    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将会是一个不错的选择,我们也欢迎大家的了解和试用
     

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值