| VUE项目接入海康摄像头实现视频预览 | 您所在的位置：网站首页 › 海康威视摄像头web › VUE项目接入海康摄像头实现视频预览 |
VUE项目接入海康摄像头实现视频预览
|
前言
公司的新平台要接入视频监控系统，这个棘手的活儿落在了我身上，压力山大，幸好海康文档比较完整，但是也费了一番心思，总结一下。 我们公司是通过他自己的综合安防管理平台接入的视频流，这个平台是要花钱的，据说是可以直接对接摄像头硬件获取视频流的，这个就免费了。下面只介绍通过综合安防平台在vue中实现视频预览。 平台注册海康开发者平台地址：open.hikvision.com/，首先要注册一下，然后下载他给的demo，在自己浏览器跑起来。 另外有问题可以咨询他们开发邮箱：[email protected]，一般当天五点前的问题会当天回复，如果没有回复，可以及时致电客服：400-800-5998。 程序包是视频播放的插件，文档里面有html的demo，第一步先把demo跑起来。如下图demo就跑通了。appKey、appSecret、ip、以及监控点编号都是找我们和海康对接的后端要的。监控点编号就是摄像头的唯一标识cameraIndexCode。 接下来就是整合到vue中了，因为我们只是先实现预览功能，其他功能插件本身已经提供了，所以需要将demo有用的函数提出来。 vue组件开发首先将海康摄像头用到的公共js提出来，放在static文件夹中在html中引入，vue-cli 3没有static文件夹，需要在public文件夹下自己建一个放静态资源的文件夹。 下面上代码 下载 export default { name: "videoPlayer", props:{ cameraIndexCode:{type:String,default:''}, layout:{type:String,default:'2x2'}, videoDialog:{type:Boolean,default:true}, }, data() { return { plugin:true , oWebControl:null, //插件对象 initCount:0, pubKey:'', //公钥加密 video_init_data:{ // appkey:'24700270', // secret:'y64n1SsDVSfIgf21z0oX', // ip:'192.168.56.158', // szPort:'443', appkey:'', appSecret:'', ip:'', port:'', snapDir:'D:\\SnapDir', videoDir:'D:\\VideoDir', layout:'2x2', encryptedFields:'secret', enableHttps:'1', }, video_play_data:{ cameraIndexCode:'754d47f108d44606ad73019928b68633', streamMode:'0', transMode:'1', gpuMode:'0', wndId:-1, }, //videoWidth videoHeight screenWidth screenHeight //这四个参数为了使插件大小和屏幕宽度一致变化 videoWidth:700, videoHeight:500, screenWidth: document.documentElement.clientWidth,//屏幕宽度 screenHeight: document.documentElement.clientHeight,//屏幕高度 //设置窗口遮挡 根据浏览器大小变化视频插件的大小 iLastCoverLeft : 0, iLastCoverTop : 0, iLastCoverRight : 0, iLastCoverBottom : 0, }; }, created(){}, mounted(){ //插件初始化 this.initPlugin(); this.$nextTick(()=>{ this.videoWidth = this.$refs.divPlugin.offsetWidth; this.videoHeight = this.$refs.divPlugin.offsetHeight; }) // 监听窗口变化 let _this = this; window.onresize = function(){ // 定义窗口大小变更通知事件 _this.screenWidth = document.documentElement.clientWidth; //窗口宽度 _this.screenHeight = document.documentElement.clientHeight; //窗口高度 }; window.addEventListener('scroll', function () { if (this.oWebControl != null) { this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); this.setWndCover(); } }); }, destroyed(){ if (this.oWebControl != null){ this.oWebControl.JS_Disconnect().then(function(){}, function() {}); } }, methods: { // 插件初始化 initPlugin () { let _this = this this.oWebControl = new WebControl({ szPluginContainer: "divPlugin", iServicePortStart: 15900, iServicePortEnd: 15909, cbConnectSuccess: (e) => { this.plugin=true; _this.setCallbacks(); if(_this.oWebControl){ _this.oWebControl.JS_StartService("window", { dllPath: "./VideoPluginConnect.dll" //dllPath: "./DllForTest-Win32.dll" }).then( (res) => { _this.oWebControl.JS_CreateWnd("divPlugin",_this.videoWidth,_this.videoHeight).then(() => { console.log("JS_CreateWnd success"); _this.initVideo(); }); }, function () { }); }else{ } }, cbConnectError: () => { console.log("cbConnectError"); _this.oWebControl = null; $("#divPlugin").html("插件未启动，正在尝试启动，请稍候..."); WebControl.JS_WakeUp("VideoWebPlugin://"); _this.initCount ++; if (_this.initCount < 3) { setTimeout(() => { _this.initPlugin(); }, 3000) } else { $("#divPlugin").html("插件启动失败，请检查插件是否安装！"); this.plugin=false; } }, cbConnectClose: () => { console.log("cbConnectClose"); this.oWebControl.JS_Disconnect().then(function(){}, function() {}); this.oWebControl = null; } }); }, // 设置窗口控制回调 setCallbacks() { this.oWebControl.JS_SetWindowControlCallback({ cbIntegrationCallBack: this.cbIntegrationCallBack }); }, // 推送消息 cbIntegrationCallBack(oData) { this.$message.warning((JSON.stringify(oData.responseMsg))); }, // 初始化参数 initVideo () { // console.log(this.getPubKey) this.getPubKey(() =>{ let appkey = this.video_init_data.appkey; let secret = this.setEncrypt(this.video_init_data.appSecret); let ip = this.video_init_data.ip; let szPort= this.video_init_data.port; let snapDir = this.video_init_data.snapDir; let videoDir = this.video_init_data.videoDir ; let layout = this.layout; let encryptedFields = ['secret']; appkey = appkey.replace(/(^\s*)/g, ""); appkey = appkey.replace(/(\s*$)/g, ""); secret = secret.replace(/(^\s*)/g, ""); secret = secret.replace(/(\s*$)/g, ""); ip = ip.replace(/(^\s*)/g, ""); ip = ip.replace(/(\s*$)/g, ""); szPort = szPort.replace(/(^\s*)/g, ""); szPort = szPort.replace(/(\s*$)/g, ""); snapDir = snapDir.replace(/(^\s*)/g, ""); snapDir = snapDir.replace(/(\s*$)/g, ""); videoDir = videoDir.replace(/(^\s*)/g, ""); videoDir = videoDir.replace(/(\s*$)/g, ""); let port = parseInt(szPort); let enableHttps = parseInt(this.video_init_data.enableHttps); encryptedFields = encryptedFields.join(","); this.oWebControl.JS_RequestInterface({ funcName: "init", argument: JSON.stringify({ appkey: appkey, secret: secret, ip: ip, playMode: 0, // 预览 port: port, snapDir: snapDir, videoDir: videoDir, layout: layout, enableHTTPS: enableHttps, encryptedFields: encryptedFields }) }).then(function (oData) { console.log(JSON.stringify(oData ? oData.responseMsg : '')) }); }) }, // 获取公钥 getPubKey (callback) { // console.log(this.oWebControl,'oWebControloWebControl') 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); }, // 视频预览 startRealPlay (IndexCode) { console.log('------开始播放-------') let cameraIndexCode = IndexCode?IndexCode:this.cameraIndexCode; let streamMode = this.video_play_data.streamMode; let transMode = this.video_play_data.transMode; let gpuMode = this.video_play_data.gpuMode; let wndId = -1; //默认为空闲窗口回放 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, wndId: wndId }) }).then(function (oData) { console.log('err:',oData) }); }, //根据窗口变化设置视频插件大小 resizewindow(w,h){ w = (w 0) ? Math.round(oDivRect.bottom - iHeight) : 0; iCoverLeft = (iCoverLeft > 700) ? 700 : iCoverLeft; iCoverTop = (iCoverTop > 400) ? 400 : iCoverTop; iCoverRight = (iCoverRight > 700) ? 700 : iCoverRight; iCoverBottom = (iCoverBottom > 400) ? 400 : iCoverBottom; if (this.iLastCoverLeft != iCoverLeft) { console.log("iCoverLeft: " + iCoverLeft); this.iLastCoverLeft = iCoverLeft; this.oWebControl.JS_SetWndCover("left", iCoverLeft); } if (this.iLastCoverTop != iCoverTop) { console.log("iCoverTop: " + iCoverTop); this.iLastCoverTop = iCoverTop; this.oWebControl.JS_SetWndCover("top", iCoverTop); } if (this.iLastCoverRight != iCoverRight) { console.log("iCoverRight: " + iCoverRight); this.iLastCoverRight = iCoverRight; this.oWebControl.JS_SetWndCover("right", iCoverRight); } if (this.iLastCoverBottom != iCoverBottom) { console.log("iCoverBottom: " + iCoverBottom); this.iLastCoverBottom = iCoverBottom; this.oWebControl.JS_SetWndCover("bottom", iCoverBottom); } }, //关闭所有的播放画面 close_all(){ this.oWebControl.JS_RequestInterface({ funcName: "stopAllPreview" }).then(function (oData) { console.log(JSON.stringify(oData ? oData.responseMsg : '')) }); }, }, watch:{ cameraIndexCode(n){ this.startRealPlay(); }, screenWidth(n,o){ this.videoWidth = this.$refs.divPlugin.offsetWidth; this.videoHeight = this.$refs.divPlugin.offsetHeight; this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); this.resizewindow(n,this.screenHeight); this.setWndCover(); }, screenHeight(n,o){ this.videoWidth = this.$refs.divPlugin.offsetWidth; this.videoHeight = this.$refs.divPlugin.offsetHeight; this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); this.resizewindow(this.screenWidth,n); this.setWndCover(); }, //海康的视频播放插件是默认最高层级这样会导致页面中的弹框等被遮挡，定义一个全局的变量videohide //当弹框出现时 视频插件隐藏，解决此问题。 '$store.state.videohide'(n,o){ if(n){ this.oWebControl.JS_HideWnd(); }else if(!n){ this.oWebControl.JS_ShowWnd(); } }, videoDialog(n){ if(n){ this.initPlugin(); } } } }; .video-player{ width: 100%; height: 100%; .divPlugin{ width: 100%; height: 100%; color:red; display: flex; justify-content: center; align-items: center; font-size: 18px; } .down{ width: 100%; height: 100%; color:red; display: flex; justify-content: center; align-items: center; font-size: 18px; a{ color:red; } } } 复制代码 补充：本代码封装的是海康demo代码抽离出来播放器组件，没有任何后台交互请求，只要把需要的相关参数传进来，直接调用就可以了。 如有问题，欢迎探讨，如果满意，请手动点赞，谢谢！🙏 |
【本文地址】
公司简介
联系我们