前言
最近今天在做一个监控系统，需要嵌入海康的SDK。之前做这块的人已经走了，无奈只能从头开始。然而，去下载了海康的SDK使用文档，真的是想死的心都有了，看一遍完全没啥感觉。问了一下度娘，看到很多骗阅读量的无用分享，于是决定记录分享一下自己的成功调用，废话不多说，开始上干货。
1. 引入js文件
与其他分享一样，先把海康的三个js文件引入到根html文件，楼主做的是VUE项目，所以放在了public文件夹下的index.html中。
<script src="jquery-1.12.4.min.js"></script>
<script src="jsencrypt.min.js"></script> // 用于 RSA 公钥加密
<script src="jsWebControl-1.0.0.min.js"></script> // 用于前端与插件交互
2. 安装海康SDK插件
安装海康插件：WebBrowser-Plugin，可以自己去海康平台下载，友情链接，配套资料里一般也会带。然后写好视频显示的div:
<div class="video-player" style="positive:relative;">
<div id="playWinPlugin" class="playWinPlugin" ref="playWinPlugin" v-if="plugin"></div>
</div>
3. 插件调用初始化
插件初始化，按照官方文档，**照猫画虎！**具体初始化参数可以根据自己的需要进行设定，比如初始化后的布局模式layout，这里是需要1x1，可以自行设置（可设值见官方文档说明）。
注意：别忘了对
secret进行加密处理，这个是必须做的，其他的ip、appkey什么的，就看个人需要了。
// 插件初始化
initPlugin () {
let _this = this
this.oWebControl = new WebControl({
szPluginContainer: "playWinPlugin", // 要绑定容器的id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909, // 用于 IE10 使用 ActiveX 的 clsid
cbConnectSuccess: (e) => {
this.plugin=true;
// _this.setCallbacks();
if(_this.oWebControl){
_this.oWebControl.JS_StartService("window", {
dllPath: "./VideoPluginConnect.dll"
}).then((res) => {
_this.oWebControl.JS_CreateWnd("playWinPlugin",_this.videoWidth,_this.videoHeight).then(() => {
console.log("JS_CreateWnd success");
_this.initVideo();
});
}, function () {
});
}else{
console.log("_this.oWebControl调用失败")
}
},
cbConnectError: () => {
//console.log("cbConnectError");
_this.oWebControl = null;
$("#playWinPlugin").html("插件未启动，正在尝试启动，请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://");
_this.initCount ++;
if (_this.initCount < 3) {
setTimeout(() => {
_this.initPlugin();
}, 3000)
} else {
$("#playWinPlugin").html("插件启动失败，请检查插件是否安装！");
this.plugin=false;
}
},
cbConnectClose: () => {
// 异常断开：bNormalClose = false 正常断开：bNormalClose = true
console.log("JS_Disconnect正常断开：bNormalClose=true cbConnectClose:");
this.oWebControl.JS_Disconnect().then(function(){
}, function() {
});
this.oWebControl = null;
}
});
},
// RSA加密
setEncrypt (value) {
let encrypt = new JSEncrypt();
encrypt.setPublicKey(this.pubKey);
return encrypt.encrypt(value);
},
// 初始化参数
initVideo () {
this.getPubKey(() =>{
// 进行字段加密 sccret固定加密
let secret = this.setEncrypt(this.video_init_data.secret)
let config = {
appkey: "海康平台提供的appkey，必填",
secret: "海康平台提供的secret，必填", //
ip: "你自己的平台Ip" , //
playMode: 0, // 根据配置决定初始化播放还是回放，0：播放，1:回放
port: 443, //启用HTTPS协议，默认443
snapDir: "D:\\SnapDir", //抓图存储路径
videoDir: "D:\\VideoDir", //紧急录像或录像剪辑存储路径
layout: "1x1", // playMode指定模式的布局
enableHTTPS: 1, // 是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
showToolbar: 1, //是否显示工具栏，0-不显示，非0-显示
showSmart: 1, //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
buttonIDs: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769",//自定义工具条按钮
encryptedFields: 'secret' // 加密字段
}
this.oWebControl.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify(config)
}).then(function (oData) {
// console.log("oData",JSON.stringify(oData))
// oWebControl.JS_Resize(700, 400); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
});
// 根据playMode确定调用预览或回放
this.playMode? this.startPlayBack():this.startRealPlay()
})
},
// 获取公钥
getPubKey (callback) {
console.log(this.oWebControl,'oWebControloWebControl')
this.oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024
})
}).then((oData) => {
if (oData.responseMsg.data) {
this.pubKey = oData.responseMsg.data
callback()
}
})
},
初始话完成之后，基本就可以看到视频插件窗口，只不过看不到视频，别急！要根据视频监控的id初始化视频才可以看到画面，所以现在是这样：
4. 视频预览
视频预览需要需要根据监控的indexCode在服务器获取摄像头的实时监控画面：
// 视频预览
startRealPlay () {
let config = {
cameraIndexCode: "摄像头id",
streamMode: 0,
transMode: 1,
gpuMode: 0,
wndId: -1 //默认为空闲窗口回放
}
// console.log('摄像头视频调取配置',config)
this.oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify(config)
}).then(oData=> {
console.log('播放err-oData:',oData)
});
},
进行完这一步，基本就可以预览到监控画面：
看到了完整的监控画面，基本就完成了在Web端嵌入海康监控的需求。
5. 视频回放功能
如果视频预览的同时还需要视频回放功能，请参考这一节，修改playMode=1后重新初始化，并调用视频回放函数，进行视频回放查看，具体是回放时间段自行设定：
// 视频回放
startPlayBack(){
let endTime = this.endTime;
let startTime = this.startTime;
let startTimeStamp = new Date(startTime.replace('-', '/').replace('-', '/')).getTime();
let endTimeStamp = new Date(endTime.replace('-', '/').replace('-', '/')).getTime();
startTimeStamp= Math.floor(startTimeStamp / 1000).toString();
endTimeStamp=Math.floor(endTimeStamp / 1000).toString();
let config = {
cameraIndexCode: this.cameraIndexCode,
startTimeStamp: startTimeStamp,
endTimeStamp: endTimeStamp,
recordLocation: 1,
transMode: 1,
gpuMode: 0,
wndId: -1,
};
this.oWebControl.JS_RequestInterface({
funcName: "startPlayback",
argument: JSON.stringify(config)
}).then(function (oData) {
console.log('视频回放err-oData:',oData)
});
},
总结
到这海康视频的web插入就完成了。伸手党福利，文章的VUE源文件已经上传，下载地址。