海康威视ISC平台的VUE二次开发接入实现
Posted wind丶chaser
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了海康威视ISC平台的VUE二次开发接入实现相关的知识，希望对你有一定的参考价值。
第一步
取得ISC平台的appkey以及secret，以及安装ISC平台的主机IP，这一步至关重要！！！
第二步
由于目前我所在的公司项目前端的代码均由vue所实现，所以利用vue-cli创建一个最简单的项目工程，别告诉我你不会，不会也可以，自己百度，然后找到index文件，别告诉我你找不到，全局搜索谢谢，在index.html文件中引入三个script文件，三个文件从哪来？海康的官网：Hikvision AI Cloud 开放平台
请下载这个程序包，程序包里面有最基本的demo以及如何使用demo以及所需要的三个script！！！
引入代码如下：
<script src="static/js/jquery-1.12.4.min.js"></script>
<script src="static/js/jsencrypt.min.js"></script>
<script src="static/js/jsWebControl-1.0.0.min.js"></script>
注意：建议三个文件放在public文件夹下，与你的index文件同级目录！这个是个坑，之前我随便放的位置，一直报错。
第三步
现在就可以愉快的创建自己的vue组件了，在components文件夹下创建一个你自己的组件，当然，你非要建在别的地方我无所谓的，自己import的时候注意一下就行。
然后，以下是代码，基本都是直接copy官网demo的代码，随便写了一下，里面的函数应该都是封装在他们提供的js文件中，哦，对了，在上一步中有个比较重要的插件需要安装，不然播放不了，自己看使用说明！！！
代码：
<template>
<body>
<!--预览界面-->
<div id="operate" class="operate">
<div class="module">
<div class="item"><span class="label">监控点编号：</span><input v-model="cameraIndexCode" type="text" value=""></div>
<div class="item" style="margin-top: 20px;margin-left: -20px;">
<button style="padding:0;margin:0;" @click="startClickFn" class="btn">预览</button>
<button style="padding:0;margin:0;" @click="stopClickFn" class="btn">停止全部预览</button>
</div>
</div>
</div>
<!--视频窗口展示-->
<div id="playWnd" class="playWnd" style="left: 109px; top: 133px;" ></div>
</body>
<!---->
</template>
<script>
export default {
name:\'videoPlayerBox2\',
props:{
},
data(){
return{
oWebControl: undefined,
initCount: 0,
pubKey: \'\',
cameraIndexCode: undefined
}
},
methods: {
//推送消息
cbIntegrationCallBack(oData){
showCBInfo(JSON.stringify(oData.responseMsg));
},
//监听自身容器大小变化
observeWrapper(){
const ro = new ResizeObserver(entries=> {
for (const entry of entries){
const cr = entry.contentRect;
this.videoWidth = cr.width;
this.videoHeight = cr.height;
this.oWebControl && this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
this.oWebControl && this.setWndCover();
}
});
ro.observe(document.querySelector(\'#playWnd\'));
},
setWndCover(){ //裁剪插件实例的大小
let iWidth = $(window).width();
let iHeight = $(window).height();
let oDivRect = $("#playWnd").get(0).getBoundingClientRect();
let iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
let iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
let iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
let iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight): 0;
iCoverLeft = (iCoverLeft > this.videoWidth) ? this.videoWidth : iCoverLeft;
iCoverTop = (iCoverTop > this.videoHeight) ? this.videoHeight : iCoverTop;
iCoverRight = (iCoverRight > this.videoWidth) ? this.videoWidth : iCoverRight;
iCoverBottom = (iCoverBottom > this.videoHeight) ? this.videoHeight : iCoverBottom;
this.oWebControl.JS_RepairPartWindow(
0,
0,
1001,
600
);
if (iCoverLeft != 0) {
this.oWebControl.JS_CuttingPartWindow(
0,
0,
iCoverLeft,
600
);
}
if (iCoverTop != 0) {
this.oWebControl.JS_CuttingPartWindow(
0,
0,
1001,
iCoverTop
);
}
if (iCoverRight != 0) {
this.oWebControl.JS_CuttingPartWindow(
1000 - iCoverRight,
0,
iCoverRight,
600
);
}
if (iCoverBottom != 0) {
this.oWebControl.JS_CuttingPartWindow(
0,
600 - iCoverBottom,
1000,
iCoverBottom
);
}
},
initPlugin(){
let that = this
this.oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function() {
that.oWebControl.JS_StartService("window",{ // WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
})
.then(function(){
console.log(\'success\')
that.oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
cbIntegrationCallBack: that.cbIntegrationCallBack
});
that.oWebControl.JS_CreateWnd("playWnd", 1000, 600) //JS_CreateWnd创建视频播放窗口，宽高可设定
.then(function(){
console.log(\'成功222\',that)
that.init(); // 创建播放实例成功后初始化
})
},
function(){ // 启动插件服务失败
console.log(\'fail\')
});
},
cbConnectError: function() { // 创建WebControl实例失败
console.log(that,\'that\');
that.oWebControl = null;
that.$message.error("插件未启动，正在尝试启动，请稍候...")
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
that.initCount ++;
if (that.initCount < 3){
setTimeout(function(){
that.initPlugin();
},3000)
}else{
that.$message.error("插件启动失败，请检查插件是否安装！")
}
},
cbConnectClose: function(bNormalClose) {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
console.log("cbConnectClose");
that.oWebControl = null;
}
})
},
init(){
let that = this
this.getPubKey(function(){
var appkey = "28857343"; //请自行修改为你自己的
var secret = that.setEncrypt("9xMBcxZSODgmQPQGDfng"); //请自行修改为你自己的
var ip = "192.168.28.103"; //请自行修改为你自己的
var playMode = 0; //这个是播放模式，0是预览，1是回放
var port = 443; //请自行修改为你自己的
var snapDir = "D:\\\\SnapDir";
var videoDir = "D:\\\\VideoDir";
var layout = "1x1";
var enableHTTPS = 1;
var encryptedFields = \'secret\';
var showToolbar = 1;
var showSmart = 1;
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";
that.oWebControl.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey,
secret: secret,
ip: ip,
playMode: playMode,
port: port,
snapDir: snapDir,
videoDir: videoDir,
layout: layout,
enableHTTPS: enableHTTPS,
encryptedFields: encryptedFields,
showToolbar: showToolbar,
showSmart: showSmart,
buttonIDs: buttonIDs
})
})
.then(function(oData){
that.oWebControl.JS_Resize(1000, 600);
})
})
},
//公钥的获取
getPubKey(callback){
let that = this
this.oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024
})
})
.then(function(oData){
console.log(oData);
if(oData.responseMsg.data) {
that.pubKey = oData.responseMsg.data;
callback()
}
})
},
setEncrypt(value) {
let encrypt = new JSEncrypt();
encrypt.setPublicKey(this.pubKey);
return encrypt.encrypt(value);
},
startClickFn() {
var cameraIndexCode = this.cameraIndexCode;
var streamMode = 0;
var transMode = 1;
var gpuMode = 0;
var wndId = -1;
this.oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode:cameraIndexCode,
streamMode: streamMode,
transMode: transMode,
gpuMode: gpuMode,
wndId:wndId
})
})
},
stopClickFn(){
if (this.oWebControl && this.oWebControl.JS_RequestInterface){
this.oWebControl.JS_RequestInterface({
funcName: "stopAllPreview"
})
}
}
},
created() {
this.initPlugin();
},
mounted() {
let that = this ;
this.observeWrapper();
$(window).resize( ()=> {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(1000, 600);
this.setWndCover();
}
});
$(window).scroll( ()=> {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(1000, 600);
this.setWndCover();
}
});
},
destroyed() {
if (this.oWebControl != null){
this.oWebControl.JS_HideWnd();
this.oWebControl.JS_Disconnect()
.then(function(){
},
function(){
})
}
}
}
</script>
<style scoped>
.playWnd {
margin: 30px 0 0 400px;
width: 1000px; /*播放容器的宽和高设定*/
height: 600px;
border: 1px solid red;
}
.operate {
margin-top: 24px;
}
.operate::after {
content: \'\';
display: block;
clear: both;
}
.module {
float: left;
width: 340px;
/*min-height: 320px;*/
margin-left: 16px;
padding: 16px 8px;
box-sizing: border-box;
border: 1px solid #e5e5e5;
}
.module .item {
margin-bottom: 4px;
}
.module input[type="text"] {
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
margin-left: 0;
width: 150px;
min-height: 20px;
}
.module .btn {
min-width: 80px;
min-height: 24px;
margin-top: 100px;
margin-left: 80px;
}
</style>
代码能看懂吧，还是挺简单的，稍微学一点就行，虽然没怎么备注代码，但是备注的话基本上你去看一下海康的demo中的代码你就知道这些函数是干嘛的了，对了，这样写会有很多的编码格式问题，你在npm run serve过程中会出现一些不让你跑的情况，所以你要在你的文件.eslintrc.js中加上那么几行，如果你的项目里面没有别的东西，建议直接换成我的，代码我也贴出来：
module.exports = {
root: true,
env: {
node: true
},
\'extends\': [
\'plugin:vue/essential\',
\'eslint:recommended\'
],
rules: {
\'no-console\': process.env.NODE_ENV === \'production\' ? \'error\' : \'off\',
\'no-debugger\': process.env.NODE_ENV === \'production\' ? \'error\' : \'off\',
\'no-undef\': \'off\',
\'vue/no-unused-vars\': \'off\',
\'vue/require-v-for-key\': \'off\',
\'no-unused-vars\': \'off\',
\'vue/no-unused-components\': \'off\',
\'no-mixed-spaces-and-tabs\': 0
},
parserOptions: {
parser: \'babel-eslint\'
}
};
如果没有这个文件自己建一个也行，这样你的代码就能跑起来了，不会有人还不会引入组件吧，自行百度。
都看到这了，代码一定都实现了吧，不点个赞再走？合适吗~？
最后贴一下自己实现的代码：
你问我为什么没有视频？废话，我写这文章的时候在吹空调，爽得很，谁有事没事回去服务器那端为了写个博客去连接服务器？
对了，不是还有个监控点编号吗，海康的ISC官网上有个OpenAPI测试的程序，你把那个下载好了，然后按照他的API指引取得安装在ISC平台上摄像头indexcode，然后填入这个方框内，就万事大吉了，有问题可以私聊，但是不是经常在线，建议加QQ找我击剑：709270121。
以上是关于海康威视ISC平台的VUE二次开发接入实现的主要内容，如果未能解决你的问题，请参考以下文章