当前位置：个人在线分享 > 海康视频监控 基于web无插件开发包 3.2 实现预览、云台控制等功能(vue3)

海康视频监控 基于web无插件开发包 3.2 实现预览、云台控制等功能(vue3)

作者 : admin 本文共10177个字，预计阅读时间需要26分钟 发布时间： 2024-06-16 共1人阅读

  1. 实现过程

    1. 登入海康开发者平台下载 WEB无插件开发包 V3.2

    2. 在index.html文件中引入需要的JS开发包，注：开发包文件需要放在public 文件夹下:

      海康视频监控 基于web无插件开发包 3.2 实现预览、云台控制等功能(vue3)插图

    1. 配置nginx :将开发包的nginx1.10.2放在自己项目的同级目录下，项目频繁打包调试。

      1.    配置nginx的config本机地址和端口，root指向vue的打包文件dist.

  3. 配置自己的webVideo.js：详细配置如下：

    export function WebVideo() {
this.g_iWndIndex = 0//窗口索引
this.szDeviceIdentify = ''//设备标识(通道)
this.deviceport = ''//设备端口
this.rtspPort = ''//rtsp端口
this.channels = []//通道数组
this.ip = ''//ip地址
this.port = ''//端口号
this.username = ''//海康提供的监控登入用户名
this.password = ''//登入密码
this.init = function(ip, username, password) {
this.ip = ip
this.username = username
this.password = password
// 初始化插件参数及插入插件
WebVideoCtrl.I_InitPlugin(1160, 630, {
szColorProperty: 'plugin-background:#102749; sub-background:#102749; sub-border:#18293c; sub-border-select:red',
bWndFull: true, // 全屏
// iPackageType: 2,
iWndowType: 1, //分屏
bNoPlugin: true, // 支持无插件
cbInitPluginComplete: function () {
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
}
});
}
// 登录
this.clickLogin = function () {
let self = this
if ("" == self.ip || "" == self.port) {
return console.log('请输入ip和端口');
}
self.szDeviceIdentify = self.ip + "_" + self.port;
console.log(self.szDeviceIdentify,'----self.szDeviceIdentify-----');
WebVideoCtrl.I_Login(self.ip, 2, self.port, self.username, self.password, {//1 代表http协议,2 https
success: function (xmlDoc) {        
setTimeout(function () {
//   console.log('登录成功');
Store.setIpProt(self.szDeviceIdentify)//存储已登入ip和端口
self.getChannelInfo();
self.getDevicePort();
}, 10);
setTimeout(function() {
self.clickStartRealPlay()
}, 500)
},
error: function (status, xmlDoc) {
console.log(status,'登录失败');
}
});
}
// 退出
this.clickLogout = function() {
var self = this
self.channels = []
if (null == self.szDeviceIdentify) {
return;
}
var iRet = WebVideoCtrl.I_Logout(self.szDeviceIdentify);
if (0 == iRet) {
self.getChannelInfo();
self.getDevicePort();
}
}
// 获取通道
this.getChannelInfo = function(e) {
var self = this
self.channels = []
if (null == self.szDeviceIdentify) {
return;
}
// 模拟通道
WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("VideoInputChannel");
$.each(oChannels, function (i) {
var 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
})
});
},
error: function (status, xmlDoc) {
console.log(self.channels,'获取模拟通道号失败')
}
});
//   数字通道
WebVideoCtrl.I_GetDigitalChannelInfo(self.szDeviceIdentify, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
$.each(oChannels, function (i) {
var id = $(this).find("id").eq(0).text(),
name = $(this).find("name").eq(0).text(),
online = $(this).find("online").eq(0).text();
if ("" == name) {
name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
}
self.channels.push({
id: id,
name: name,
online:online
})
});
console.log(self.szDeviceIdentify +'--'+self.channels[0]+ "--szDeviceIdentify--channels[0]--- 获取数字通道成功！");
},
error: function (status, xmlDoc) {
console.log(self.szDeviceIdentify +'--'+self.channels[0] + " ---获取数字通道失---", status, xmlDoc);
}
});
}
// 获取端口
this.getDevicePort = function() {
var self = this
if (null == self.szDeviceIdentify) {
return;
}
var oPort = WebVideoCtrl.I_GetDevicePort(self.szDeviceIdentify);
if (oPort != null) {
self.deviceport = oPort.iDevicePort;
self.rtspPort = oPort.iRtspPort;
}
console.log('获取端口号成功')
}
// 开始预览
this.clickStartRealPlay = function() {
var self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex),
iChannelID = self.channels[0].id
console.log(self.channels,"---开始预览--通道号----");
if (null == self.szDeviceIdentify) {
//  console.log(self.szDeviceIdentify + ' --szDeviceIdentify--为空---');
return;
}
var startRealPlay = function () {
WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {
iChannelID: iChannelID,
bZeroChannel: false,
iStreamType: 2,
success: function () {
console.log('预览成功')
},
error: function (status, xmlDoc) {
if (403 === status) {
console.log('设备不支持Websocket取流')
} else {
console.log(iChannelID,self.szDeviceIdentify,'--------预览失败---------',status, xmlDoc,)
}
}
});
};
if (oWndInfo != null) {// 已经在播放了，先停止
WebVideoCtrl.I_Stop({
success: function () {
startRealPlay();
}
});
} else {
startRealPlay();
}
}
// 停止预览
this.clickStopRealPlay = function() {
var self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex)
if (oWndInfo != null) {
WebVideoCtrl.I_Stop({
success: function () {
console.log('停止预览成功')
},
error: function () {
console.log('停止预览失败')
}
});
}
}
/*  云平台控制 */
// PTZ控制 9为自动，1,2,3,4,5,6,7,8为方向PTZ
let g_bPTZAuto = false;
this.mouseDownPTZControl=function (iPTZIndex) {
var self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex),
bZeroChannel = self.channels[0].id ,//通道id
iPTZSpeed = 4;//切换速度 $("#ptzspeed").val()
if (bZeroChannel==0) {// 零通道不支持云台
// return console.log(bZeroChannel+"-----云台");
}
if (oWndInfo != null) {
if (9 == iPTZIndex && g_bPTZAuto) {
iPTZSpeed = 0;// 自动开启后，速度置为0可以关闭自动
} else {
self.g_bPTZAuto = false;// 点击其他方向，自动肯定会被关闭
}
WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
iPTZSpeed: iPTZSpeed,
success: function (xmlDoc) {
if (9 == iPTZIndex && g_bPTZAuto) {
} else {
}
if (9 == iPTZIndex) {
g_bPTZAuto = !g_bPTZAuto;
}
},
error: function (status, xmlDoc) {
}
});
}
}
// 方向PTZ停止
this.mouseUpPTZControl=function () {
let self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PTZControl(1, true, {
success: function (xmlDoc) {
},
error: function (status, xmlDoc) {
}
});
}
}
/* 调焦部分 */
// 变倍+
this.PTZZoomIn= function () {
var self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PTZControl(10, false, {
iWndIndex: self.g_iWndIndex,
success: function (xmlDoc) {
console.log(self.szDeviceIdentify + " 调焦+成功！");
},
error: function (status, xmlDoc) {
console.log(self.szDeviceIdentify + "  调焦+失败！", status, xmlDoc);
// showOPInfo(oWndInfo.szDeviceIdentify + "  调焦+失败！", status, xmlDoc);
}
});
}
}
// 变倍—
this.PTZZoomout= function () {
var self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PTZControl(11, false, {
iWndIndex: self.g_iWndIndex,
success: function (xmlDoc) {
console.log(self.szDeviceIdentify + " 调焦-成功！");
},
error: function (status, xmlDoc) {
console.log(self.szDeviceIdentify + "  调焦-失败！", status, xmlDoc);
}
});
}
}
// 停止变倍
this.PTZZoomStop= function () {
var self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PTZControl(11, true, {
iWndIndex: self.g_iWndIndex,
success: function (xmlDoc) {
console.log(self.szDeviceIdentify + " 调焦停止成功！");
},
error: function (status, xmlDoc) {
console.log(self.szDeviceIdentify + "  调焦停止失败！", status, xmlDoc);
}
});
}
}
// 变焦+
this.PTZFocusIn= function () {
var self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PTZControl(12, false, {
iWndIndex: self.g_iWndIndex,
success: function (xmlDoc) {
console.log(self.szDeviceIdentify + " 聚焦+成功！");
},
error: function (status, xmlDoc) {
console.log(self.szDeviceIdentify + "  聚焦+失败！", status, xmlDoc);
}
});
}
}
// 变焦—
this.PTZFoucusOut=function () {
var self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PTZControl(13, false, {
iWndIndex: self.g_iWndIndex,
success: function (xmlDoc) {
console.log(self.szDeviceIdentify + " 聚焦-成功！");
},
error: function (status, xmlDoc) {
console.log(self.szDeviceIdentify + "  聚焦-失败！", status, xmlDoc);
}
});
}
}
// 停止变焦
this.PTZFoucusStop=function () {
var self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PTZControl(12, true, {
iWndIndex: self.g_iWndIndex,
success: function (xmlDoc) {
console.log(self.szDeviceIdentify + " 聚焦停止成功！");
},
error: function (status, xmlDoc) {
console.log(self.szDeviceIdentify + "  聚焦停止失败！", status, xmlDoc);
}
});
}
}
// 光圈+
this.PTZIrisIn= function () {
var self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PTZControl(14, false, {
iWndIndex: selfg_iWndIndex,
success: function (xmlDoc) {
console.log(self.szDeviceIdentify + " 光圈+成功！");
},
error: function (status, xmlDoc) {
console.log(self.szDeviceIdentify + "  光圈+失败！", status, xmlDoc);
}
});
}
}
// 光圈-
this.PTZIrisOut= function () {
var self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PTZControl(15, false, {
iWndIndex: self.g_iWndIndex,
success: function (xmlDoc) {
console.log(self.szDeviceIdentify + " 光圈-成功！");
},
error: function (status, xmlDoc) {
console.log(self.szDeviceIdentify + "  光圈-失败！", status, xmlDoc);
}
});
}
}
// 停止光圈
this.PTZIrisStop = function () {
var self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PTZControl(14, true, {
iWndIndex: self.g_iWndIndex,
success: function (xmlDoc) {
console.log(self.szDeviceIdentify + " 光圈停止成功！");
},
error: function (status, xmlDoc) {
console.log(self.szDeviceIdentify + "  光圈停止失败！", status, xmlDoc);
}
});
}
}
}

  4. Vue 文件的按需配置：

              以下是我的配置信息，可参考开发包提供的demo配置文件进行设置；通过海康提供的摄像头ip、用户名、密码实现登入功能； 注：必须要登入才可以实现预览等功能； 


播放
暂停
变倍+
变倍-
变焦+
变焦-
光圈+
光圈-
上
下
左
右
左上
左下
右上
右下
自动
#monitorVideo{
height: 950px;
background-color: #c3c7dd;
text-align: center;
}
.tips1{
color: rgb(90, 144, 180);
padding: 10px 30px;
background-color: transparent;
box-shadow: 0 0 0px #48adf026;
text-decoration: none;
-webkit-box-reflect: below 1px linear-gradient(transparent, rgba(255,255,255,0.1));
}
.data_Selection {
width:1800px;
height: 100px;
background-color: #313445;
display: flex;
align-items: center;
justify-content: space-around;
position: relative;
.option_data {
margin-left: 30px;
}
.specific_time {
margin-left: 20px;
font-size: 20px;
font-family: MicrosoftYaHei;
color: #b7b8bb;
}
:deep(.el-input__wrapper) {
color: white;
background-color: rgb(70, 72, 87);
}
:deep(.el-input__inner) {
color: white;
}
.el-button {
width: 50px;
height: 35px;
color: #ffffff;
font-size: 14px;
background-color: #1890ff;
border: none;
margin-left: 20px;
}
.el-button:hover {
background-color: #2ebbf3;
}
.el-button:focus {
background-color: #2ebbf3;
}
.out {
background-color: transparent;
position: absolute;
right: 10px;
}
}
.monitoring{
display: flex;
color: #fff;
border-top: 1px solid transparent;
.monitoring_title{
display: flex;
align-items: center; 
span{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
display: inline-block;
cursor: pointer;
}
}
.monitoring_content{
margin-left: 20px;
justify-content: center;
align-items: center; 
.plugin{
width: 1160px; 
height: 630px;
background-color: rgb(49, 52, 68);
padding: 10px 20px;
margin-top: 125px;
margin-left: 300px;
}
}
}
.buttn{
color: #fff;
text-decoration: none;
width: 80px;
background-color: rgb(24, 144, 255);
height: 35px;
text-align: center;
line-height: 35px;
border-radius: 5px;
margin-left: 10px;
}
.buttn:hover{
background-color: #2ebbf3;
color: #fff;
}
.el-select {
:deep(.el-input__wrapper) {
background-color: rgb(49, 52, 69);
}
:deep(.el-input__inner) {
text-align: left;
color: rgb(224, 224, 224);
font-size: 17px;
background-color: rgb(49, 52, 69);
}
}

 5. 实现预览功能示例：

        海康视频监控 基于web无插件开发包 3.2 实现预览、云台控制等功能(vue3)插图(1)

本站无任何商业行为
个人在线分享 » 海康视频监控 基于web无插件开发包 3.2 实现预览、云台控制等功能(vue3)
admin

admin 钻石

分享到：

相关推荐

E-->