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

这篇具有很好参考价值的文章主要介绍了vue对接海康摄像头,使用hk3.3(硬盘录像机)开发摄像头分屏翻页操作。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

默认展示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

到了这里,关于vue对接海康摄像头,使用hk3.3(硬盘录像机)开发摄像头分屏翻页操作。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 海康、大华、tplink监控摄像头和硬盘录像机接入GB28181平台配置细节

    海康、大华、tplink等各种型号监控摄像头或硬盘录像机(NVR/HVR)接入GB28181平台,配置过程都非常简单明了,但有些细节需要注意,避免走弯路踩泥坑。 首先要说明一点的是,只要监控设备和GB28181平台的网络是连通的,都可以顺畅的接入,不需要为监控设备配置外网地址,更不

    2024年02月07日
    浏览(64)
  • 海康威视摄像头对接SDK实时预览功能和抓拍功能,懒癌福利,可直接CV

    最近在新系统的研发中负责了视频监控模块的开发,项目监控设备全部采用海康的摄像头,枪机、球机都有,开发的过程中,有个需求是在前端页面上把摄像头画面进行平铺展示,最开始的方案是通过官方API完成,但是后面发现项目上所有的设备都是不联网的,所以只能转由

    2024年02月02日
    浏览(48)
  • vue2使用rtsp视频流接入海康威视摄像头(纯前端)

    海康威视官方的RTSP最新取流格式如下: rtsp://用户名:密码@IP:554/Streaming/Channels/101 用户名和密码 IP就是登陆摄像头时候的IP(笔者这里IP是192.168.1.210) 所以笔者的rtsp流地址就是 rtsp://用户名:密码@192.168.1.210:554/Streaming/Channels/101 1.1关闭 萤石云的接入 1.2 调整视频编码为H.264 在此下载

    2024年04月26日
    浏览(53)
  • 记录对接海康威视摄像头web端实时预览:Linux+ffmpeg+nginx转换RTSP视频流(完整版实现)

            需求:web端实现海康摄像头实时预览效果         由于市面上大部分网络摄像头都支持RTSP协议视频流,web端一般无法直接使用RTSP实现视频预览,本篇使用ffmpeg对视频流进行转换,最终实现web端实时预览。         工具介绍:ffmpeg、nginx、vue         介

    2024年01月25日
    浏览(51)
  • Vue集成海康websdk实现摄像头预览

    选择以及下载相应的websdk: 从海康开放平台下载相应的sdk,web3.0不支持高版本浏览器,web3.2需要摄像头支持摄像头取流,web3.3支持高版本浏览器 我这选择的是3.3的。 可以先测试下开发包是否可以成功访问,修改用ip、户名、密码。端口一般使用默认80,点击登录,然后选择相

    2024年02月03日
    浏览(52)
  • vue+js+海康web开发包接入海康威视摄像头

    一、登录海康开放平台下载web开发包,下载需要先登录海康账号,没有的需先注册一个。 海康开放平台web开发包下载地址:https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10id=4c945d18fa5f49638ce517ec32e24e24 二、将web开发包引入vue项目 下载后解压的包目录如下: 将把webs下的整个

    2024年02月02日
    浏览(54)
  • 播放海康摄像头直播流使用笔记

    tips:海康摄像机解绑https://sms.hikvision.com/dmBuC1

    2024年02月03日
    浏览(48)
  • 如何降低海康、大华等网络摄像头调用的高延迟问题(一):海康威视网络摄像头的python sdk使用(opencv读取sdk流)

    目录 1.python sdk使用 1.海康SDK下载  2.opencv读取sdk流  先说效果,我是用的AI推理的实时流,延迟从高达7秒降到小于1秒 如果觉得这个延迟还不能接受,下一章,给大家介绍点上不得台面的小方法 SDK(Software Development Kit)是软件开发工具包的缩写,它是一组用于开发特定软件或

    2024年02月07日
    浏览(90)
  • vue中web端播放rtsp视频流(摄像头监控视频)(海康威视录像机)

    ffmpeg下载 https://ffmpeg.org/download.html 找ffmpeg-release-essentials.zip点击下载,下载完解压 ffmpeg.exe 程序运行 添加成功后验证是否生效任意地方打开cmd窗口输入 ffmpeg 打印如下表示成功 新建一个app.js文件,同级目录下npm安装 node-rtsp-stream 我是直接写在项目里了,你们可以单独写在外

    2024年04月25日
    浏览(52)
  • 使用QT的QML实时显示海康威视网络摄像头的视频数据

    需求背景: 开发的监控软件中有个监控页面需要实时显示网络摄像头的数据,整个监控软件是基于QT的QML语言开发的。在QML中播放视频使用MediaPlayer组件就可以,但网上看到的一些都是播放录制好的视频文件,对于实时播放摄像头数据介绍的比较少。 开发环境: Debian11.3 Qt

    2024年02月09日
    浏览(97)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包