1.公司需要展示海康摄像头的预览画面
2.经过我两天的搜索资料加尝试,几种方式
2.1后端转码,前端调接口取太麻烦,对服务器负荷大
2.2 vlc插件对rtsp取流 高版本的各种浏览器不支持了vlc插件
2.3 WEB无插件开发包 V3.2 需要支持websocket,不是所有海康设备都支持,而且要自己去开启这个配置
2.4 WEB3.0控件开发包 V3.0 这个原理和vlc插件一模一样,谁会特意下个低版本谷歌
2.5 WEB3.3控件开发包 V3.3 从海康描述来说,非常适合,然后开始钻研,用了一个三天左右,成功迁移到vue项目,并实现预览,本来还要实现在预览画面上配置smart事件的区域,但是这个画面层级太高,我完全无法在画面上加个canvas,然后在canvas上作图.最终效果如下,切换通道可以切换画面
海康插件下载地址海康开放平台
1.把压缩包解压后,把
webVideoCtrl.js
jsVideoPlugin-1.0.0.min.js
jquery-1.7.1.min.js三个文件拷贝到自己项目的src/utils文件夹下,然后你准备在哪个页面做预览效果,就在这个页面引入这三个js文件,webVideoCtrl.js的代码是需要改动的(改动是因为它本身是针对html也就是压缩包那样的结构去做的,现在为了适配我的vue,需要改代码,如果你直接使用原html页面,那本文章就不需要参考,你可以demo文件夹直接放在public下,然后vue中跳转,地址就是/demo/index.html,最终会指向public/demo/index.html,然后把除了画面以外的所有样式都改为不可见,注意不能把多余的登陆预览回放组件删掉,否则会有很多调不通的报错),jsVideoPlugin-1.0.0.min.js的代码不需要改动,jquery-1.7.1.min.js也不需要改动
这边我为了修改webVideoCtrl.js先用idea打开然后格式化了这个文件,格式化之后,里面会有if else导致的报错 比如if(a) b else c;把它换行成
if(a) b
else c 就是如果不用大括号包起来,if和else代码不能在同一行
vue页面代码如下
<template> <div class='app-container'> <el-form ref='ruleForm' :model='ruleForm' :rules='ruleFormRules' label-width='80px' > <el-form-item label='通道' prop='enabled'> <template slot-scope="scope"> <el-select v-model="ruleForm.monitorPointId" placeholder="请选择通道" filterable size="small" @change="regetRule" > <el-option v-for="cameraChannel in points" :key="cameraChannel.id" :label="cameraChannel.name" :value="cameraChannel.id" /> </el-select> </template> </el-form-item> <el-tabs v-model="algorithmId" @tab-click="handleClick"> <el-tab-pane :label="item.name" :name="item.id" v-for="(item,index) in algorithms" :key="index" ></el-tab-pane> </el-tabs> <el-form-item label='是否启用' prop='enabled'> <el-switch v-model="ruleForm.enabled" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> </el-form-item> <el-form-item label='区域规则' class="plugin" prop='coordinates'> <div style="position: relative"> <div id="divPlugin" width="250" height="250" class="plugin" style="position: relative;top: 0; left: 250px;z-index:-1;pointer-events: none"></div> <canvas ref="canvas0" class="plugin" width="250" height="250" @mousedown="mouseDown" style="pointer-events: none;z-index:3;position: absolute;top: 0; left: 0;background-color: rgba(255, 255, 255, 0.5);border: 1px solid rgb(255, 204, 0); cursor: default;"></canvas> </div> </el-form-item> <el-form-item label='绘制' prop='screenSize'> <el-button type="info" @click="startDraw">开始绘制</el-button> <el-button type="info" @click="stopDraw">停止绘制</el-button> <el-button type="info" @click="clearDraw">清除绘制</el-button> </el-form-item> <el-form-item label='目标检测' prop='detectionTarget'> <el-checkbox name="human" v-model="humanCheck">人类</el-checkbox> <el-checkbox name="vehicle" v-model="vehicleCheck">车辆</el-checkbox> </el-form-item> <el-form-item label='方向' prop='directionSensitivity' v-if="algCode==='LineDetection'"> <el-select v-model="ruleForm.directionSensitivity" placeholder="请选择"> <el-option v-for="item in directionList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label='灵敏度' prop='sensitivityLevel'> <el-slider v-model="ruleForm.sensitivityLevel" :min="1" show-input></el-slider> </el-form-item> <el-form-item label='时间阈值' prop='timeThreshold' v-if="algCode==='FieldDetection'||algCode==='LineDetection'"> <el-slider v-model="ruleForm.timeThreshold" show-input :max="10"></el-slider> </el-form-item> </el-form> <div slot='footer' class='dialog-footer'> <el-button :loading='buttonLoading' type='primary' @click='submitRuleForm'>确 定</el-button> <el-button @click='rulecancel'>取 消</el-button> </div> </div></template><script> import { addByServerIdAndAlgId,addByServerIdAndPointId,deleteByServerIdAndPointId,deleteByServerIdAndAlgId,setRule,addAlgorithmServer, delAlgorithmServer, getAlgorithmServer, listAlgorithmServer, updateAlgorithmServer,getRuleByServerIdAndAlgIdAndPointId } from '@/api/alg/algorithmServer' import { listMonitorPointAll } from '@/api/alg/monitorPoint'; import { listAlgorithmAll } from '@/api/alg/algorithm'; import $ from '@/utils/webVideoCtrl'; import a from '@/utils/jsVideoPlugin-1.0.0.min'; import b from '@/utils/jquery-1.7.1.min'; import axios from "axios";export default { name: 'smartEvent', data() { return { points:[], algorithms:[], directionList:[{label:'左->右',value:"left-right"},{label:'左<->右',value:"any"},{label:'左<-右',value:"right-left"}], algCode:'', humanCheck:false, vehicleCheck:false, id:null, algorithmId:'', activeName:0, channelFilterValue:'', algFilterValue:'', AllPointList:[], ShowPointList:[], AllAlgList:[], ShowAlgList:[], // 按钮loading buttonLoading: false, // 遮罩层 loading: true, // 导出遮罩层 exportLoading: false, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 算法服务器表格数据 algorithmServerList: [], // 弹出层标题 title: '', // 是否显示弹出层 open: false, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, name: undefined, ip: undefined, }, // 表单参数 form: { id: undefined, name: undefined, ip: undefined, port: undefined, username: undefined, password: undefined, updateTime: undefined, createTime: undefined, updateBy: undefined, createBy: undefined, delFlag: undefined, algorithms: [], points:[], }, actionArr: [], ruleForm:{ sensitivityLevel:50, monitorPointId:undefined, detectionTarget:undefined, screenSize: undefined, timeThreshold: 5, coordinates: undefined, enabled:false }, drawFlag:false, openRule:false, ruleFormRules:{ monitorPointId: [ { required: true, message: '通道不能为空', trigger: 'blur' } ], }, // 表单校验 rules: { id: [ { required: true, message: '不能为空', trigger: 'blur' } ], name: [ { required: true, message: '名称不能为空', trigger: 'blur' } ], ip: [ { required: true, message: 'ip不能为空', trigger: 'blur' } ], port: [ { required: true, message: 'port不能为空', trigger: 'blur' } ], username: [ { required: true, message: '账号不能为空', trigger: 'blur' } ], password: [ { required: true, message: '密码不能为空', trigger: 'blur' } ], } } }, created() { }, destroyed(){ WebVideoCtrl.I_DestroyPlugin(); }, mounted(){ this.serverId=this.$route.query.serverId; getAlgorithmServer({id:this.serverId}).then((res)=>{ this.points=res.data.points; this.algorithms=res.data.algorithms; if (res.data.points.length!=0){ this.ruleForm.monitorPointId=res.data.points[0].id; } if(res.data.algorithms.length!=0){ this.algorithmId=res.data.algorithms[0].id; } this.$forceUpdate; WebVideoCtrl.I_InitPlugin({ bWndFull: false, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持 iWndowType: 1, bDebugMode: true, cbInitPluginComplete: function () { WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => { console.log("插件初始化") // 检查插件是否最新 WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => { if (bFlag) { alert("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！"); } }); }, () => { alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！"); axios.get('/file/HCWebSDKPlugin.exe',{ responseType: 'blob' }).then(res => { console.log(res); const url = window.URL.createObjectURL(new Blob([res.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'HCWebSDKPlugin.exe'); document.body.appendChild(link); link.click(); }) }); } }); if (this.algorithmId&&this.ruleForm.monitorPointId){ console.log("预览初始化") this.getRule(); }; }) }, methods: { handleClick(tab, event){ for(let i =0;i<this.algorithms.length;i++){ let item=this.algorithms[i]; if (item.id==this.algorithmId){ this.algCode=item.code; break; } } this.getRule(); }, startDraw(){ console.log("开启绘制") this.drawFlag=true; // this.rtsp(); }, clearDraw(){ const canvasDraw0 = this.$refs.canvas0; const ctx=canvasDraw0.getContext('2d'); ctx.clearRect(0, 0, canvasDraw0.width, canvasDraw0.height); this.actionArr=[]; }, stopDraw(){ if (this.drawFlag){ console.log(this.actionArr); console.log(this.algCode); if(this.actionArr.length!==2&&this.algCode==='LineDetection'){ alert("越界告警需要两个坐标"); return; }else if(this.actionArr.length!==4&&this.algCode!=='LineDetection'){ alert("区域需要四个坐标点"); return; } } this.drawFlag=false; }, drawCircle(x, y){ }, mouseDown(e){ console.log(e); if(e.buttons==1&&this.drawFlag){ if(this.actionArr.length>=4){ return; } this.actionArr.push({x:e.offsetX,y:e.offsetY}) this.drawActionArr(); } }, mouseMove(e){ console.log(e); }, filterAlg(){ this.ShowAlgList=this.AllAlgList.filter(function (element,index,array){ return element.name.search(e)!=-1; }) }, filterChannel(e){ this.ShowPointList=this.AllPointList.filter(function (element,index,array){ return element.name.search(e)!=-1; }) }, handleAlgAdd(index){ let element = this.ShowAlgList[index]; let find=this.form.algorithms.find((value => value.id==element.id)); if (!find){ addByServerIdAndAlgId({algorithmId:element.id,serverId:this.id}).then(response=>{ this.form.algorithms.push(element); }) } }, handleChannelAdd(index){ let element = this.ShowPointList[index]; let find=this.form.points.find((value => value.id==element.id)); if (!find){ addByServerIdAndPointId({pointId:element.id,serverId:this.id}).then(response=>{ this.form.points.push(element); }) } }, drawActionArr(){ if (this.actionArr.length>0){ const canvasDraw0 = this.$refs.canvas0; const ctx=canvasDraw0.getContext('2d'); ctx.fillStyle="black"; ctx.clearRect(0, 0, canvasDraw0.width, canvasDraw0.height) for (let i = 0; i <this.actionArr.length ; i++) { ctx.beginPath(); ctx.arc(this.actionArr[i].x,this.actionArr[i].y,5,0,2*Math.PI,true); ctx.fill(); ctx.closePath(); ctx.font="20px Georgia"; ctx.fillText(i+1,this.actionArr[i].x,this.actionArr[i].y) } ctx.beginPath(); ctx.moveTo(this.actionArr[0].x,this.actionArr[0].y); for (let i = 1; i <this.actionArr.length ; i++) { ctx.lineTo(this.actionArr[i].x,this.actionArr[i].y); ctx.moveTo(this.actionArr[i].x,this.actionArr[i].y); if (i==this.actionArr.length-1){ ctx.lineTo(this.actionArr[0].x,this.actionArr[0].y); } } ctx.stroke() ctx.closePath(); } }, regetRule(e){ this.getRule(); }, getRule(){ getRuleByServerIdAndAlgIdAndPointId({serverId:this.serverId,algorithmId:this.algorithmId,pointId:this.ruleForm.monitorPointId}).then(response => { this.clearDraw(); this.humanCheck=false; this.vehicleCheck=false; if (response.data){ this.ruleForm = response.data; this.actionArr=this.ruleForm.coordinates?this.ruleForm.coordinates.map(function(value) { return {x:parseInt(value.x)/4,y:parseInt(value.y)/4} }):[]; this.drawActionArr(); if (response.data.detectionTarget) { if (response.data.detectionTarget === 'human') { this.humanCheck = true; this.vehicleCheck = false; } else if (response.data.detectionTarget === 'vehicle') { this.humanCheck = false; this.vehicleCheck = true; } else if (response.data.detectionTarget === 'human,vehicle') { this.humanCheck = true; this.vehicleCheck = true; } } this.$forceUpdate(); console.log("ruleForm") console.log(this.ruleForm) this.startView(response.data.point); }else { console.log("没返回值") this.ruleForm ={ monitorPointId:this.ruleForm.monitorPointId, serverId:this.serverId, algorithmId:this.algorithmId, sensitivityLevel:50, detectionTarget:undefined, screenSize: undefined, timeThreshold: 5, coordinates: undefined, enabled:false }; } }); }, startView(option){ console.log("走到预览方法里") if (!option||!option.username||!option.password||!option.ip){ alert("监控点数据不全,无法预览") return; } //获取预览画面 var oLiveView = { iProtocol: 1, // protocol 1：http, 2:https szIP: option.ip, // protocol ip szPort: "80", // protocol port szUsername: option.username, // device username szPassword: option.password, // device password iStreamType: 1, // stream 1：main stream 2：sub-stream 3：third stream 4：transcode stream iChannelID: option.channelId?option.channelId:1, // channel no bZeroChannel: false // zero channel }; let isExists = WebVideoCtrl.findDeviceIndexByIP(option.ip); console.log("是否登陆过") console.log(isExists!==-1) if (isExists!==-1){ var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort; var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0); console.log("窗口是否在播放") console.log(oWndInfo != null) if (oWndInfo != null) {// 已经在播放了，先停止 WebVideoCtrl.I_Stop({iWndIndex:0, success: function () { console.log("停止成功") setTimeout(function () { WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, { iWndIndex:0, iStreamType: oLiveView.iStreamType, iChannelID: oLiveView.iChannelID, bZeroChannel: oLiveView.bZeroChannel }); }, 1000); } }); } else { setTimeout(function () { WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, { iWndIndex:0, iStreamType: oLiveView.iStreamType, iChannelID: oLiveView.iChannelID, bZeroChannel: oLiveView.bZeroChannel }); }, 1000); } return; } WebVideoCtrl.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, { success: function (xmlDoc) { console.log("登陆成功") // 开始预览 var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort; var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0); console.log("窗口是否在播放") console.log(oWndInfo != null) if (oWndInfo != null) {// 已经在播放了，先停止 WebVideoCtrl.I_Stop({iWndIndex:0, success: function () { console.log("停止播放") setTimeout(function () { WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, { iWndIndex:0, iStreamType: oLiveView.iStreamType, iChannelID: oLiveView.iChannelID, bZeroChannel: oLiveView.bZeroChannel }); }, 1000); } }); } else { setTimeout(function () { WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, { iWndIndex:0, iStreamType: oLiveView.iStreamType, iChannelID: oLiveView.iChannelID, bZeroChannel: oLiveView.bZeroChannel }); }, 1000); } }, error: function (oError) { if (2001 === status) { var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort; var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0); if (oWndInfo != null) {// 已经在播放了，先停止 WebVideoCtrl.I_Stop({iWndIndex:0, success: function () { console.log("停止播放成功") setTimeout(function () { WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, { iWndIndex:0, iStreamType: oLiveView.iStreamType, iChannelID: oLiveView.iChannelID, bZeroChannel: oLiveView.bZeroChannel, }); }, 1000); } }); } else { setTimeout(function () { WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, { iWndIndex:0, iStreamType: oLiveView.iStreamType, iChannelID: oLiveView.iChannelID, bZeroChannel: oLiveView.bZeroChannel }); }, 1000); } }else { console.log("登陆失败") console.log(oLiveView) console.log(oError); console.log(status); } } }); }, handleAlgRemove(index){ this.form.algorithms.splice(index,1); }, handlePointRemove(index){ this.form.points.splice(index,1); }, showPointers(row){ this.algCode=row.code?row.code:""; this.algorithmId=row.id; this.openRule=true; this.rulereset(); }, // 取消按钮 cancel() { this.open = false this.reset() }, // 取消按钮 rulecancel() { this.rulereset() this.openRule = false }, // 表单重置 reset() { this.form = { id: undefined, name: undefined, ip: undefined, port: undefined, username: undefined, password: undefined, updateTime: undefined, createTime: undefined, updateBy: undefined, createBy: undefined, delFlag: undefined, algorithms: [], points:[], } this.resetForm('form') }, rulereset() { this.ruleForm = { sensitivityLevel:50, monitorPointId:undefined, detectionTarget:undefined, screenSize: undefined, timeThreshold: 5, coordinates: undefined, enabled:false } this.clearDraw(); this.resetForm('ruleForm') }, /** 修改按钮操作 */ handleUpdate(row) { this.id=row.id; this.loading = true this.reset() const id = row.id || this.ids getAlgorithmServer({ id: id }).then(response => { this.loading = false this.form = response.data this.open = true this.title = '修改算法服务器' }) }, /** 提交按钮 */ submitForm() { this.$refs['form'].validate(valid => { if (valid) { this.buttonLoading = true if (this.form.id != null) { updateAlgorithmServer(this.form).then(response => { this.$modal.msgSuccess('修改成功') this.open = false this.getList() }).finally(() => { this.buttonLoading = false }) } else { addAlgorithmServer(this.form).then(response => { this.$modal.msgSuccess('新增成功') this.open = false this.getList() }).finally(() => { this.buttonLoading = false }) } } }) }, submitRuleForm() { if(this.drawFlag){ alert("请先完成绘制"); return; } this.$refs['ruleForm'].validate(valid => { if (valid) { this.buttonLoading = true if (!this.humanCheck&&!this.vehicleCheck){ this.ruleForm.detectionTarget='all' } else if(this.humanCheck&&!this.vehicleCheck){ this.ruleForm.detectionTarget='human' }else if(!this.humanCheck&&this.vehicleCheck){ this.ruleForm.detectionTarget='vehicle' }else { this.ruleForm.detectionTarget='human,vehicle' } if (this.actionArr.length!==0){ this.ruleForm.coordinates= this.actionArr.map(function(value) { return {x:4*value.x,y:4*value.y} }) } setRule(this.ruleForm).then(response => { this.$modal.msgSuccess('新增成功') this.openRule = false this.getList() }).finally(() => { this.buttonLoading = false }) } }) }, /** 导出按钮操作 */ handleExport() { this.$download.excel('/alg/algorithmServer/export', this.queryParams) } }}</script><style scoped>.hide { display: none;}.item { height: 30px; line-height: 30px; margin: 0 15px;}.plugin { width: 250px; height: 250px;}.channel-list { max-height: 660px; overflow: scroll;}::-webkit-scrollbar { width: 5px; height: 5px;}::-webkit-scrollbar-track { width: 6px; background: none; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em;}::-webkit-scrollbar-thumb { background-color: rgba(144, 147, 153, .5); background-clip: padding-box; min-height: 28px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; transition: background-color .3s; cursor: pointer;}::-webkit-scrollbar-thumb:hover { background-color: rgba(144, 147, 153, .3);}.view { min-width: 1120px; padding: 10px 15px;}</style>
webVideoCtrl.js主要修改初始化插件的代码,原先有个获取dirName方法就是获取webVideoCtrl.js自己的文件路径前缀,通过这个路径拼接再去找到jsVideoPlugin.js,但是vue结构下打包后这个文件路径获取肯定不对,所有我把webVideoCtrl.js和jsVideoPlugin.js放到utils里,然后通过require([./xxx.js])的方法在webVideoCtrl.js中引入jsVideoPlugin.js,注意它是把整个jsVideoPlugin.js存到了自身的window.JSvideoPlugin变量中,方便之后调用,然后它这边还有个值得注意的是窗口号,因为我只需要单窗口,所有我的窗口号传的都0;
this.I_InitPlugin = function(options) { m_utilsInc.extend(m_options, options) if ('object' === typeof exports && typeof module !== 'undefined') { require([ './jsVideoPlugin-1.0.0.min.js'], function(o) { window.JSVideoPlugin = o.JSVideoPlugin if (options.cbInitPluginComplete) { options.cbInitPluginComplete() } }) } else if ('function' === typeof define && define.amd) { require([ './jsVideoPlugin-1.0.0.min.js'], function(o) { window.JSVideoPlugin = o.JSVideoPlugin if (options.cbInitPluginComplete) { options.cbInitPluginComplete() } }) } else { m_utilsInc.loadScript( './jsVideoPlugin-1.0.0.min.js', function() { if (options.cbInitPluginComplete) { options.cbInitPluginComplete() } }) } window.addEventListener('resize', function() { if (m_pluginOBJECT !== null) { var oElem = $('#' + m_options.szContainerID) m_pluginOBJECT.JS_Resize(oElem.width(), oElem.height()) } }) window.addEventListener('unload', function() { }) window.addEventListener('scroll', function() { }) }