vue+海康威视web3.2无插件版本使用
vue+海康威视web3.2无插件版本使用：由于项目要求需要vue结合海康威视云台，于是就开始不停的踩坑之路海康威视的web3.0有插件版本不兼容高版本的浏览器只兼容ie11，巧的是自己的项目不兼容低版本浏览器以及ie11于是又翻了翻官网 有个web3.2无插件版本的 本着拿来主义就看了看文档搜了搜文章完美解决问题具体使用：使用的话，需要对自己项目打包（npm run build）把自己打包后的文
·
vue+海康威视web3.2无插件版本使用：
由于项目要求需要vue结合海康威视云台，于是就开始不停的踩坑之路 海康威视的web3.0有插件版本不兼容高版本的浏览器只兼容ie11，巧的是自己的项目不兼容低版本浏览器以及ie11 于是又翻了翻官网 有个web3.2无插件版本的 本着拿来主义 就看了看文档搜了搜文章 完美解决问题具体使用：
使用的话，需要对自己项目打包（npm run build）把自己打包后的文件放到跟nginx文件同一级的目录下  在nginx中的conf文件夹下找到nginx.conf文件 进行编辑
然后点击start 开始运行 点击stop停止运行
如果在任务管理器里边看到有nginx的运行则运行成功 或者你就直接在浏览器地址栏输入自己的id地址+端口号能运行就行
当然了，先要在官方提供的demo上测试一下子才行
还要记得配置自己和设备同一网段下的ip地址 比如设备的ip是192.168.1.1 自己的ip就要是192.168.1.XXX（自己定义）
demo上输入设备ip 端口号默认输入80（很重要） 用户 密码 点击登录即可 如果一开始登录不上的话 就再看看以上配置有没有配置好 还有就是前端引入的部分有没有引入正确 接下来就是操作代码部分了
我是把代码放在了public下的 在piblic下的index.html引入需要的文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
//主要引用的文件 到时候自己对应的找一下就好
<script src="./videoHK/jsPlugin-1.2.0.min.js"></script>
<script src="./videoHK/jquery-1.12.1.min.js"></script>
<script src="./videoHK/encryption/AES.js"></script>
<script src="./videoHK/encryption/cryptico.min.js"></script>
<script src="./videoHK/encryption/crypto-3.1.2.min.js"></script>
<script src="./videoHK/webVideoCtrl.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
然后webVideoCtrl.js全局引用之后就可以直接使用了，代码有点多 凑合看的吧
<template>
<div>
<div style="height:80px;padding-left:20px;padding-top:15px;display:flex">
<div style="">
<el-button type="primary" style="margin-right:20px" @click="dialogLogin = true">{{loginmessage == false ?'登录':loginName}}</el-button>
<el-button v-if="loginmessage" style="margin-right:20px" @click="onCancle">退出</el-button>
</div>
<div style="display:flex">
<p style="line-height:6px">预览通道：</p>
<el-select v-model="passageway" placeholder="请选择">
<el-option
v-for="item in channels"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</div>
<el-button type="primary" style="height:38px;margin-left:20px" @click="clickStartRealPlay">开始预览</el-button>
</div>
<div>
<el-row :gutter="20">
<el-col :span="4">
<div class="grid-content bg-purple">
<el-collapse v-model="activeNames">
<el-collapse-item name="1">
<template slot="title">
<span class="sp" :style="{
'color':loginmessage == true ?
'green':'black'}"><i class="el-icon-setting"></i>云台控制</span>
</template>
<div style="margin-bottom:10px">
<span>云台速度：</span>
<el-select id='ptzspeed' style="width:100px" v-model="yuntaiSpeed" placeholder="请选择云台速度">
<el-option
v-for="item in yuntaiSpeedOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div>
<div style="padding-left:35%;margin-bottom:10px">
<el-button type="primary" @mousedown.native.prevent='gotouchstart($event,21)' @mouseup.native.prevent="gotouchend($event,21)">前</el-button>
</div>
<div style="padding-left:15%;margin-bottom:10px">
<el-button type="primary" style="margin-right:19%" @mousedown.native.prevent="gotouchstart($event,23)" @mouseup.native.prevent="gotouchend($event,23)">左</el-button>
<el-button type="primary" @mousedown.native.prevent='gotouchstart($event,24)' @mouseup.native.prevent="gotouchend($event,24)">右</el-button>
</div>
<div style="padding-left:35%;margin-bottom:10px">
<el-button type="primary" @mousedown.native.prevent='gotouchstart($event,22)' @mouseup.native.prevent="gotouchend($event,22)">后</el-button>
</div>
</div>
<div style="padding-left:8px;">
<div class="camera">
<el-switch style="margin-right:15px" @change="cameraSwitch($event,3)" v-model="yushua" active-text="雨刷"></el-switch>
<el-switch v-model="dengguang" @change="cameraSwitch($event,2)" active-text="灯光"></el-switch>
</div>
<div class="camera">
<el-button @click='gotouchstart($event,14)'>缩</el-button>
<span class="T-camera">调焦</span>
<el-button @click='gotouchstart($event,13)'>伸</el-button>
</div>
<div class="camera">
<el-button @click='gotouchstart($event,11)'>近</el-button>
<span class="T-camera">聚焦</span>
<el-button @click='gotouchstart($event,12)'>远</el-button>
</div>
<div class="camera">
<el-button @click='gotouchstart($event,15)'>大</el-button>
<span class="T-camera">光圈</span>
<el-button @click='gotouchstart($event,16)'>小</el-button>
</div>
<el-form :inline="true" label-width="60px" :model="formCamera" class="demo-form-inline">
<el-form-item label="亮度">
<el-slider v-model="formCamera.brightValue" :max='10' @change="changeBrightness" style="width:100px" ></el-slider>
</el-form-item>
<el-form-item label="对比度">
<el-slider v-model="formCamera.contrastValue" :max='10' @change="changeBrightness" style="width:100px" ></el-slider>
</el-form-item>
<el-form-item label="饱和度">
<el-slider v-model="formCamera.saturationValue" :max='10' @change="changeBrightness" style="width:100px" ></el-slider>
</el-form-item>
<el-form-item label="色度">
<el-slider v-model="formCamera.hueValue" :max='10' @change="changeBrightness" style="width:100px" ></el-slider>
</el-form-item>
</el-form>
</div>
</el-collapse-item>
</el-collapse>
</div>
</el-col>
<el-col :span="20">
<div class="grid-content bg-purple" style="margin-bottom:10px">
<div style="height:200px">
<div style="font-weight:bold;margin-bottom:10px;padding-top:10px"><i class="el-icon-view"></i> 云台预览</div>
<div style="margin-bottom:10px;display:flex">
<div id="divPlugin" class="plugin"></div>
<div style="height:150px;border:1px dashed #000;width:260px" id="opinfo" >
<!-- {{infoMessage}} -->
</div>
</div>
</div>
</div>
<div class="grid-content bg-purple" id="con_lf_top_div">
<gojsTem ref="gojsTemplate"/>
</div>
</el-col>
<!-- <el-col :span="2"> -->
<!-- </el-col> -->
</el-row>
</div>
<el-dialog title="云台登录"
width="50%"
:visible.sync="dialogLogin">
<el-form :inline="true" label-width="100px" :model="formOnLoad" class="demo-form-inline">
<el-form-item label="设备IP">
<el-input v-model="formOnLoad.deviceAddress" placeholder="请输入设备IP"></el-input>
</el-form-item>
<el-form-item label="设备Port">
<el-input v-model="formOnLoad.port" placeholder="请输入设备Port"></el-input>
</el-form-item>
<el-form-item label="用 户">
<el-input v-model="formOnLoad.username" placeholder="请输入用户"></el-input>
</el-form-item>
<el-form-item label="密 码">
<el-input v-model="formOnLoad.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogLogin = false">取 消</el-button>
<el-button type="primary" @click="onLoad">登 录</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import $ from 'jquery'
export default {
components:{ gojsTem},
data() {
return {
objectWidth: 890,
objectHeight: 420,
dialogLogin:false,
stockNumber:'',
passageway:'',
passagewayOptions:[],
tableData:[],
yuntaiSpeed:1,
yuntaiSpeedOptions:[
{value:1,label:1},
{value:2,label:2},
{value:3,label:3},
{value:4,label:4},
{value:5,label:5},
{value:6,label:6},
{value:7,label:7},
],
brightValue:50,
contrastValue:50,
saturationValue:50,
hueValue:50,
ruiValue:50,
timeOutEvent:0,
formOnLoad:{
deviceAddress:'192.168.100.64',
port:'80',
username:'admin',
password:'jszx1234'
},
formCamera:{},
isRecord:false,
isView:false,
yushua:false,
dengguang:false,
loginmessage:false,
activeNames: ['1'],
isType: "2", //主码流和子码流判断
szDeviceIdentify:'',
deviceport:'', //设备端口
iRtspPort:'', //rts端口
channels:[],//预览通道
g_bPTZAuto:false,
fullscreen: false,
infoMessage:'',
dialogAGVtiao:false,
text:'关闭',
isControl:false,
agvCar:1,
apiOnload:false,
loginName:'admin'
}
},
mounted() {
let a = storage.get('username')
let b = storage.get('passageway')
let c = storage.get('channels')
if(a == undefined && b == undefined && c == undefined){
this.loginmessage = false
this.loginName = 'admin'
}else{
this.formOnLoad.username = a
this.passageway = b
this.channels = c
this.loginmessage = true
this.loginName = a
}
console.log(a,b,c,'=+=')
window.addEventListener("beforeunload", (e) => {
this.beforeunloadHandler(e);
});
//调用初始化方法
this.initWeb()
},
befordestroyed() {
window.removeEventListener("beforeunload", (e) => {
this.beforeunloadHandler(e);
});
},
methods: {
//初始化数据
initWeb(){
var vm=this;
var isSupport= window.WebVideoCtrl.I_SupportNoPlugin();
console.log(isSupport,"plugins");
// 检查插件是否已经安装过
var iRet = window.WebVideoCtrl.I_CheckPluginInstall();
console.log(iRet,"iRet");
if (-1 == iRet) {
alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
return;
}
// 初始化插件参数及插入插件
WebVideoCtrl.I_InitPlugin('100%', '100%', {
bWndFull: true, // 但窗口双击全屏
iPackageType: 2, // 封装格式 无插件只能是2
iWndowType: 1, // 分屏类型 1*1 2*2 ....
bNoPlugin: true, // 开启无插件模式
cbSelWnd: function (xmlDoc) {
g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
var szInfo = "当前选择的窗口编号：" + g_iWndIndex;
vm.showCBInfo(szInfo);
},
cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
var szInfo = "当前放大的窗口编号：" + iWndIndex;
if (!bFullScreen) {
szInfo = "当前还原的窗口编号：" + iWndIndex;
}
vm.showCBInfo(szInfo);
},
cbEvent: function (iEventType, iParam1, iParam2) {
if (2 == iEventType) {// 回放正常结束
vm.showCBInfo("窗口" + iParam1 + "回放结束！");
} else if (-1 == iEventType) {
vm.showCBInfo("设备" + iParam1 + "网络错误！");
} else if (3001 == iEventType) {
clickStopRecord(g_szRecordType, iParam1);
}
},
cbRemoteConfig: function () {
vm.showCBInfo("关闭远程配置库！");
},
cbInitPluginComplete: function () {
console.log("初始化成功！");
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
// 检查插件是否最新
if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！");
return;
}
}
});
},
// 格式化时间
dateFormat(oDate, fmt) {
var o = {
"M+": oDate.getMonth() + 1, //月份
"d+": oDate.getDate(), //日
"h+": oDate.getHours(), //小时
"m+": oDate.getMinutes(), //分
"s+": oDate.getSeconds(), //秒
"q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
"S": oDate.getMilliseconds()//毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
},
// 显示回调信息
showCBInfo(szInfo) {
szInfo = this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo ;
console.log(szInfo);
this.infoMessage = szInfo
//$("#cbinfo").html(szInfo + $("#cbinfo").html());
},
// 云台登录确定
onLoad(){
if (!this.formOnLoad.deviceAddress || !this.formOnLoad.port) {
return
}
let that = this
var szIP=that.formOnLoad.deviceAddress;
var szPort=that.formOnLoad.port;
var szUsername=that.formOnLoad.username;
var szPassword=that.formOnLoad.password;
var szDeviceIdentify=szIP+"_"+szPort;
that.szDeviceIdentify =szDeviceIdentify;
console.log(szIP,szPort,szUsername,szPassword)
var iRet = WebVideoCtrl.I_Login(that.formOnLoad.deviceAddress,1,that.formOnLoad.port,that.formOnLoad.username,that.formOnLoad.password,
{
success: function(xmlDoc) {
console.log('登录成功')
that.$message.success('登录成功')
that.dialogLogin = false
that.getChannelInfo() // 获取模拟通道
that.getDevicePort() // 获取端口 （影响不大）
//that.clickStartRealPlay() //开始预览
//api登录
that.houLoad()
that.loginmessage = true
that.showOPInfo(that.szDeviceIdentify + " 登录成功！")
that.loginName = this.formOnLoad.username
},
error: function (status, xmlDoc) {
console.log('登录失败')
that.showOPInfo(that.szDeviceIdentify + " 登录失败")
that.$message.error('登录失败')
that.loginmessage = false
}
});
if (-1 == iRet) {
that.$message.error(that.szDeviceIdentify+'已登录过！');
}
},
//后台调用登录的接口 可以忽略
houLoad(){
storage.set('username',this.formOnLoad.username)
let param = {
deviceAddress:this.formOnLoad.deviceAddress,
port:"8000",
username:this.formOnLoad.username,
password:this.formOnLoad.password
}
this.$axios
.posts("/api/HIKVISION/hCNet/login",param)
.then(res => {
if(res == true){
this.$message.success('登录成功')
// this.getChanInfos()
this.apiOnload = true
}
});
},
// 显示操作信息
showOPInfo(szInfo, status, xmlDoc) {
var szTip = "<div>" + this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo;
if (typeof status != "undefined" && status != 200) {
var szStatusString = $(xmlDoc).find("statusString").eq(0).text();
var szSubStatusCode = $(xmlDoc).find("subStatusCode").eq(0).text();
if ("" === szSubStatusCode) {
if("" === szSubStatusCode && "" === szStatusString){
szTip += "(" + status + ")";
}
else{
szTip += "(" + status + ", " + szStatusString + ")";
}
} else {
szTip += "(" + status + ", " + szSubStatusCode + ")";
}
}
szTip += "</div>";
console.log($,'显示切换窗口')
$("#opinfo").html(szTip + $("#opinfo").html());
console.log(szTip);
//$("#opinfo").html(szTip + $("#opinfo").html());
},
// 获取模拟媒体通道
getChannelInfo(){
let self = this
if (!self.szDeviceIdentify) {
return
}
WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
async: false,
success: function (xmlDoc) {
let oChannels = $(xmlDoc).find("VideoInputChannel");
console.log('获取模拟通道成功', oChannels)
$.each(oChannels, function (i) {
let id = $(this).find("id").eq(0).text(),
name = $(this).find("name").eq(0).text();
if (!name) {
name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
}
self.channels.push({
id: id,
name: name
})
});
console.log(self.channels,'获取通道')
self.passageway = self.channels[0].id
storage.set('passageway',self.channels[0].id)
storage.set('channels',self.channels)
},
error: function (status, xmlDoc) {
console.log('获取模拟通道失败', status, xmlDoc)
}
});
},
// 获取端口 不会对预览效果造成影响
getDevicePort(){
if (!this.szDeviceIdentify) {
return
}
var oPort = WebVideoCtrl.I_GetDevicePort(this.szDeviceIdentify);
console.log('获取通道端口号', oPort)
if (oPort != null) {
this.deviceport = oPort.iDevicePort;
this.iRtspPort= oPort.iRtspPort;
}
},
// 开始预览
startRealPlay(){
let self = this
console.log('点击startRealPlay',self.passageway,self.szDeviceIdentify)
WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {
iRtspPort: parseInt(self.iRtspPort, 10), // RTSP端口必须是int
iStreamType: 2, // 码流类型：1-主码流 必须int 2-子码流
iChannelID: parseInt(self.passageway, 10), // 播放通道 必须int
bZeroChannel: false, // 是否播放零通道 默认false
success: function () {
console.log("预览成功")
},
error: function (status, xmlDoc) {
console.log("预览失败", status, xmlDoc)
}
});
},
clickStartRealPlay(){
console.log(this.channels,'预览通道2')
console.log(this.szDeviceIdentify,'地址')
let self = this
let oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex)
// iChannelID = self.channels[0].id
self.startRealPlay()
if (oWndInfo != null) {// 已经在播放了，先停止
WebVideoCtrl.I_Stop({
success: function () {
self.startRealPlay();
}
});
} else {
self.startRealPlay();
}
},
// 退出
onCancle(){
if (null == this.szDeviceIdentify) {
return;
}
var iRet = WebVideoCtrl.I_Logout(this.szDeviceIdentify);
if (0 == iRet) {
this.$message.success('退出成功')
this.getChannelInfo();
this.getDevicePort();
this.loginmessage =false
this.apiOnload = false
storage.set('username','')
storage.set('passageway','')
storage.set('channels',[])
} else {
this.$message.success('退出失败')
this.loginmessage = true
}
},
// 离开
gotouchend(em,value){
if(this.yuntaiSpeed == ''){
this.$message.error('请选择云台速度')
}else{
let param = {
dwPTZCommand: value,
dwStartOrStop: 0,
dwSpeed: 0
}
this.$axios
.posts("/api/HIKVISION/hCNet/controlStop",param)
.then(res => {
});
}
},
// 长按
gotouchstart(em,value){
console.log('长按')
if(this.yuntaiSpeed == ''){
this.$message.error('请选择云台速度')
}else{
let param = {
dwPTZCommand: value,
dwStartOrStop: 0,
dwSpeed: this.yuntaiSpeed
}
this.$axios
.posts("/api/HIKVISION/hCNet/controlCamera",param)
.then(res => {
});
}
},
changeBrightness(val){
// console.log(val,'123')
// console.log(this.formCamera,'456')
// return
this.$axios
.posts("/api/HIKVISION/hCNet/setVideoEffect/"+this.passageway,this.formCamera)
.then(res => {
if(res == true){
console.log('设置成功')
}
});
},
cameraSwitch(em,value){
console.log(value,'123')
console.log(this.yushua,this.dengguang,'345')
if(this.yushua == true || this.dengguang == true){
let param = {
"dwPTZCommand": value,
"dwStartOrStop": 0,
"dwSpeed": 0
}
this.$axios
.posts("/api/HIKVISION/hCNet/controlCamera",param)
.then(res => {
});
}else if(this.yushua == false || this.dengguang == false){
let param = {
"dwPTZCommand": value,
"dwStartOrStop": 0,
"dwSpeed": 0
}
this.$axios
.posts("/api/HIKVISION/hCNet/controlStop",param)
.then(res => {
});
}
},
}
}
</script>
大概就这些，删除了一些不必要的代码，上下左右控制说实话，海康做不到，他自己的demo都报错 问客服 客服说是不兼容
这只有辛苦后端兄弟帮咱们解决一下子了
所以我们调用的是后端的接口
暂时我们项目需求就这些
有啥不懂可以私信我。。。。欢迎交流
总的使用来说，海康威视对前端不太友好，后端倒是好多语言都可以 c java等等都可以
也可以直接找官方客服 他们很好的
前往低代码交流专区
更多推荐
9
0- 0
已为社区贡献4条内容
所有评论(0)