45 对接海康视频九宫格的实现

前言

这里主要是 来看一下 海康视频 的一个九宫格播放的需求

然后 在实际使用的过程中产生了一些问题, 比如 增加一个视频, 应该只增量请求这一个视频的服务, 而一些实现下是全量请求了 整个视频列表的服务

另外 就是全屏播放, 如果是 自己写样式来实现 全屏播放, 可能需要 重新创建 海康的player, 进而 需要重新请求 海康的视频服务

另外 还有 cpu, 内存占用过高的情况, 然后 还有一些疑似 内存泄露的情况

这里 调整一个版本 记录一下

以下有一些版本, 一个是自定义实现九宫格, 这样做的问题 还是挺多的, 以上的问题基本上都占了, 然后另外一个版本是 直接使用 海康自己提供的 api 来实现 九宫格, 会稍微好一些

 

 

整体来说, 一个比较良好的情况是, 否则的话 可能会出现一些 较高的资源占用的问题

  1. 新增一个视频的时候, 仅仅增量请求这一个视频的数据, 增量的和海康建立连接
  2. 全屏的时候 使用海康的 api, 它自己已经实现了 自适应, 否则 自己处理的话 自适应有可能需要重新和海康建立连接, 重新渲染
  3. 尽量避免 并发 和请求海康的接口, 经常会崩溃, 尽量避免 频繁的和海康断开视频连接, 重新创建视频连接

 

 

自己自定义九宫格

这个就相当于是 海康的视频播放器只播放一个视频

然后 这里是 循环 codeUrlList, 一个视频对应于一个 player, 虽然同时 播放了多个 player 但是 实际上核心占用资源的貌似是其中一个

key 需要指定, 否则 在一些需要重新渲染 海康player 的场景下面, 模型改变了 但是每一个 div 内部的 player 的 dom 不会重新渲染, 可能会导致 视频错位等问题

这个 问题就是需要自己实现全屏的样式, 以及全拼的时候需要全部重新渲染一次, 才能适应全屏之后的窗口

其他的 增量的获取海康服务, 避免并发的请求海康接口 就需要自己处理了

以下的测试代码 看 (!singlePlayer) 部分

 

业务组件如下

<template><div class="indexDiv"><div v-if="!singlePlayer" v-for="item in codeUrlList" :key="item.code" style="width:400px; display: inline; float:left;"><Player :palyer-code="item.code" :play-url="item.url"></Player></div><PlayerSplitByHk ref="playerHk" v-if="singlePlayer"></PlayerSplitByHk><button @click="handleFullScreen" >全屏</button></div>
</template><script>import Player from "./Player.vue"
import PlayerSplitByHk from "./PlayerSplitByHk.vue"export default {name: "Index",components: {Player,PlayerSplitByHk,},data() {return {singlePlayer: false,codeUrlList: [{"code":"61092100561310001001","url":"ws://112.110.110.109/openUrl/KG6aIkE"},{"code":"61102600581328004001","url":"ws://112.110.110.109:559/openUrl/KHubaKc"},{"code":"61092200561310001001","url":"ws://112.110.110.109:559/openUrl/KIs4xbO"},{"code":"61092200561310001002","url":"ws://112.110.110.109:559/openUrl/KJcCKwo"},{"code":"61092200561310002701","url":"ws://112.110.110.109/openUrl/KK6g812"},{"code":"61092200561310001901","url":"ws://112.110.110.109:559/openUrl/KL11U1W"},{"code":"61092800561310002101","url":"ws://112.110.110.109:559/openUrl/KLJjkk0"},{"code":"61092800561310002402","url":"ws://112.110.110.109:559/openUrl/KMu98ME"},{"code":"61092800561310002901","url":"ws://112.110.110.109/openUrl/KNaIYik"}]};},mounted() {// test for hk sudokuif(this.singlePlayer) {this.$refs.playerHk.updateCodeUrlList(this.codeUrlList)// call updateCodeUrlList if codeUrlList updatedlet _this = thissetTimeout(function() {let updatedCodeUrlList = []_this.codeUrlList.map(ele => updatedCodeUrlList.push(ele))updatedCodeUrlList.splice(5, 3)_this.$refs.playerHk.updateCodeUrlList(updatedCodeUrlList)console.log(" splice with idx 6, 7, 8 ")console.log(" ----------------------------- ")}, 5000)setTimeout(function() {let updatedCodeUrlList = []_this.codeUrlList.map(ele => updatedCodeUrlList.push(ele))updatedCodeUrlList.splice(5, 3)updatedCodeUrlList.push({code: "code1", url: "url1"})updatedCodeUrlList.push({code: "code2", url: "url2"})_this.$refs.playerHk.updateCodeUrlList(updatedCodeUrlList)console.log(" push url1, url2 ")console.log(" ----------------------------- ")}, 10000)}},methods: {handleFullScreen() {// test for hk sudokuif(this.singlePlayer) {this.$refs.playerHk.handleFullScreen()}}}
}</script><style scoped></style>

 

视频播放组件如下

<template><div clas="outerDiv" ><div class="main" :id="'playerDiv' + this.palyerCode"  ></div></div>
</template><script>export default {name: "Player",props: {palyerCode: {type: String,default: "",},playUrl: {type: String,default: "",},},data() {return {player: null};},mounted() {this.createPlayer()this.startPlay()},methods: {createPlayer() {this.player = new window.JSPlugin({szId: 'playerDiv' + this.palyerCode,szBasePath: "./",iMaxSplit: 4,iCurrentSplit: 1,openDebug: true,oStyle: {borderSelect: '#000',}})// 事件回调绑定let _this = thisthis.player.JS_SetWindowControlCallback({windowEventSelect: function (iWndIndex) {  //插件选中窗口回调console.log('windowSelect callback: ', iWndIndex);_this.player.JS_Stop(iWndIndex).then(() => { console.log('stop play ' + iWndIndex + ' success') },e => { console.error(e) })},pluginErrorHandler: function (iWndIndex, iErrorpalyerCode, oError) {  //插件错误回调console.log('pluginError callback: ', iWndIndex, iErrorpalyerCode, oError);},windowFullCcreenChange: function (bFull) {  //全屏切换回调console.log('fullScreen callback: ', bFull);},firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);},performanceLack: function () {  //性能不足回调console.log('performanceLack callback: ');}});},startPlay() {let playURL = this.playUrllet model = 1console.log(" start replay with url : " + playURL)// this.player.JS_Play(playURL, { playURL, model }, 0).then(//     () => { console.log('realplay success') },//     e => { console.error(e) }// )}}
}</script><style scoped></style>

 

 

使用 hik 提供的 api 实现九宫格

这里的九宫格的实现就是直接基于 hk 的 api 了, 比如这里的 this.player.JS_ArrangeWindow, this.player.JS_Play 

然后 全屏基于 this.player.JS_FullScreenDisplay, 然后 全拼的状态可以通过 windowFullCcreenChange 进行获取

一些 常见的回调函数, 也在 demo 中有体现

然后 降低客户端和海康服务器这边的开销的处理, 主要是如下的 更新前后的视频列表, 如果目标索引的视频变了, 才重新发起请求, 重新建立视频连接

 

这样的话 开始的时候点击九个视频, 资源占用大概是 cpu100%, 内存差不多是 500M 左右, 然后 随着时间的推移, 主项目的js引擎[不是海康player的js引擎] 占用内存逐渐升高, 这个具体就得看这个 player 的问题了, 然后刷新 Index.vue 的页面, 这个内存占用 依然存在

这里 就不深究了

 

业务组件如下

<template><div class="indexDiv"><div v-if="!singlePlayer" v-for="item in codeUrlList" :key="item.code" style="width:400px; display: inline; float:left;"><Player :palyer-code="item.code" :play-url="item.url"></Player></div><PlayerSplitByHk ref="playerHk" v-if="singlePlayer"></PlayerSplitByHk><button @click="handleFullScreen" >全屏</button></div>
</template><script>import Player from "./Player.vue"
import PlayerSplitByHk from "./PlayerSplitByHk.vue"export default {name: "Index",components: {Player,PlayerSplitByHk,},data() {return {singlePlayer: false,codeUrlList: [{"code":"61092100561310001001","url":"ws://112.110.110.109/openUrl/KG6aIkE"},{"code":"61102600581328004001","url":"ws://112.110.110.109:559/openUrl/KHubaKc"},{"code":"61092200561310001001","url":"ws://112.110.110.109:559/openUrl/KIs4xbO"},{"code":"61092200561310001002","url":"ws://112.110.110.109:559/openUrl/KJcCKwo"},{"code":"61092200561310002701","url":"ws://112.110.110.109/openUrl/KK6g812"},{"code":"61092200561310001901","url":"ws://112.110.110.109:559/openUrl/KL11U1W"},{"code":"61092800561310002101","url":"ws://112.110.110.109:559/openUrl/KLJjkk0"},{"code":"61092800561310002402","url":"ws://112.110.110.109:559/openUrl/KMu98ME"},{"code":"61092800561310002901","url":"ws://112.110.110.109/openUrl/KNaIYik"}]};},mounted() {// test for hk sudokuif(this.singlePlayer) {this.$refs.playerHk.updateCodeUrlList(this.codeUrlList)// call updateCodeUrlList if codeUrlList updatedlet _this = thissetTimeout(function() {let updatedCodeUrlList = []_this.codeUrlList.map(ele => updatedCodeUrlList.push(ele))updatedCodeUrlList.splice(5, 3)_this.$refs.playerHk.updateCodeUrlList(updatedCodeUrlList)console.log(" splice with idx 6, 7, 8 ")console.log(" ----------------------------- ")}, 5000)setTimeout(function() {let updatedCodeUrlList = []_this.codeUrlList.map(ele => updatedCodeUrlList.push(ele))updatedCodeUrlList.splice(5, 3)updatedCodeUrlList.push({code: "code1", url: "url1"})updatedCodeUrlList.push({code: "code2", url: "url2"})_this.$refs.playerHk.updateCodeUrlList(updatedCodeUrlList)console.log(" push url1, url2 ")console.log(" ----------------------------- ")}, 10000)}},methods: {handleFullScreen() {// test for hk sudokuif(this.singlePlayer) {this.$refs.playerHk.handleFullScreen()}}}
}</script><style scoped></style>

 

视频播放组件如下

<template><div class="outerDiv" ><div class="main" id="playerDiv" ></div></div>
</template><script>export default {name: "PlayerSplitByHk",props: {},data() {return {player: null,videoListMax: 0,isFirstClick: false,codeUrlList: null,};},mounted() {this.createPlayer()},methods: {updateCodeUrlList(newCodeUrlList) {let oldCodeUrlList = this.codeUrlListthis.codeUrlList = newCodeUrlListthis.videoListMax = Math.max(this.videoListMax, newCodeUrlList.length)let matrixLen = newCodeUrlList.length > 4 ? 3 : (newCodeUrlList.length > 1 ? 2 : 1)this.isFirstClick = truethis.player.JS_ArrangeWindow(matrixLen)for(let i=newCodeUrlList.length; i<this.videoListMax; i++) {console.log(" stop replay with idx : " + i)this.player.JS_Stop(i);}for(let i=0; i<newCodeUrlList.length; i++) {let newItem = newCodeUrlList[i]let oldItem = oldCodeUrlList && oldCodeUrlList[i]if((!oldItem) || (oldItem.code !== newItem.code)) {this.startPlay(i)}}},handleFullScreen() {this.player.JS_FullScreenDisplay(true).then(() => { console.log(`wholeFullScreen success`) },e => { console.error(e) })},createPlayer() {this.player = new window.JSPlugin({szId: 'playerDiv',szBasePath: "/static",iMaxSplit: 9,iCurrentSplit: 1,iWidth: 400,iHeight: 300,openDebug: true,oStyle: {// border: '#green',// borderSelect: '#ffcc00',}})// 事件回调绑定let _this = thisthis.player.JS_SetWindowControlCallback({windowEventSelect: function (iWndIndex) {  //插件选中窗口回调if(_this.isFirstClick) {_this.isFirstClick = falsereturn ;}console.log(" do what you want ")},pluginErrorHandler: function (iWndIndex, iErrorpalyerCode, oError) {console.log('pluginError callback: ', iWndIndex, iErrorpalyerCode, oError);},windowFullCcreenChange: function (bFull) {console.log('fullScreen callback: ', bFull);},firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);},performanceLack: function () {console.log('performanceLack callback: ');}});},startPlay(idx) {let playURL = this.codeUrlList[idx].urllet model = 1console.log(" start replay with idx : " + idx)// this.player.JS_Play(playURL, { playURL, model }, idx).then(//     () => { console.log('realplay success') },//     e => { console.error(e) }// )}}
}</script><style scoped></style>

 

 

完 

 

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/782516.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用vagrant快速创建linux虚拟机

使用vagrant快速创建linux虚拟机

1. 技术解释 vagrant&#xff1a;是一款用于管理虚拟机的命令行使用软件&#xff0c;用Ruby语言开发而成&#xff0c;可以通过 Vagrant 封装一个 Linux 的开发环境&#xff0c;是一款用来构建虚拟开发环境的工具。使用vagrant可以省去你使用虚拟机创建操作系统的所有操作&…
阅读更多...
场效应管（MOS管）知识点总结

场效应管（MOS管）知识点总结

目录 一、场效应管(FET)基础知识 1.名称 2.电路符号 3.分类 4.应用场景 5.厂商介绍 二、MOS管G、S、D以及判定 三、耗尽型场效应管工作原理 (耗尽型&#xff1a;depletion mode) 四、NMOS与PMOS的区别 (区别&#xff1a;difference) (多晶硅&#xff1a;polysilicon) …
阅读更多...
zookeeper 监控 与 JVM 设置

zookeeper 监控 与 JVM 设置

一、通过JMX监控 JVM 默认情况下&#xff0c;在 ./bin/zkServer.sh 脚本中是默认开启了JMX监控的&#xff0c;并且是不需要认证的&#xff0c;详情可见ZOOMAIN变量&#xff1b; ZOOMAIN"-Dcom.sun.management.jmxremote -Dcom.sun.management.jmxremote.port$JMXPORT -D…
阅读更多...
vue内置组件、特殊元素、组件api详解

vue内置组件、特殊元素、组件api详解

vue3移动端项目搭建&#xff0c;vue3vantviteaxiospiniasass完整版代码下载&#xff1a; https://download.csdn.net/download/randy521520/88820174 vue3移动端项目构建TS&#xff0c;vue3vantviteaxiospiniasasstypescript完整版代码下载&#xff1a; https://download.csdn.…
阅读更多...
java中的多态以及对象的类型转换

java中的多态以及对象的类型转换

多态 多态指的就是同一事物在不同情况下表现出来的不同状态或者行为。在java中&#xff0c;当调用同一个方法时&#xff0c;由于对象存在差异&#xff0c;不同的对象之间可能存在不同的行为&#xff0c;当父类引用指向了子类对象&#xff0c;用这个父类引用调用子类中重写的方法…
阅读更多...
深度学习十大算法之Diffusion扩散模型

深度学习十大算法之Diffusion扩散模型

1. 引言 扩散模型在近年来成为了热门话题&#xff0c;其火速蹿红主要归功于在图像生成领域的突破应用。尤其是一些从文本到图像的生成技术&#xff0c;它们成功地运用了扩散模型来创建令人惊叹的逼真图像。如果你听说过某个应用能够迅速且高质量地生成图像&#xff0c;那么很可…
阅读更多...
【效率提升】Xinstall免填邀请码，让App注册更便捷

【效率提升】Xinstall免填邀请码，让App注册更便捷

在移动互联网时代&#xff0c;App已经成为我们生活中不可或缺的一部分。然而&#xff0c;每当我们要尝试一个新的App时&#xff0c;繁琐的注册流程总是让人感到头疼。其中&#xff0c;填写邀请码这一环节更是让许多人望而却步。幸运的是&#xff0c;Xinstall作为国内专业的App全…
阅读更多...
每日OJ题_栈⑤_力扣946. 验证栈序列

每日OJ题_栈⑤_力扣946. 验证栈序列

目录 力扣946. 验证栈序列 解析代码 力扣946. 验证栈序列 946. 验证栈序列 难度 中等 给定 pushed 和 popped 两个序列&#xff0c;每个序列中的 值都不重复&#xff0c;只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时&#xff0c;返回 true&a…
阅读更多...
数据链路层之信道：数字通信的桥梁与守护者

数据链路层之信道：数字通信的桥梁与守护者

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…
阅读更多...
C#/BS手麻系统源码 手术麻醉管理系统源码 商业项目源码

C#/BS手麻系统源码 手术麻醉管理系统源码 商业项目源码

C#/BS手麻系统源码 手术麻醉管理系统源码 商业项目源码 手麻系统从麻醉医生实际工作环境和流程需求方面设计&#xff0c;与HIS&#xff0c;LIS&#xff0c;PACS&#xff0c;EMR无缝连接&#xff0c;方便查看患者的信息;实现术前、术中、术后手术麻醉信息全记录;减少麻醉医师在…
阅读更多...
.NET Core教程：深入实践与实例解析

.NET Core教程：深入实践与实例解析

.NET Core教程&#xff1a;深入实践与实例解析 随着技术的发展&#xff0c;.NET Core作为微软推出的一个开源、跨平台的.NET实现&#xff0c;已经越来越受到开发者的青睐。本文将详细讲解.NET Core的基础知识&#xff0c;并通过实例来解析其关键特性和使用方法。 一、.NET Co…
阅读更多...
AI程序员Devin的开源替代Devika

AI程序员Devin的开源替代Devika

前天介绍了 AI软件工程师 微软AI 程序员AutoDev&#xff0c;自主执行工程任务生成代码-CSDN博客 今天介绍下另一款Devin替代品&#xff0c;开源的Devika (另外还有一个开源的 OpenDevin : https://github.com/OpenDevin/OpenDevin) Devika https://github.com/stitionai/dev…
阅读更多...
Redis在多节点上如何实现分布式锁？

Redis在多节点上如何实现分布式锁？

在多个 Redis 节点上实现分布式锁可以通过以下步骤来完成&#xff1a; 选择分布式锁的实现方式&#xff1a;有多种实现分布式锁的方式&#xff0c;如使用 Redis 的普通锁、RedLock 等。RedLock 是一种基于多个 Redis 节点的分布式锁实现&#xff0c;它通过在多个节点上获取锁来…
阅读更多...
awesome-cheatsheets：超级速查表 - 编程语言、框架和开发工具的速查表

awesome-cheatsheets：超级速查表 - 编程语言、框架和开发工具的速查表

awesome-cheatsheets&#xff1a;超级速查表 - 编程语言、框架和开发工具的速查表&#xff0c;单个文件包含一切你需要知道的东西 官网&#xff1a;GitHub - skywind3000/awesome-cheatsheets: 超级速查表 - 编程语言、框架和开发工具的速查表&#xff0c;单个文件包含一切你需…
阅读更多...
Python：魔法函数

Python：魔法函数

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; Python 的魔法函数&#xff0c;又称为特殊方法&#xff0c;是 Python 类中定义的一组特殊的方法&#xff0c;具有一些独特的特性和用途。这些方法…
阅读更多...
今日总结2024/3/30

今日总结2024/3/30

今日学习了基本数论内容,LCM,GCD以及筛素数 GCD-最大公约数 int gcd(int a,int b){//迭代法 while(b){//要保证a大于b int ta%b; ab; bt; } return a }//辗转相除法int gcd(int a,int b){//递归法return b?gcd(b,a%b):a;//一定要保证a大于b } LCM-最小公倍数 可以套公式LC…
阅读更多...
解决WordPress文章的段落首行自动空两格的问题

解决WordPress文章的段落首行自动空两格的问题

写文章时&#xff0c;段落首行都会空两格&#xff0c;可是WordPress自带的编辑器却没有考虑到这一点&#xff0c;导致发布的文章首行都是顶格的&#xff0c;看起来很不习惯。 我们通常的解决方法都是在发布文章时把编辑器切换到“文本”模式&#xff0c;然后再在首行手动键入两…
阅读更多...
鸿蒙之路由跳转router

鸿蒙之路由跳转router

router的使用都是基于Entry修饰的组件。 都是基于resources/base/profile/main-page.json中的路由配置来跳转的 router提供下列的几个方法 1.pushUrl -压栈一层盖一层(在鸿蒙中页面栈支持最大数值是32) 2.replaceUrl会替换当前页面&#xff0c;不管是不是同一个页面&#xf…
阅读更多...
超声波雷达探测车位及信号处理方法

超声波雷达探测车位及信号处理方法

在APA泊车中用到了超声波雷达，第一次接触，总结研究之。 目录 1. 基于USS的泊车位识别及推荐1.1 基于AVM的泊车位识别1.2 障碍物识别2. 超声波雷达及车位探测信号处理1. 基于USS的泊车位识别及推荐 参考： F-APA车位搜索及障碍物识别控制原理 1.1 基于AVM的泊车位识别 (1)a…
阅读更多...
P6学习：解析P6 WBS-工作分解结构的原则

P6学习：解析P6 WBS-工作分解结构的原则

前言 WBS&#xff0c;及Work Breakdown Structure&#xff0c;中文工作分解结构&#xff0c;是总结工作阶段的项目的层次结构分解。 WBS 就像项目的大纲——它将项目分解为特定的可交付成果或阶段。 然后将活动添加到这些层中以创建项目计划的时间表。 WBS 使用流程会有所不…
阅读更多...
最新文章

Copyright @ 2022~2023