标签：function 控件 插件 WEB3.0 威视 云台 oLiveView WebVideoCtrl var
使用海康威视WEB3.0控件开发包 对接摄像头
1.海康威视官网下载SDK
下载链接:
https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10&id=4c945d18fa5f49638ce517ec32e24e24
解压 CH_WEB3.0控件开发包V1.1.0_Win32
找到codebase目录下的 WebComponentsKit.exe 双击安装
运行环境:IE11 vscode （3.0控件支支持低版本谷歌 、火狐）
参考博客:https://blog.csdn.net/lucius93/article/details/75308165/
通过服务器运行demo.html这个文件
如果出现以下错误 （浏览器版本过高 不支持登录，可通过ie进行查看）
输入摄像头ip 端口号 用户名 和密码等 点击开始预览可看到实时画面
连接完成后即可操作云台
目前以实现 单页面控制云台摄像头(有兴趣可以查看)
<!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" />
</head>
<style>
.plugin {
width: 600px;
height: 400px;
}
.plugin2 {
width: 600px;
height: 400px;
position: relative;
left: 400px;
}
</style>
<body>
<div>
<div id="divPlugin" class="plugin"></div>
<table cellpadding="0" cellspacing="3" border="0" class="left">
<tr>
<td>
<input type="button" class="btn" value="左上" onm ousedown="mouseDownPTZControl(5);" onm ouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="上" onm ousedown="mouseDownPTZControl(1);" onm ouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="右上" onm ousedown="mouseDownPTZControl(7);" onm ouseup="mouseUpPTZControl();" />
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" value="左" onm ousedown="mouseDownPTZControl(3);" onm ouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="自动" onclick="mouseDownPTZControl(9);" />
<input type="button" class="btn" value="右" onm ousedown="mouseDownPTZControl(4);" onm ouseup="mouseUpPTZControl();" />
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" value="左下" onm ousedown="mouseDownPTZControl(6);" onm ouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="下" onm ousedown="mouseDownPTZControl(2);" onm ouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="右下" onm ousedown="mouseDownPTZControl(8);" onm ouseup="mouseUpPTZControl();" />
</td>
</tr>
</table>
</div>
</body>
<script src="../jquery-1.7.1.min.js"></script>
<script src="../codebase/webVideoCtrl.js"></script>
<script>
$(function () {
// 检查插件是否已经安装过
var iRet = WebVideoCtrl.I_CheckPluginInstall();
if (-1 == iRet) {
alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
return;
}
var oPlugin = {
iWidth: 600, // plugin width
iHeight: 400 // plugin height
};
var oLiveView = {
iProtocol: 1, // protocol 1：http, 2:https
szIP: "192.168.31.64", // protocol ip
szPort: "80", // protocol port
szUsername: "admin", // device username
szPassword: "xxxxxxx", // device password
iStreamType: 1, // stream 1：main stream 2：sub-stream 3：third stream 4：transcode stream
iChannelID: 1, // channel no
bZeroChannel: false // zero channel
};
// 初始化插件参数及插入插件
WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, {
bWndFull: true,//是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
iWndowType: 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) {
// 开始预览
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
setTimeout(function () {
WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
iStreamType: oLiveView.iStreamType,
iChannelID: oLiveView.iChannelID,
bZeroChannel: oLiveView.bZeroChannel
});
}, 1000);
}
});
}
});
// 关闭浏览器
$(window).unload(function () {
WebVideoCtrl.I_Stop();
});
});
var g_iWndIndex = 0;
// PTZ控制 9为自动，1,2,3,4,5,6,7,8为方向PTZ
var g_bPTZAuto = false;
function mouseDownPTZControl(iPTZIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
iPTZSpeed = 5; //设置云台速度
if (oWndInfo != null) {
if (9 == iPTZIndex && g_bPTZAuto) {
iPTZSpeed = 0;// 自动开启后，速度置为0可以关闭自动
} else {
g_bPTZAuto = false;// 点击其他方向，自动肯定会被关闭
}
WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
iPTZSpeed: iPTZSpeed,
success: function (xmlDoc) {
if (9 == iPTZIndex && g_bPTZAuto) {
console.log("停止云台成功！")
} else {
console.log("开启云台成功！")
}
if (9 == iPTZIndex) {
g_bPTZAuto = !g_bPTZAuto;
}
},
error: function (status, xmlDoc) {
console.log("开启云台失败！");
}
});
}
}
// 方向PTZ停止
function mouseUpPTZControl() {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PTZControl(1, true, {
success: function (xmlDoc) {
console.log("停止云台成功！")
},
error: function (status, xmlDoc) {
console.log("停止云台失败！")
}
});
}
}
</script>
</html>
标签：function,控件,插件,WEB3.0,威视,云台,oLiveView,WebVideoCtrl,var 来源： https://blog.csdn.net/qq_36079837/article/details/118526675
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。