实现在浏览器实时播放海康威视监控画面

由于海康威视的rtsp协议地址无法直接在浏览器播放，所以据我所知能通过以下几种方式：

1、使用海康威视官网插件，或无插件版

海康开放平台

2、使用萤石云平台，把rtsp转化成ezopen协议，然后使用组件UIKit

最佳实践 · 萤石开放平台API文档

UIKit Javascript · 萤石开放平台API文档

文档概述 · 萤石开放平台API文档

3、webrtc实现，使用webrtc-streamer，下面讲的是这个方式

通过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
vlc官网地址：VLC: Official site - Free multimedia solutions for all OS! - VideoLAN
点击打开网路串流里的网络输入rtsp地址
如：rtsp://admin:00000@111.111.111.11:554/h264/ch1/main/av_stream
局域网访问111.111.111.11是内网地址，554是内网端口
想要外网访问得先路由把内网地址映射出来，注意，映射的时候，端口是rtsp的端口，不要搞成http的

<html>
<head></head>
<body> <div style="width: 200px;height: 150px;position: absolute;left: 0;"><video id="video1" muted autoplay>    </div><div style="width: 200px;height: 150px;position: absolute;right: 0;"><video id="video2" muted autoplay></div>
</body>
<script src="adapter.min.js" ></script>
<script src="webrtcstreamer.js" ></script>
<script>        var webRtcServer      = null;var server="http://127.0.0.1:8000"//运行webrtc-streamer.exe的地址跟端口window.onload         = function() { webRtcServer1      = new WebRtcStreamer("video1",server);webRtcServer2      = new WebRtcStreamer("video2",server);webRtcServer1.connect("rtsp://海康后台账号:密码@外网地址:rtsp外网端口/h264/ch1/main/av_stream",null,'rtptransport=tcp');webRtcServer2.connect("rtsp://admin:123456@外网地址:rtsp外网端口/h264/ch1/main/av_stream",null,'rtptransport=tcp');}window.onbeforeunload = function() { webRtcServer1.disconnect(); //关闭网页前断连，不然会一直占CPUwebRtcServer2.disconnect();}
</script>
</html>

adapter.min.js在下载webrtc-streamer后文件夹的\html\libs下

webrtcstreamer.js在下载webrtc-streamer后文件夹的\html下

这里注意：webRtcServer.connect(url,null,option);

option是rtptransport=tcp，这个不能缺少，如果webRtcServer.connect(url)不会显示出监控画面！！

实现在浏览器实时播放海康威视监控画面相关推荐

海康视频VTM流监控浏览器实时播放调试总结
海康视频VTM流播放调试总结 VTM视频demo调用部分代码配置好地址账号密码后即可进行浏览器实时调用demo实现网域ip可在vtm服务配置中获取设备编码需注意: 设备编码取此处编码设备编号,可 ...
采集rtsp流摄像头到浏览器实时播放方案
本文旨在实现使用摄像头采集视频,并且可以在网页实时显示,主要参考的两篇博文为: 1. 视频实时显示的三种方案 2. 使用WebSockets进行HTML5视频直播我们使用博文1介绍的第 ...
VUE网页播放海康威视监控视频，支持抓图、录像、回放、字幕、倍速、水印
VUE网页播放海康威视RTSP视频流,支持字幕.抓图.录像.水印等
如何在VUE框架的WEB端实时播放海康威视、大华RTSP视频流？
背景如果你问一个前端技术人员,近几年最火的前端框架技术是什么,肯定会有人说VUE,确实VUE凭借其简单特性赢得了大家的喜爱,而近期公司有个项目,需要在VUE框架网页上播放RTSP实时视频. 小编对目 ...
谷歌浏览器播放海康威视监控
1:下载ffmpeg 官网:http://ffmpeg.org/ 解压后,电脑右键属"属性"选择"高级系统属性"下在"环境变量"中的[PAT ...
ffmpeg推流实现实时播放监控画面（rtsp to rtmp）
ffmpeg推流实现实时播放监控画面(windows) 1.提前准备:下载好nginx (官网下载即可) 下载好ffmpeg (windows版本点击下载 http://ffmpeg.zeranoe. ...
HMI实时显示网络摄像机监控画面——以海康威视网络摄像机为例
随着IOT技术的快速发展,网络摄像机快速应用于工业领域,结合其他智能设备建立一个智能系统,提高用户与机器设备之间的交互体验,帮助企业优化人员配置. 作为重要的可视化设备,HMI不仅可以采集现场设备数据 ...
用机顶盒或网络电视机实现监控摄像头预览，完成简单的录相机功能，用机顶盒远程观看摄像头，多个监控可以同时观看，实时观看，也可以用机顶盒或网络电视观看局域网内的监控画面
用机顶盒或网络电视机实现监控摄像头预览,完成简单的录相机功能,用机顶盒远程观看摄像头,多个监控可以同时观看,实时观看,也可以用机顶盒或网络电视观看局域网内的监控画面准备: 1.需要知道监控摄像头的 ...
如何实现web浏览器无插件播放视频监控直播？
很多年前,监控视频的直播只能够进行单一的服务器传输,而如今,很多网站已经可以观看视频直播了,不过大多网站观看视频直播的时候还是需要下载插件,有时候就会碰到系统不兼容.版本不对应等问题,那么能不能实现w ...
java ajax轮询代码_AJAX轮询的实时监控画面
上一篇我们通过异步刷新Ajax 技术,来实现监控页面监控位号值的刷新,采用Ajax (AsynchronousJavascriptAndXML)技术,是指一种创建交互式.快速动态网页应用的网页开发技术 ...

实现在浏览器实时播放海康威视监控画面

实现在浏览器实时播放海康威视监控画面相关推荐

最新文章

热门文章