首页IT科技web端播放rtsp最优方案(WebRTC实现rtsp流在浏览器中播放)

web端播放rtsp最优方案(WebRTC实现rtsp流在浏览器中播放)

时间2025-05-05 13:37:20分类IT科技浏览6517
导读:一般诸如海康威视,大华等监控视频流都是推送的rtsp或rtmp流,这些都是无法在浏览器中直接播放的。因此出现了以下几种方法实现在浏览器端播放。...

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

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

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

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

通过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>

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
如何定位网站设计的主题?(探究如何让网站设计更加准确地反映主题)