一般诸如海康威视，大华等监控视频流都是推送的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>
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。