java web调用海康威视摄像头

最近项目涉及到海康摄像头业务，在web页展示摄像头实时监控，在网上找了好多例子，没有找到一个合适我业务的文章，在这里记录一下我的实现方式。

我的业务场景比较简单，就是在页面展示多路摄像头，其他的功能没有用到。
二次开发之前需要干这几件事
1. 先下载海康的开发包，然后安装WebComponentsKit.exe
  一定要选择合适的浏览器版本，要不然非常坑
2. 在合适的浏览器中打开demo.html,看到如下图片

3. 登录一下看看，是不是能看到摄像头的画面，如果可以的话，那就可以二次开发了，如果看不到的话，自己找问题吧，我是一次成功的。
4.将开发包js文件和css文件导入工程，接下来就上代码

var oPlugin = {iWidth: 700,iHeight: 550
};var oLiveView = {iProtocol: 1, // 协议 1：http, 2:httpsszIP: "", // ipszPort: "", //  portszUsername: "", //  usernameszPassword: "", //  passwordiStreamType: 2, // stream 1：main stream  2：sub-stream  3：third stream  4：transcode streambZeroChannel: false,
};
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
var g_iWndIndex = 0;$(function () {//检查插件是否已经安装过var iRet = WebVideoCtrl.I_CheckPluginInstall();if (-1 == iRet) {alert("您还未安装过插件，双击开发包目录里的WebComponents.exe安装！");return;}// 初始化插件参数及插入插件WebVideoCtrl.I_Logout(szDeviceIdentify); //登出WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, {bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持iWndowType: 3,cbSelWnd: function (xmlDoc) {g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);getChannelInfo(g_iWndIndex + 1)},cbInitPluginComplete: function () {WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");// 检查插件是否最新if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！");return;}// 登录设备WebVideoCtrl.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort,oLiveView.szUsername, oLiveView.szPassword, {success: function (xmlDoc) {// 开始预览setTimeout(function () {WebVideoCtrl.I_Stop();WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {iStreamType: oLiveView.iStreamType,iChannelID: oLiveView.iChannelID,bZeroChannel: oLiveView.bZeroChannel,iWndIndex: g_iWndIndex});for (let i = 1; i < 9; i++) {WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {iStreamType: oLiveView.iStreamType,iChannelID: i+1,bZeroChannel: oLiveView.bZeroChannel,iWndIndex: i});}}, 200);}});}});function getChannelInfo(channelID) {var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);var startRealPlay = function (channelID) {WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {iStreamType: oLiveView.iStreamType,iChannelID: channelID,bZeroChannel: oLiveView.bZeroChannel,iWndIndex: g_iWndIndex,success: function () {},error: function (status, xmlDoc) {}});};if (oWndInfo != null) { // 已经在播放了，先停止WebVideoCtrl.I_Stop({success: function () {startRealPlay(channelID);}});} else {startRealPlay(channelID);}}
});

我是按后端的逻辑来实现的，一点一点调试的，我把获取数字通道去掉了，我的摄像头个数是固定的，所以我让窗口index强制和通道绑定，这种干不知道对不对，但是我实现我想要的效果了，仅供参考！！

下面是heml代码

<!doctype html>
<html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Cache-Control" content="no-cache, must-revalidate" /><meta http-equiv="Expires" content="0" /><style type="text/css">#channels{float: left; cursor: pointer; margin-left:150px;}#divPlugin{float: left; cursor: pointer; margin-left:250px;}</style><script src="/codebase/webVideoCtrl.js" type="text/javascript"></script>
</head>
<body><div><ul id="channels"></ul><div id="divPlugin" class="plugin"></div></div>
</body>
<script src="jquery-1.7.1.min.js"></script>
<script id="videonode" src="./codebase/webVideoCtrl.js"></script>
<script src="demo.js"></script>
</html>

我这种写法和官方给的文档中有很大不同，我是一个后端，js忘得差不多了，也没有其他好的办法了，就这么修改了，不喜勿喷。

java web调用海康威视摄像头相关推荐

java开发调用海康威视摄像头的web端页面开发心得
最近在开发过程中需要用到海康威视的摄像头在web端展示在各种百度之后发现网上很难找到一个简便,可靠的教程在摸索着完成项目之后 ,决定写一篇攻略造福有需求的小伙伴言归正传首先需 ...
java web 整合海康威视录像机摄像 SDK
java 项目 demo 目录结构 java web 整合海康威视录像机摄像 SDK 实现拍照功能. 一.maven 项目结构 [提示]主要的是 HCNetSDK.java 文件,其中都是海康 jav ...
WIN10下OpenCV3.4.10安装+opencv-python调用海康威视摄像头
1.WIN10下OpenCV3.4.10安装: 参考(直接看参考的这两篇博客就好): https://blog.csdn.net/flushest/article/details/89746971(参 ...
java WEB调用秒嘀科技短信验证接口（实现短信验证登录）
java WEB调用秒嘀科技短信验证接口(实现短信验证登录) 前言注册秒嘀云账号登录秒嘀云官网代码前言短信验证登咱就不多说了,为什么推荐用秒嘀的呢,应为他会送你10元钱,对于新手来说10元钱 ...
java实现调用本地摄像头并实现抓拍图片功能
上一篇讲了调用本地摄像头的方法,这一篇在上一篇的基础上再实现抓拍图片并保存至本地! OpenCVFrameGrabber grabber = new OpenCVFrameGrabber(0);//0 ...
Linux系统下使用java语言调用海康威视SDK连接摄像头过程记录
1.准备工作 1.1. 设备型号萤石多功能互联网摄像头 CS-C2C-3B2WFR 1.2. SDK下载通过海康威视官网可以下载到最新的Linux下的SDK开发包,分为32位和64位,根据电脑情况 ...
java SpringBoot调用海康威视的dll去完成摄像头抓拍，以及打包部署问题
先说开发: 直接将他的64位包中的依赖放到项目根路径里面,然后将他java demo中的HCNetSDK.java复制到自己项目中.自己去他官网下载,或者用我的分享链接下载: https://down ...
java web 调用hadoop_Java及Web程序调用hadoop2.6
1. hadoop集群: 1.1 系统及硬件配置: hadoop版本:2.6 :三台虚拟机:node101(192.168.0.101).node102(192.168.0.102).node103( ...
java web调用exe文件_从网页WEB上调用本地应用程序（java）
自己写了个java的桌面程序,想通过web页面调用直接打开登录页面,传账号和密码两个参数. 在网上看了很多资料,大多处理方法是自定义个协议然后通过协议来打开本地exe文件,但是这样传的参数怎么解析? ...
matlab调用海康威视摄像头_招聘|海康威视招聘一批算法、图像等AI工程师
原标题:招聘|海康威视招聘一批算法.图像等AI工程师全球人工智能文章参考:海康威视算法工程师工作地点:杭州薪资:18-35k 经验:不限学历:硕士及以上职位描述: 1. 负责公司视觉最新视 ...

java web调用海康威视摄像头

java web调用海康威视摄像头相关推荐

最新文章

热门文章