共计 5004 个字符，预计需要花费 13 分钟才能阅读完成。
<template>
<div class="hik-video" id="hikVideo" :style="{width:option.width +'px',height:option.height +'px'}">
</div>
</template>
<script>
// 参数示例：// option:{
// appkey:"23464284",
// secret:"EyTl3nQ3OvlYqkheTRXa",
// ip:"10.254.10.10",
// port:"80",
// width:960,
// height:540
// },
// camera:"f2d62cd79ca14929a019d7eb1bb9375e",
export default {
props: {
option: Object,
camera: {
type: String,
default: ""
}
},
data() {
return {
oWebControl: null,
bIE: (!!window.ActiveXObject || 'ActiveXObject' in window),
pubKey: "",
iLastCoverLeft: 0,
iLastCoverTop: 0,
iLastCoverRight: 0,
iLastCoverBottom: 0,
initCount: 0,
videoFlag: false,
}
},
methods: {getPubKey(callback) {
this.oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({keyLength: 1024})
}).then(oData => {if (oData.responseMsg.data) {
this.pubKey = oData.responseMsg.data
callback()}
})
},
initPlugin() {
this.oWebControl = new WebControl({
szPluginContainer: "hikVideo",
iServicePortStart: 15900,
iServicePortEnd: 15909,
cbConnectSuccess: () => {
this.oWebControl.JS_StartService("window", {dllPath: "./VideoPluginConnect.dll"}).then(() => {
this.oWebControl.JS_SetWindowControlCallback({ // 设置音讯回调
cbIntegrationCallBack: cbIntegrationCallBack
});
this.oWebControl.JS_CreateWnd("hikVideo", this.option.width, this.option.height).then(() => {this.videoInit();
this.videoFlag = true
});
});
},
cbConnectError: () => {console.log("cbConnectError");
this.oWebControl = null;
this.$notice({
message: '插件未启动，正在尝试启动，请稍候...',
type: 'error'
});
WebControl.JS_WakeUp("VideoWebPlugin://");
this.initCount++;
if (this.initCount < 3) {setTimeout(() => {this.initPlugin();
}, 3000)
} else {
this.$notice({
message: '插件启动失败，请查看插件是否装置！',
type: 'error'
});
}
},
cbConnectClose: () => {this.oWebControl = null;}
})
function cbIntegrationCallBack(oData) {console.log(oData, 'cccccc')
}
},
unloadEvent() {if (this.oWebControl != null) {this.oWebControl.JS_HideWnd();
this.oWebControl.JS_Disconnect();}
},
scrollEvent() {if (this.oWebControl != null) {this.oWebControl.JS_Resize(this.option.width, this.option.height);
this.setWndCover();}
},
resizeEvent() {if (this.oWebControl != null) {this.oWebControl.JS_Resize(this.option.width, this.option.height);
this.setWndCover();}
},
setWndCover() {
var iWidth = this.option.width;
var iHeight = this.option.height;
var oDivRect = document.getElementById("hikVideo").getBoundingClientRect();
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
iCoverLeft = (iCoverLeft > iWidth) ? iWidth : iCoverLeft;
iCoverTop = (iCoverTop > iHeight) ? iHeight : iCoverTop;
iCoverRight = (iCoverRight > iWidth) ? iWidth : iCoverRight;
iCoverBottom = (iCoverBottom > iHeight) ? iHeight : iCoverBottom;
let widthAdd1Px = iWidth + 1
// this.oWebControl.JS_RepairPartWindow(0, 0, widthAdd1Px, iHeight);
// this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, iHeight);
// this.oWebControl.JS_CuttingPartWindow(0, 0, widthAdd1Px, iCoverTop);
// if (iCoverLeft != 0) {// this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, iHeight);
// }
// if (iCoverTop != 0) {// this.oWebControl.JS_CuttingPartWindow(0, 0, widthAdd1Px, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后呈现一个像素条
// }
// if (iCoverRight != 0) {// this.oWebControl.JS_CuttingPartWindow(iHeight - iCoverRight, 0, iCoverRight, iHeight);
// }
// if (iCoverBottom != 0) {// this.oWebControl.JS_CuttingPartWindow(0, iHeight - iCoverBottom, iWidth, iCoverBottom);
// }
},
setEncrypt(value) {var encrypt = new JSEncrypt();
encrypt.setPublicKey(this.pubKey);
return encrypt.encrypt(value);
},
videoInit() {this.getPubKey(() => {let secret = this.setEncrypt(this.option.secret);
this.oWebControl.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: this.option.appkey,
secret: secret,
ip: this.option.ip,
playMode: 0, // 预览
port: Number(this.option.port),
snapDir: "",
videoDir: "",
layout: "1x1",
enableHTTPS: 0,
encryptedFields: "secret",
showToolbar: 0
})
})
.then(oData => {this.preview(this.camera);
// resize
this.oWebControl.JS_Resize(this.option.width, this.option.height);
});
})
},
preview(camera) {
this.oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: camera,
streamMode: 0,
transMode: 1,
gpuMode: 0,
wndId: -1
})
}).then((oData) => {console.log(JSON.stringify(oData ? oData.responseMsg : ''));
});
},
destroy () {
this.oWebControl.JS_RequestInterface({funcName: "stopAllPreview"}).then(res => {
this.oWebControl.JS_RequestInterface({funcName: "uninit"}).then(res => {
this.oWebControl.JS_RequestInterface({funcName: "destroyWnd"}).then(res => {this.oWebControl.JS_HideWnd();
this.$emit("closed")
})
})
})
}
},
mounted() {this.initPlugin();
window.addEventListener('scroll', this.scrollEvent);
window.addEventListener('resize', this.resizeEvent);
// 标签敞开
window.addEventListener('unload', this.unloadEvent);
},
beforeDestroy() {this.unloadEvent()
window.removeEventListener("scroll", this.scrollEvent, true);
window.removeEventListener("resize", this.resizeEvent, true);
window.removeEventListener("unload", this.unloadEvent, true);
},
destroyed() {},
watch:{
camera: {handler: function(newVal, oldVal) {if (newVal && this.videoFlag) {this.preview(newVal);
}
},
immediate: true
}
}
}
</script>
<style lang="scss" scoped>
</style>
正文完
