<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>