默认展示4*4规格,分屏之后自己写翻页方法,对摄像头一一展示(1x1, 2x2, 3x3, 4x4),有俩个场景。
1、刚开始默认展示的时候进行分页。
2、点击分屏操作之后进行分页。
思路:
1、拿到所有的通道号,比如有[1, 2, 3…, 100];
2、 点击分屏之后就会把这个数组变为
- 1*1[[1], [2]],
- 2*2[[1, 2, 3,4], [5, 6, 7, 8]]
- 3*3[[1, 2, 3, 4, 5, 6, 7, 8, 9], [10, 11, 12, 13, 14, 15, 16, 17, 18]]
- 4*4[[1, 2, 3, 4, 5, …, 16], [17, 18, 19, 20, …, 32]]
3、点击下一页或者上一页的时候全局定义一个变量,初始值为0.,点击上一页++,下一页–,利用这个变量进行这个数组的操作。
data() {
return {
page: 4, // 默认展示4*4格式,自己计算翻页
getIChannelID: [], // 通道号,每次根据page获取通道数量
startPage: 0,
pageIndex: 1, // 摄像头为1*1的时候第一页使用这个数据,为1*1以上的使用getIChannelID[]
resultIdArr: [], // 处理后的通道id数组,每n*n排列
iDIndex: 0,
isChangeWndNum: false, // 刚开始默认不分屏(4*4),如果分屏,变为true,使用resultIdArr,为false使用getIChannelID
}
},
methods: {
// 首先拿到海康摄像头所有的通道号,才能进行以下操作
// 在登录之后获取通道的方法里面拿到所有通道号
// 海康摄像头分屏操作 @click="changeWndNum(4)"海康js自带方法
changeWndNum(iType) {
this.isChangeWndNum = true; // 刚开始默认是否分屏
iType = parseInt(iType, 10);
this.page = iType; // 全局给变量,在翻页的时候使用
WebVideoCtrl.I_ChangeWndNum(iType).then(() => {
console.log("窗口分割成功!");
var arr = Array.from({length: this.getIChannelID}, (_, i) => i + 1)
let resByTwo = this.handleIdArr(arr)
console.log(resByTwo);
this.resultIdArr = resByTwo;
}, (oError) => {
let szInfo = "窗口分割失败!";
console.log(szInfo, oError.errorCode, oError.errorMsg);
});
},
handleIdArr(arr) { // 写一个方法让上一页和下一页都使用这个方法
var result = [];
// this.page * this.page 2*2 1*1 3*3 4*4
for (let i = 0; i < arr.length; i+= this.page * this.page) {
result.push(arr.slice(i, i + this.page * this.page))
}
return result;
},
// 上一页
onPrev() {
if (this.iDIndex == 0) return this.$Message.warning('没有摄像头啦');
this.iDIndex--;
WebVideoCtrl.I_StopAllPlay();
this.resultIdArr[this.iDIndex].forEach((video, index) => {
this.clickStartRealPlay(video, index);
})
},
// 下一页
onNext() {
/**
* console.log('getIChannelID', this.getIChannelID);
* getIChannelID(所有硬盘录像机得通道号)
* if语句里边的代码也可以把数组分割成1*1, 2*2, 3*3, 4*4那种的,只需要修改end的值。
*/
this.iDIndex++;
if (isChangeWndNum) { // 有一种情况就是刚打开就要翻页,需要判断是否为刚开始的翻页
// 刚开始进来直接翻页的操作
WebVideoCtrl.I_StopAllPlay(); // 先关掉预览在重新预览
if (this.startPage >= this.getIChannelID.length) {
console.log("已经获取完成全部值", this.getIChannelID);
return;
}
var end = this.startPage + 16; // 4*4是163*3是9以此类推
if (end > this.getIChannelID.length) {
end = this.getIChannelID.length;
};
var subArray = this.getIChannelID.slice(this.startPage, end);
// 处理获取的值
this.startPage += 16;
console.log('444444', subArray);
for (let index = 0; index < subArray.length; index++) {
const element = subArray[index];
this.clickStartRealPlay(element, index);
}
} else { // 点击分屏然后翻页需要的操作
WebVideoCtrl.I_StopAllPlay();
console.log(this.resultIdArr, 'this.resultIdArr');
this.resultIdArr[this.iDIndex].forEach((video, index) => {
this.clickStartRealPlay(video, index);
})
},
}
刚开始不操作的时候用到的是getIChannelID这个数组,也就是刚拿到的这个数据,点击分屏之后用到了resultIdArr数组,这个就是需要分屏之后操作数组getIChannelID分成上边的那种类型进行操作。文章来源:https://www.toymoban.com/news/detail-637191.html
根据自己需求进行整改。文章来源地址https://www.toymoban.com/news/detail-637191.html
到了这里,关于vue对接海康摄像头,使用hk3.3(硬盘录像机)开发摄像头分屏翻页操作。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!