vue中使用海康插件实现视频实时监控(海康插件)
vue中使用海康插件实现视频实时监控(海康插件)首先下载安装海康插件-在webcontrol.exe然后直接写代码好了,所有的方法都是海康在demo初始化之后直接打包的,后台会把key和一些配置的东西返回给你,然后你只需要给你监听点号。实现之后,几乎所有你想要的操作都有各种黑科技,你只需要处理这个插件的兼容性问题和一些bug。底层是用C写的,但是最终的播放是通过websocket实现的。代码在index.htmlhtml:动态获取容器的宽高
data:swfHeight:"",swfWidth:"",//初始化参数initparam:{appKey:"xxxxx",secret:"xxxxxxx",apiIp:"xxx.xxx.xxx",apiPort:8099,layout:"1x1"//这是你初始初始化后控制分屏},//监控点编号pointCode:"xxxxxxx",pubKey:"",oWebControl:null,WebControl:nullmethods://海康威视插件页面渲染方法//Html:
是放置插件的盒子,id不要改,如果改了也要在下面的方法里改//css:自己写一个盒子,让上面的盒子为100%//js:data,methods,life周期函数中,我们还要看一下Next//我想用海康视频直接把onSearch下面的所有方法都照过来//前三个接口是我们要写的//查询videoList,关键getInitParam,执行是videoPreviewonSearch(){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:"警告”});}});},//获取海康密钥getInitParam(){getInitParam('xxx').then(res=>{this.initparam=res;this.init()});},//执行每个监控点的预览操作//获取监控点编号videoPreview(val,index){this.position=index;this.oWebControl.JS_ShowWnd();这个.pointCode=val.pointCode;this.startpreview();},//创建播放实例initPlugin(){this.oWebControl=newWebControl({szPluginContainer:"playWnd",//指定容器idiServicePortStart:15900,//指定开始和结束端口号,推荐使用这个值iServicePortEnd:15909,szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",//clsidforIE10usingActiveX//创建一个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++;如果(this.initCount<3){setTimeout(()=>{this.initPlugin();},3000);}else{console.log("插件启动失败,请检查插件是否安装!");}},//异常断开:bNormalClose=falsecbConnectClose:bNormalClose=>{//JS_Disconnect正常断开:bNormalClose=trueconsole.log("cbConnectClose");this.oWebControl=null;}});},//设置窗口控件回调setCallbacks(){this.oWebControl.JS_SetWindowControlCallback({cbIntegrationCallBack:这个.cbIntegrationCallBack});},//推送消息cbIntegrationCallBack(oData){console.log(oData.responseMsg);/*showCBInfo(JSON.stringify(oData.responseMsg));*/},//初始化init(){this.getPubKey(()=>{//以下变量值请自行修改letappkey=this.initparam.appKey;//集成安全提供的appkey管理平台必填letsecret=this.setEncrypt(this.initparam.secret);//安全管理平台提供的secret,必填letip=this.initparam.apiIp;//安全管理平台IP地址,必填letport=this.initparam.apiPort;//综合安全管理平台端口,如果启用HTTPS协议,默认为443port=parseInt(port);letlayout=this.initparam.layout;letplayMode=0;//初始播放模式:0-preview,1-playbackletsnapDir="D:\\SnapDir";//快照存储路径letvideoDir="D:\\VideoDir";//紧急视频或视频片段存储路径letenableHTTPS=1;//是否开启HTTPS协议与安全综合管理平台交互,Yes为1,no为0letencryptedFields="秘密";//加密字段,默认加密字段为secretletshowToolbar=1;//是否显示工具栏,0-不显示,非0-显示letshowSmart=1;//是否显示智能信息(比如配置移动侦测后屏幕上的线框),0-不显示,非0-显示letbuttonIDs="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,appkeyprovidedbyAPIgatewaysecret:secret,//secretprovidedbyAPIgatewayip: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一次,避免插件窗口与窗口后的DIV窗口不重叠的问题firefox下首次显示//startpreview();//初始化后打开预览});});},//获取公钥getPubKey(callback){this.oWebControl.JS_RequestInterface({funcName:"getRSAPubKey",argument:JSON.stringify({keyLength:1024})}).then(oData=>{console.log(oData);如果(oData.responseMsg.data){this.pubKey=oData.responseMsg.data;callback();}});},//RSA加密setEncrypt(value){letencrypt=newJSEncrypt();encrypt.setPublicKey(this.pubKey);返回加密。加密(值);},//设置窗口裁剪,当窗口因滚动需要被覆盖时case需要JS_CuttingPartWindowpartwindowsetWndCover(){letiWidth=$(window).width();让iHeight=$(window).height();让oDivRect=$("#playWnd").get(0).getBoundingClientRect();让iCoverLeft=oDivRect.left<0?数学.abs(oDivRect.left):0;让iCoverTop=oDivRect.top<0?数学.abs(oDivRect.top):0;让iCoverRight=oDivRect.right-iWidth>0?Math.round(oDivRect.right-iWidth):0;让iCoverBottom=oDivRect.bottom-iHeight>0?Math.round(oDivRect.bottom-iHeight):0;iCoverLeft=iCoverLeft>this.swfWidth?this.swfWidth:iCoverLeft;iCoverTop=iCoverTop>this.swfHeight?这个.swfHeight:iCoverTop;iCoverRight=iCoverRight>this.swfWidth?this.swfWidth:iCoverRight;iCoverBottom=iCoverBottom>this.swfHeight?这个.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(){letpointCode=this.pointCode;让cameraIndexCode=pointCode;//获取输入的监控点Number值,要求letstreamMode=0;//主副码流识别:0-主码流,1-副码流lettransMode=1;//传输协议:0-UDP,1-TCPletgpuMode=0;//是否开启GPU硬解,0-关闭,1-开启letwndId=-1;//播放窗口序号(播放窗口可以在上面2x2的layout中指定)cameraIndexCode=cameraIndexCode.replace(/(^\s*)/g,"");来了raIndexCode=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();//先让窗口隐藏,避免插件窗口滞后于浏览器消失的问题。连接插件服务失败});}}},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();}});//监听滚动条的滚动事件,使插件窗口随着浏览器的滚动移动$(window).scroll(()=>{if(this.oWebControl!=null){this.oWebControl.JS_Resize(this.swfWidth,this.swfHeight);this.setWndCover();}});},beforeDestroy(){this.closeWindow();//关闭插件}