vue集成海康威视摄像头webVideoCtrl.js
项目上需要在web页面上集成海康威视摄像头监控页面，通过与海康威视sdk开发联系，获得了一份demodemo中的结构目录├── cn│├── demo-easy.html│├── demo.html│├── demo-iframe.html│├── demo.js│├── demo-requirejs.html│├── demo-seajs.h...
·
项目上需要在web页面上集成海康威视摄像头监控页面，通过与海康威视sdk开发联系，获得了一份demo，码云地址（包含demo与vue） 具体海康的demo与vue的demo，请移步码云，https://gitee.com/yushi6310/webVideoCtrl
demo中的结构目录
├── cn
│ ├── demo-easy.html
│ ├── demo.html
│ ├── demo-iframe.html
│ ├── demo.js
│ ├── demo-requirejs.html
│ ├── demo-seajs.html
│ ├── iframe.html
│ └── sfy_demo.html
├── codebase
│ ├── jsPlugin-1.0.0.min.js
│ ├── playctrl
│ │ ├── AudioRenderer.js
│ │ ├── Decoder.js
│ │ ├── Decoder.js.mem
│ │ ├── DecodeWorker.js
│ │ └── SuperRender.js
│ ├── transform
│ │ ├── SystemTransform.js
│ │ ├── SystemTransform.js.mem
│ │ └── systemTransform-worker.min.js
│ ├── WebComponentsKit.exe
│ └── webVideoCtrl.js
├── demo.css
├── index.html
├── jquery-1.7.1.min.js
├── require-2.3.3.min.js
└── sea-3.0.1.min.js
这个demo有浏览器要求，建议使用ie11
直接打开demo，配置摄像头的相关信息（ip地址啥的），可以直接在浏览器上实时预览摄像头信息，
但 在vue中直接引用webVideoCtrl.js时，实时预览失败，同时控制摄像头转动的功能也是失败的 ，经过几天的排查，修改部分webVideoCtrl.js源码，在vue中终于可以使用了
修改后的代码下载
修改后的webVideoCtrl.js代码
请在index.html中将这个js文件引进来
下面介绍vue中引用webVideoCtrl.js
<template>
<div>
<el-row>
<el-col :span="12">
<div id="divPlugin" class="plugin"></div>
<br/>
<div>
<el-form :inline="true" :model="hkvInfo" class="demo-form-inline">
<el-row>
<el-col>
<el-form-item label="ip">
<el-input v-model="hkvInfo.ip" placeholder="ip"></el-input>
</el-form-item>
<el-form-item label="port">
<el-input v-model="hkvInfo.port" placeholder="port"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<div>
<el-form-item label="username">
<el-input v-model="hkvInfo.username" placeholder="username"></el-input>
</el-form-item>
<el-form-item label="password">
<el-input v-model="hkvInfo.password" placeholder="password"></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item>
<el-button type="primary" :loading="loginLoading" @click="onLogin">登录</el-button>
<el-button type="primary" :loading="startPlayLoading" @click="clickStartRealPlay">开始预览</el-button>
<el-button type="primary" @click="clickStopRealPlay">停止预览</el-button>
<el-button type="primary" @click="onLogout">退出</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div>
<label>数字通道列表: </label>
<el-tag type="success" class="my-tag" v-for="(item,index) in hkvInfo.channels" :key="index">{{item}}</el-tag>
</div>
</el-col>
<el-col :span="12">
<div class="el-button-group ">
<div class="el-button primary" @mousedown="mouseDownPTZControl(5)" @mouseup="mouseUpPTZControl">左上</div>
<div class="el-button primary" @mousedown="mouseDownPTZControl(1)" @mouseup="mouseUpPTZControl">向上</div>
<div class="el-button primary" @mousedown="mouseDownPTZControl(7)" @mouseup="mouseUpPTZControl">右上</div>
</div>
<br/>
<div class="el-button-group ">
<div class="el-button primary" @mousedown="mouseDownPTZControl(3)" @mouseup="mouseUpPTZControl">向左</div>
<div class="el-button primary" @mousedown="mouseDownPTZControl(9)" @mouseup="mouseUpPTZControl">自动</div>
<div class="el-button primary" @mousedown="mouseDownPTZControl(4)" @mouseup="mouseUpPTZControl">向右</div>
</div>
<br/>
<div class="el-button-group ">
<div class="el-button primary" @mousedown="mouseDownPTZControl(6)" @mouseup="mouseUpPTZControl">左下</div>
<div class="el-button primary" @mousedown="mouseDownPTZControl(2)" @mouseup="mouseUpPTZControl">向下</div>
<div class="el-button primary" @mousedown="mouseDownPTZControl(8)" @mouseup="mouseUpPTZControl">右下</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import {WebVideoCtrl} from '../../static/webVideoCtrl.js'
export default {
data() {
return {
hkvInfo: {
ip: '1.1.1.1',//海康威视摄像头/硬盘录像机的ip地址
port: '81',//海康威视摄像头/硬盘录像机的端口
username: 'admin',//海康威视摄像头/硬盘录像机的用户名
password: 'admin12345',//海康威视摄像头/硬盘录像机的密码
channels: [],//海康威视摄像头/硬盘录像机的通道
},
mySelectWnd: 0,//当前选中的窗口
g_bPTZAuto: false,
iProtocol: 1,
loginLoading: false,
startPlayLoading: false,
iStreamType: 1,
bZeroChannel: false,
iRtspPort: 0
}
},
created: function () {
},
mounted: function () {
this.videoInitPlugin(); // 初始化video界面
},
destroyed: function () {
this.clickStopRealPlay();
this.onLogout();
},
methods: {
onLogin() {
var that = this;
that.loginLoading = true;
// 登录设备
WebVideoCtrl.I_Login(that.hkvInfo.ip, that.iProtocol, that.hkvInfo.port, that.hkvInfo.username, that.hkvInfo.password, {
async: false,
success: function (xmlDoc) {
// console.log('xmlDoc2', xmlDoc);//不能删除
//TODO 获取通道信息
that.getChannelInfo();
that.getDevicePort(that.hkvInfo.ip + "_" + that.hkvInfo.port);
that.loginLoading = false;
that.$message({
showClose: true,
message: '登录成功',
type: 'success'
});
},
error: function () {
that.loginLoading = false;
that.$message({
showClose: true,
message: '登录失败',
type: 'error'
});
}
});
},
onLogout() {
this.hkvInfo.channels = [];
var szDeviceIdentify = this.hkvInfo.ip + "_" + this.hkvInfo.port;
var iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
if (0 == iRet) {
this.$message({
showClose: true,
message: '退出成功',
type: 'success'
});
} else {
this.$message({
showClose: true,
message: '退出失败',
type: 'error'
});
}
},
clickStartRealPlay() {
// 开始预览
var that = this;
that.startPlayLoading = true;
var szDeviceIdentify = that.hkvInfo.ip + "_" + that.hkvInfo.port;
var j = that.hkvInfo.channels.length > 4 ? 4 : that.hkvInfo.channels.length;
for (var i = 0; i < j; i++) {
setTimeout(that.startRealPlay(szDeviceIdentify, i, that.hkvInfo.channels[i]), 500);
}
that.startPlayLoading = false;
},
videoInitPlugin: function () {
var iRet = WebVideoCtrl.I_CheckPluginInstall();
if (iRet === -1) {
alert('您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装');
return;
}
this.initPlugin()
},
initPlugin: function () {
var that = this;
WebVideoCtrl.I_InitPlugin(500, 300, {
bWndFull: true,//是否支持单窗口双击全屏，默I_CheckPluginInstall
iWndowType: 2,
myCbSelWnd: function (xmlStr) { //自己新增的方法
var jsonObj = that.$x2js.xml2js(xmlStr);
var szInfo = "当前选择的窗口编号：" + jsonObj.RealPlayInfo.SelectWnd;
this.mySelectWnd = jsonObj.RealPlayInfo.SelectWnd;
console.log(szInfo);
},
cbInitPluginComplete: function () {
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
// 检查插件是否最新
if (WebVideoCtrl.I_CheckPluginVersion() === -1) {
alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！");
return;
}
}
});
},
getDevicePort: function (szDeviceIdentify) {
var oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify);
this.iRtspPort = oPort.iRtspPort;
},
startRealPlay: function (szDeviceIdentify, iWndIndex, iChannelID) {
var that = this;
WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
iRtspPort: that.iRtspPort,
iWndIndex: iWndIndex,
iStreamType: 1,
iChannelID: iChannelID,
bZeroChannel: that.bZeroChannel,
success: function () {
that.$notify({
title: '成功',
message: '开始预览通道' + iChannelID + '成功',
type: 'success'
});
},
error: function (status, xmlDoc2) {
console.log(xmlDoc2)//不能删除
that.$notify({
title: '失败',
message: '开始预览通道' + iChannelID + '失败',
type: 'error'
});
if (status === 403) {
console.log("szInfo 设备不支持Websocket取流！");
} else {
console.log("开始预览失败 ", status, xmlDoc2);
}
}
});
},
clickStopRealPlay: function () {
var j = this.hkvInfo.channels.length > 4 ? 4 : this.hkvInfo.channels.length;
for (var i = 0; i < j; i++) {
setTimeout(this.stopRealPlay(i), 1000);
}
},
stopRealPlay: function (iWndIndex) {
var that = this;
WebVideoCtrl.I_Stop({
iWndIndex: iWndIndex,
success: function () {
that.$notify({
title: '成功',
message: '停止预览窗口' + iWndIndex + '成功',
type: 'success'
});
},
error: function () {
that.$notify({
title: '失败',
message: '停止预览窗口' + iWndIndex + '失败',
type: 'error'
});
}
});
},
// 获取通道，实际上可以根据自己的项目，获取数字通道，模拟通道，零通道中的一个或多个，不用全部获取（提高效率）
getChannelInfo: function () {
var that = this;
var szDeviceIdentify = this.hkvInfo.ip + "_" + this.hkvInfo.port;
// debugger
// 数字通道
that.hkvInfo.channels = [];
WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
async: false,
mysuccess: function (xmlStr) {
console.log('mysuccess I_GetDigitalChannelInfo: ', xmlStr)
var jsonObj = that.$x2js.xml2js(xmlStr)
var list = jsonObj.InputProxyChannelStatusList.InputProxyChannelStatus;
for (var x = 0; x < list.length; x++) {
that.hkvInfo.channels.push(list[x].id);
}
},
success: function (xmlDoc) {
},
error: function (status, xmlDoc) {
console.log("获取数字通道失败");
}
}
);
// TODO 模拟通道
// 模拟通道
WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
async: false,
mysuccess: function (xmlStr) {
var jsonObj = that.$x2js.xml2js(xmlStr);
console.log("模拟通道mysuccess",xmlStr);
var list = jsonObj.VideoInputChannelList.VideoInputChannel;
for (var x = 0; x < list.length; x++) {
that.hkvInfo.channels.push(list[x].id);
}
},
success: function (xmlStr) {
console.log("模拟通道success",xmlStr);
},
error: function (status, xmlDoc) {
console.log("模拟通道error",xmlDoc);
}
});
// TODO 零通道
},
mouseDownPTZControl: function (iPTZIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
if (oWndInfo !== null) {
if (iPTZIndex === 9 && this.g_bPTZAuto) {
iPTZSpeed = 0;
} else {
this.g_bPTZAuto = false;
}
WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
iPTZSpeed: 4,
mysuccess: function (xmlDoc) {
console.log("I_PTZControl", xmlDoc);
if (iPTZIndex === 9 && this.g_bPTZAuto) {
console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！");
} else {
console.log(oWndInfo.szDeviceIdentify + " 开启云台成功！");
}
if (iPTZIndex === 9) {
this.g_bPTZAuto = !this.g_bPTZAuto;
}
},
error: function (status, xmlDoc) {
console.log(oWndInfo.szDeviceIdentify + " 开启云台失败！", status, xmlDoc);
}
});
}
},
mouseUpPTZControl: function () {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
if (oWndInfo !== null) {
WebVideoCtrl.I_PTZControl(1, true, {
success: function (xmlDoc) {
console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！", xmlDoc)
},
error: function (status, xmlDoc) {
console.log(oWndInfo.szDeviceIdentify + " 停止云台失败！", status, xmlDoc);
}
});
}
},
myDown(aa) {
console.log('ddd', aa);
}
}
}
</script>
<style scoped>
.plugin {
width: 500px;
height: 300px;
}
.my-tag {
margin-left: 3px;
}
.my-group-btn {
margin-top: 5px;
}
</style>
如果出现报错提示：
GetSelectWndInfo未定义等，相关报错信息，主要是你的js文件没有真正引入到你的项目中，请在index.html中也需要将这个js文件引进来
如果出现如下报错信息, 因为vue会对代码有严格的格式校验，直接引入js会报错，请在设置忽略对js的格式校验
是因为vue对js代码有格式校验，请设置忽略该js的校验，忽略方法如下：
如果报错说： addEventlistener的错误 提示is not a function， xxxxxxxx is not a function是因为你引用的不是我修改后的js代码
如果想显示多个摄像头录像信息，应该使用硬盘录像机
最终预览图片
如有疑问可以添加本人微信 yushi6310
前往低代码交流专区
更多推荐
23
0- 0
已为社区贡献2条内容
所有评论(0)