在vue中应用海康插件实现视频实时监控(海康插件)
首先
下载并装置海康插件 webcontrol.exe
而后
间接就写代码把，所有办法都是海康他们间接封装好的demo
初始化之后，后盾把密钥和一些配置的货色返回给你
而后只须要把监控点编号给你就能够了。实现之后简直你想要的操作都有
各种黑科技，而你只需解决这个插件的兼容问题和一些bug,底层他们时用C写得，然而最终实现播放呢，又是webscoket实现的。
代码
在index.html中引入上面这三个js
<script src="./static/hkjs/jquery-1.12.4.min.js"></script><script src="./static/hkjs/jsencrypt.min.js"></script><script src="./static/hkjs/jsWebControl-1.0.0.min.js"></script>html:
采纳了动静获取容器的宽和高
<div id="playWnd" class="playWnd" :style="{width:swfWidth+'px',height:swfHeight+'px'}"></div>data:
swfHeight: "", swfWidth: "",//初始化参数 initparam: { appKey: "xxxxx", secret: "xxxxxxx", apiIp: "xxx.xxx.xxx", apiPort: 8099, layout: "1x1"//这里是来管制你一开始初始化之后的分屏的 }, //监控点编号 pointCode: "xxxxxxx", pubKey: "", oWebControl: null, WebControl: nullmethods:
//海康插件页面渲染办法 //Html：<div id="playWnd" class="playWnd"></div> 就是放插件的盒子,id不要改，改了的话上面的办法外面也要改 //css:本人写一个盒子，让下面这个盒子100%就好 //js:data，methods,生命周期函数外面也要去看下 //想要用海康视频间接把从onSearch以下的所以办法复制过来 // 后面三个接口是咱们本人要写的 //查问videoList,密钥getInitParam,执行就是videoPreview onSearch() { this.oWebControl.JS_ShowWnd(); this.videoList = []; videoList( 接口参数 ).then(res => { if (res.statusCode == 200) { this.videoList = res.result.rows; } else { this.$message({ message: res.message, type: "warning" }); } }); }, //获取海康密钥 getInitParam() { getInitParam('xxx').then(res => { this.initparam = res; this.init() }); }, //执行每监控点预览的操作 //获取监控点编号 videoPreview(val, index) { this.position = index; this.oWebControl.JS_ShowWnd(); this.pointCode = val.pointCode; this.startpreview(); }, // 创立播放实例 initPlugin() { this.oWebControl = new WebControl({ szPluginContainer: "playWnd", // 指定容器id iServicePortStart: 15900, // 指定起止端口号，倡议应用该值 iServicePortEnd: 15909, szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10应用ActiveX的clsid // 创立WebControl实例胜利 cbConnectSuccess: () => { this.oWebControl .JS_StartService("window", { // WebControl实例创立胜利后须要启动服务 dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死 }) .then( () => { // 启动插件服务胜利 this.oWebControl.JS_SetWindowControlCallback({ // 设置音讯回调 cbIntegrationCallBack: this.cbIntegrationCallBack }); this.oWebControl .JS_CreateWnd("playWnd", this.swfWidth, this.swfHeight) .then(() => { //JS_CreateWnd创立视频播放窗口，宽高可设定 this.getInitParam(); // 创立播放实例胜利后初始化 }); }, () => { // 启动插件服务失败 } ); }, // 创立WebControl实例失败 cbConnectError: () => { this.oWebControl = null; $("#playWnd").html("插件未启动，正在尝试启动，请稍候..."); this.WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采纳wakeup来启动程序 this.initCount++; if (this.initCount < 3) { setTimeout(() => { this.initPlugin(); }, 3000); } else { console.log("插件启动失败，请查看插件是否装置!"); } }, // 异样断开：bNormalClose = false cbConnectClose: bNormalClose => { // JS_Disconnect失常断开：bNormalClose = true console.log("cbConnectClose"); this.oWebControl = null; } }); }, // 设置窗口管制回调 setCallbacks() { this.oWebControl.JS_SetWindowControlCallback({ cbIntegrationCallBack: this.cbIntegrationCallBack }); }, // 推送音讯 cbIntegrationCallBack(oData) { console.log(oData.responseMsg); /* showCBInfo(JSON.stringify(oData.responseMsg)); */ }, //初始化 init() { this.getPubKey(() => { // 请自行批改以下变量值 let appkey = this.initparam.appKey; //综合安防治理平台提供的appkey，必填 let secret = this.setEncrypt(this.initparam.secret); //综合安防治理平台提供的secret，必填 let ip = this.initparam.apiIp; //综合安防治理平台IP地址，必填 let port = this.initparam.apiPort; //综合安防治理平台端口，若启用HTTPS协定，默认443 port = parseInt(port); let layout = this.initparam.layout; let playMode = 0; //初始播放模式：0-预览，1-回放 let snapDir = "D:\\SnapDir"; //抓图存储门路 let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储门路 let enableHTTPS = 1; //是否启用HTTPS协定与综合安防治理平台交互，是为1，否为0 let encryptedFields = "secret"; //加密字段，默认加密畛域为secret let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示 let showSmart = 1; //是否显示智能信息（如配置挪动侦测后画面上的线框），0-不显示，非0-显示 let buttonIDs = "0,16,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 //自定义工具条按钮 }) }) .then(oData => { this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight); // 初始化后resize一次，躲避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 //startpreview(); //初始化之后开启预览 }); }); }, //获取公钥 getPubKey(callback) { this.oWebControl .JS_RequestInterface({ funcName: "getRSAPubKey", argument: JSON.stringify({ keyLength: 1024 }) }) .then(oData => { console.log(oData); if (oData.responseMsg.data) { this.pubKey = oData.responseMsg.data; callback(); } }); }, //RSA加密 setEncrypt(value) { let encrypt = new JSEncrypt(); encrypt.setPublicKey(this.pubKey); return encrypt.encrypt(value); }, // 设置窗口裁剪，当因滚动条滚动导致窗口须要被遮住的状况下须要JS_CuttingPartWindow局部窗口 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.swfWidth ? this.swfWidth : iCoverLeft; iCoverTop = iCoverTop > this.swfHeight ? this.swfHeight : iCoverTop; iCoverRight = iCoverRight > this.swfWidth ? this.swfWidth : iCoverRight; iCoverBottom = iCoverBottom > this.swfHeight ? this.swfHeight : iCoverBottom; this.oWebControl.JS_RepairPartWindow(0, 0, this.swfWidth+1, this.swfHeight); // 多1个像素点避免还原后边界缺失一个像素条 if (iCoverLeft != 0) { this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, this.swfHeight); } if (iCoverTop != 0) { this.oWebControl.JS_CuttingPartWindow(0, 0, this.swfWidth+1, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后呈现一个像素条 } if (iCoverRight != 0) { this.oWebControl.JS_CuttingPartWindow( this.swfWidth - iCoverRight, 0, iCoverRight, this.swfHeight ); } if (iCoverBottom != 0) { this.oWebControl.JS_CuttingPartWindow( 0, this.swfHeight - iCoverBottom, this.swfWidth, iCoverBottom ); } }, //视频“预览”性能 startpreview() { let pointCode = this.pointCode; let cameraIndexCode = pointCode; //获取输出的监控点编号值，必填 let streamMode = 0; //奴才码流标识：0-主码流，1-子码流 let transMode = 1; //传输协定：0-UDP，1-TCP let gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用 let wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口） cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, ""); cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); this.oWebControl.JS_RequestInterface({ funcName: "startPreview", argument: JSON.stringify({ cameraIndexCode: cameraIndexCode, //监控点编号 streamMode: streamMode, //奴才码流标识 transMode: transMode, //传输协定 gpuMode: gpuMode, //是否开启GPU硬解 wndId: wndId //可指定播放窗口 }) }); }, //进行全副预览性能 stopAllPreview() { this.oWebControl.JS_RequestInterface({ funcName: "stopAllPreview" }); }, //敞开视频窗口 closeWindow() { if (this.oWebControl != null) { this.oWebControl.JS_HideWnd(); // 先让窗口暗藏，躲避可能的插件窗口滞后于浏览器隐没问题 this.oWebControl.JS_Disconnect().then( () => { // 断开与插件服务连贯胜利 }, () => { // 断开与插件服务连贯失败 } ); } } }, created() { this.getInitParam();//获取初始话所需的参数 }, beforeMount() {this.WebControl = WebControl;},//调用电脑中的插件 mounted() { this.swfHeight = document.getElementById("videoMaincontent1").offsetHeight; this.swfWidth = document.getElementById("videoMaincontent1").offsetWidth; //页面加载时创立播放实例初始化 this.initPlugin(); // 监听resize事件，使插件窗口尺寸追随DIV窗口变动 $(window).resize(() => { if (this.oWebControl != null) { this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight); this.setWndCover(); } }); // 监听滚动条scroll事件，使插件窗口追随浏览器滚动而挪动 $(window).scroll(() => { if (this.oWebControl != null) { this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight); this.setWndCover(); } }); }, beforeDestroy() { this.closeWindow();//敞开插件 }