一、安装控件
1、安装控件：海康web3.0开发包\demo\codebase\WebComponentsKit.exe，双击安装。
2、成功加载控件之后开始测试网络监控是否可用：打开海康web3.0开发包\demo\cn\demo.html，如果加载失败会有弹窗提示（请看第3条），没有提示则表示加载成功。
3、请使用64位IE浏览器，IE10以上请点击 启动64位IE.reg，IE9及以下请进入C:\Program Files\Internet Explorer启动。（如果还是无法加载控件请看第4条）
4、浏览器--工具--internet选项--安全--internet--自定义级别，将ActiveX控件和插件有关的项目全部点击启用！（如果还是无法加载控件请将控件卸载，并仔逐字阅读将步骤再来一次，成功为止！）
成功后如下：
完成后截图如下：
走到这一步就证明监控和控件都可行，接下来就简单了，看API写代码，都是你们的强项了，就不细说了，附上我个人的代码以供大家参考。
<!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;
}
</style>
<body>
<div>
<div id="divPlugin" class="plugin"></div>
</div>
</body>
<script src="jquery-1.7.1.min.js"></script><script src="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.1.64", // protocol ip
szPort: "80", // protocol port
szUsername: "admin", // device username
szPassword: "haikang01", // 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();
});
});
</script>
</html>