java web调用海康威视摄像头
最近项目涉及到海康摄像头业务，在web页展示摄像头实时监控，在网上找了好多例子，没有找到一个合适我业务的文章，在这里记录一下我的实现方式。
- 我的业务场景比较简单，就是在页面展示多路摄像头，其他的功能没有用到。
- 二次开发之前需要干这几件事
- 先下载海康的开发包，然后安装WebComponentsKit.exe
一定要选择合适的浏览器版本，要不然非常坑 - 在合适的浏览器中打开demo.html,看到如下图片
- 先下载海康的开发包，然后安装WebComponentsKit.exe
3. 登录一下看看，是不是能看到摄像头的画面，如果可以的 话，那就可以二次开发了，如果看不到的话，自己找问题吧，我是一次成功的。
4.将开发包js文件和css文件导入工程，接下来就上代码
var oPlugin = {
iWidth: 700,
iHeight: 550
};
var oLiveView = {
iProtocol: 1, // 协议 1：http, 2:https
szIP: "", // ip
szPort: "", // port
szUsername: "", // username
szPassword: "", // password
iStreamType: 2, // stream 1：main stream 2：sub-stream 3：third stream 4：transcode stream
bZeroChannel: 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代码
<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忘得差不多了，也没有其他好的办法了，就这么修改了，不喜勿喷。