WebSDK
•
前端
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页面代码如下
开始绘制
停止绘制
清除绘制
人类
车辆
确 定
取 消
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:'左{
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=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.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)
}
}
}
.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;
}
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() {
})
}
本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/40c32a2cd7.html
赞 (0)
爬虫 — App 爬虫（一）
« 上一篇
1天前
轻松获取图片和视频文件的Exif信息-Java篇
下一篇 »
1天前
相关推荐
-
mybatis-plus拦截器原理
目录 背景 1.使用 1.1 配置插件 1.2 使用 1.3分页使用 1.4 java拦截原理类图 2.mybatis-plus 插件原理分析 2.1 mapper信息注册 2.2…
-
java: 无法访问org.springframework.boot.SpringApplication 错误的类文件
java: 无法访问org.springframework.boot.SpringApplication 报错内容如下： 1.报错原因 报错信息里所说的java类文件版本。其实这个…
-
Spring中的AOP
Spring中的AOP 文章目录 Spring中的AOP AOP概述 相关术语 总结 作用 AOP概述 AOP(Aspect Programming) 是一种设计思想，是面向切面编…
-
logging.level的含义及设置 【java 日志 (logback、log4j)】
日志级别 trace<debug<info<warn<error<fatal 常用的有：debug，info，warn，error 通常我们想设置日志…
-
【网络编程】网络编程 和 Socket 套接字认识
✨个人主页：bit me👇 ✨当前专栏：Java EE初阶👇 目 录 🎧一. 网络编程基础🎺1. 为什么需要网络编程…
-
JDK 17 和JDK 8 相比增加了哪些新特性
JDK 17 新特性 JDK 17 和JDK 8 相比增加了哪些新特性 文章目录 JDK 17 新特性 前言 一、JDK17的新特性有哪些 ？ 二、新特性Java代码演示 1.Se…
-
【Maven】Maven的常用命令
目录 一、Maven的常用命令 1、compile 编译命令 2、test 测试命令 3 、clean 清理命令 4、package 打包命令 5、 install 安装命令 …
-
【计算机毕业设计】252餐饮管理系统的设计与实现
一、系统截图（需要演示视频可以私聊） 摘 要 互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。…
-
【Java】List集合去重的方式
List集合去重的方式 方式一：利用TreeSet集合特性排序+去重（有序） 方式二：利用HashSet的特性去重（无序） 方式三：利用LinkedHashSet去重（有序） 方式…
-
在android开发环境中，gradle 版本和 java 版本的对应关系
在android开发环境中，gradle 版本和 java 版本的对应关系 Gradle 版本 所支持的 JDK 版本 6.x JDK 8、JDK 11（仅限 Gradle 6.7…
