vue对接海康摄像头,使用hk3.3(硬盘录像机)开发摄像头分屏翻页操作。

3 篇文章 0 订阅

默认展示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分成上边的那种类型进行操作。

根据自己需求进行整改。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue是一种用于构建用户界面的JavaScript框架,而海康摄像头是一种监控设备,用于视频监控系统。在Vue对接海康摄像头源码可以实现在Web应用程序中实时显示和控制海康摄像头的视频流。 首先,需要下载并安装海康摄像头的相关SDK,并了解SDK的使用方法以及提供的接口。然后,在Vue项目中引入SDK的相关依赖,可以使用npm或者直接将SDK文件导入项目中。 接下来,在Vue组件中创建一个视频播放器的容器元素,用于展示摄像头的视频流。在组件的生命周期钩子函数中,使用SDK的接口初始化视频播放器,并传入摄像头的地址或者ID,接收视频流并在容器中进行播放。可以根据需要设置播放器的参数,例如视频的清晰度、是否支持录像等。 此外,可以在Vue组件中实现控制摄像头的功能。通过SDK提供的接口,可以实现对摄像头的云台控制、焦距调节、镜头旋转等操作。可以通过为组件绑定事件监听器,监听用户的操作并调用相应的SDK接口来实现这些功能。 对于需要实时监控多个海康摄像头的情况,可以在Vue中动态生成多个视频播放器容器,并根据需要对每个摄像头分别进行初始化和控制。 总之,通过在Vue项目中对接海康摄像头的源码,可以实现在Web应用程序中展示摄像头的实时视频流,并实现对摄像头的控制功能,为用户提供更便捷的视频监控体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

好苦呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值