vue项⽬中海康插件的使⽤
官⽅⽂档 ：
插件版本：视频WEB插件 V1.5.1（见附件）（另附H5视频播放器开发包 V1.0.0，可⽤于移动端开发）
针对于web端的调⽤⽅法：
1. 直接调⽤海康插件，需传参数 cameraIndexCode（监控点编号）。
2. 调⽤海康接⼝，需传参数 url（监控点预览取流），需注意传输协议（rtsp，hls等）及延时情况。
以下为第⼀种⽅法（通过监控点编号cameraIndexCode直接调⽤海康插件的⽅法）说明：
【开发流程】
安装 插件包（直接安装，勿⾃⾏解压并运⾏解压后的可执⾏⽂件，安装于系统盘的“Program Files (x86)\VideoWebPlugin”⽬录中）。
在vue项⽬的⼊⼝⽂件（ public - index.vue ）中引⼊js⽂件。
<script src="./HikVision/jquery-1.12.4.min.js"></script>
<script src="./HikVision/jsencrypt.min.js"></script>
<script src="./HikVision/jsWebControl-1.0.0.min.js"></script>
应⽤插件，基本对接流程（灰⾊为可选步骤）：
⽬录
this.oWebControl = new WebControl({
szPluginContainer: "playWnd"+this.settingId, // 指定容器id
iServicePortStart: 15900, // 指定起⽌端⼝号，建议使⽤该值
iServicePortEnd: 15909,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // ⽤于IE10使⽤ActiveX的clsid
cbConnectSuccess: () => {
// ----------创建WebControl实例成功启动插件---------
// ---------------2.JS_StartService-----------------
},
cbConnectError: () => {
/
/ 创建WebControl实例失败
this.oWebControl = null;
this.playText = '插件未启动，正在尝试启动，请稍候...';
this.WebControl.JS_WakeUp("VideoWebPlugin://");// 程序未启动时执⾏error函数，采⽤wakeup来启动程序 this.initCount++;
if (this.initCount < 2) {
setTimeout(() => {
this.initPlugin(); // 重新创建播放实例
}, 3000);
} else {
this.playText = `插件启动失败，请检查插件是否安装！`;
}
},
cbConnectClose: () => {//bNormalClose
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
this.oWebControl = null;
}
});
this.oWebControl.JS_StartService("window", {
// WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
}).then(() => {
/
/ --------------------设置消息回调--------------------
//-----------3.1 JS_SetWindowControlCallback----------
// ----启动插件服务成功创建视频播放窗⼝（宽⾼可设定）----
// ------------------3.2 JS_CreateWnd------------------
},
function() {
// 启动插件服务失败
}
);
this.oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack:function (oData) {
/
/ console.log('回调信息',oData)
}
// this.cbIntegrationCallBack() // 封装的推送消息⽅法
});
this.oWebControl.JS_CreateWnd("playWnd"+this.settingId, this.$refs.playWnd.offsetWidth, this.$refs.playWnd.offsetHeight).then(() => { // ------------------创建播放实例成功后初始化-------------------
// -----4.1 JS_RequestInterface - funcName: "getRSAPubKey"-----
// ------------------创建播放实例成功后初始化-------------------
// ---------4.2 JS_RequestInterface - funcName: "init"----------
});
this.oWebControl.JS_RequestInterface({
//通⽤请求响应接⼝
funcName: "getRSAPubKey", // 功能标识
argument: JSON.stringify({
keyLength: 1024 // 秘钥长度，可选1024或2048
})
})
.then(oData => {
if (sponseMsg.data) {
// 当code为-1时⽆data字段
jquery在项目里是干啥的this.pubKey = sponseMsg.data; // 返回的数据，如RSA公钥
callback();
}
});
//RSA加密
setEncrypt(value) {
var encrypt = new JSEncrypt();
encrypt.setPublicKey(this.pubKey);
pt(value);
},
//参数
var appkey = this.initparam.appKey; //综合安防管理平台提供的appkey，必填
var secret = this.setEncrypt(this.initparam.secret); //综合安防管理平台提供的secret，必填
var ip = this.initparam.apiIp; //综合安防管理平台IP地址，必填
var playMode = this.isLive; //初始播放模式：0-预览，1-回放
var port = this.initparam.apiPort; //综合安防管理平台端⼝，若启⽤HTTPS协议，默认443
port = parseInt(port);
var snapDir = ""; //抓图存储路径
var videoDir = ""; //紧急录像或录像剪辑存储路径
var layout = this.initparam.layout; //playMode指定模式的布局
var enableHTTPS = 1; //是否启⽤HTTPS协议与综合安防管理平台交互，这⾥总是填1
var encryptedFields = "secret"; //加密字段，默认加密领域为secret
var showToolbar = 0; //是否显⽰⼯具栏，0-不显⽰，⾮0-显⽰
var showSmart = 1; //是否显⽰智能信息（如配置移动侦测后画⾯上的线框），0-不显⽰，⾮0-显⽰
var buttonIDs =this.buttonShow?"0,1,256,257,258,259,260,512,513,514,515,516,517,768,769":""; //⾃定义⼯具条按钮 this.oWebControl.JS_RequestInterface({
//通⽤请求响应接⼝
funcName: "init", // 功能标识
argument: JSON.stringify({
appkey: appkey, //API⽹关提供的appkey
secret: secret, //API⽹关提供的secret
ip: ip, //API⽹关IP地址
playMode: playMode, //播放模式（决定显⽰预览还是回放界⾯）
port: port, //端⼝
snapDir: snapDir, //抓图存储路径
videoDir: videoDir, //紧急录像或录像剪辑存储路径
layout: layout, //布局
enableHTTPS: enableHTTPS, //是否启⽤HTTPS协议
encryptedFields: encryptedFields, //加密字段
showToolbar: showToolbar, //是否显⽰⼯具栏
showSmart: showSmart, //是否显⽰智能信息
buttonIDs: buttonIDs, //⾃定义⼯具条按钮
// toolBarButtonIDs:toolBarButtonIDs//⾃定义⼯具条按钮字符串
// name:name//⽆效
})
})
.then(() => {//oData
/
/ console.log('oData',oData)
// 初始化后resize⼀次，规避firefox下⾸次显⽰窗⼝后插件窗⼝未与DIV窗⼝重合问题
// ------------------创建播放实例成功后初始化-------------------
// -----------------------5.1 JS_Resize-----------------------
// --------------------初始化后开启预览或回放-------------------
if(this.isLive==0){
//------------------------开启预览（实时）-------------------------
// ------5.2 JS_RequestInterface - funcName: "startPreview"-------
}else {
//----------------------------开启回放------------------------------
// ------5.3 JS_RequestInterface - funcName: "startPlayback"-------
}
});
this.oWebControl.JS_Resize(this.$refs.playWnd.offsetWidth, this.$refs.playWnd.offsetHeight);
this.oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode, //监控点编号
streamMode: streamMode, //主⼦码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
// wndId: wndId //可指定播放窗⼝
})
});
this.oWebControl.JS_RequestInterface({
funcName: "startPlayback",
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode, //监控点编号
recordLocation: recordLocation, // 录像存储类型
streamMode: streamMode, //主⼦码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
// wndId: wndId, //可指定播放窗⼝
startTimeStamp: Math.floor(startTimeStamp / 1000).toString(), //录像查询开始时间戳，单位：秒 endTimeStamp: Math.floor(endTimeStamp / 1000).toString(), //录像结束开始时间戳，单位：秒 })
});
if (this.oWebControl) {
this.oWebControl.JS_HideWnd();
this.oWebControl.JS_DestroyWnd({
funcName: 'destroyeWnd'
}).then(function () {});
}
if (this.oWebControl != null) {
this.oWebControl.JS_HideWnd(); // 先让窗⼝隐藏，规避可能的插件窗⼝滞后于浏览器消失问题
this.oWebControl.JS_Disconnect().then(
() => {
// 断开与插件服务连接成功
},
() => {
// 断开与插件服务连接失败
}
);
}
完整代码：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论