Vue 3集成海康Web插件实现视频监控
🌈个人主页:前端青山
🔥系列专栏:组件封装篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来组件封装篇专栏内容:Vue 3集成海康Web插件实现视频监控
引言
最近在项目中使用了 Vue 3 结合海康Web插件来实现视频监控功能,过程中遇到了一些挑战和解决方案。为了帮助开发小伙伴们更好地理解和应用这一技术栈,特此分享一下我们的经验和代码实现。
目录
项目背景
准备工作
1. 官网下载
2.安装插件
3.插件js文件引入vue项目
子组件结构
1. 模板部分
2. 脚本部分
2.1 导入依赖
2.2 定义属性和事件
2.3 定义变量
2.4 RSA加密
2.5 初始化插件
2.6 获取公钥
2.7 初始化视频播放
2.8 播放视频
2.9 隐藏和显示窗口
2.10 监听窗口关闭和调整大小
2.11 处理节点点击事件
2.12 暴露方法
3. 样式部分
父组件调用
1. 模板部分
2. 脚本部分
3. 样式部分
项目背景
在当前的项目中,我们需要实现一个视频监控系统,能够展示多个监控点的实时视频流,并支持用户通过树形结构选择不同的监控点。为了实现这一需求,我们选择了 Vue 3 作为前端框架,并集成了海康Web插件来处理视频流的播放和管理。
准备工作
1. 官网下载
在官网海康开放平台下载视频web插件
2.安装插件
3.插件js文件引入vue项目
将这3个js文件引入vue项目中的public
文件夹下新建文件夹放入
然后在index.html
文件中根路径引入配置文件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>前端青山</title></head><body><div id="screen"></div><!-- 连接内网部署离线天地图 --><script src="/h5player/h5player.min.js"></script><script src="/webControl/jquery-1.12.4.min.js"></script><script src="/webControl/jsencrypt.min.js"></script><script src="/webControl/web-control_1.2.5.min.js"></script><script type="module" src="/src/main.ts"></script><script src="/src/utils/d3/d3.js" charset="utf-8"></script><script src="/src/utils/d3/D3SvgOverlay.js"></script></body>
</html>
最后我们开始构建本次所需要调用的组件封装
功能
子组件结构
1. 模板部分
<template><div class="play_windows" v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.8)"><div class="tree-form"><el-treeref="tree":data="dataTree":props="defaultProps":highlight-current="true"@node-click="pitchOns"><template #default="{ node, data }"><span class="custom-tree-node">{{ data.name }}</span></template></el-tree></div><div class="videosp" ref="videosp"><div id='corpvideo' ref="corpvideo"></div></div></div>
</template>
-
<div class="play_windows">
: 主容器,包含视频树形结构和视频播放区域。 -
<el-tree>
: Element Plus 的树形组件,用于展示视频监控点的层级结构。 -
<div class="videosp">
: 视频播放区域,包含一个id
为corpvideo
的div
,用于嵌入海康Web插件。
2. 脚本部分
2.1 导入依赖
<script setup lang="ts">
import { ref, onMounted, nextTick, defineProps, defineExpose, defineEmits, watch, onBeforeUnmount } from 'vue';
import { ElMessage } from 'element-plus'
import { videoallList } from '@/api/screenVideo/index'
import { getGetByCode } from "@/api/videoSurveillance/index";
-
ref
: Vue 3 的响应式变量。 -
onMounted
: 生命周期钩子,组件挂载后执行。 -
nextTick
: 在 DOM 更新后执行。 -
defineProps
: 定义组件接收的属性。 -
defineEmits
: 定义组件触发的事件。 -
watch
: 监听数据变化。 -
onBeforeUnmount
: 组件卸载前执行。
2.2 定义属性和事件
const emit = defineEmits(["handleSpjkPOIClick"]);
const props = defineProps({playURL: String, // 视频urlsplitNum: Number, // 分屏播放,默认最大分屏4*4dataTree: Object, // 树 数据defaultProps: Object
});
-
props
: 定义组件接收的属性,包括playURL
、splitNum
、dataTree
和defaultProps
。 -
emit
: 定义组件触发的事件,如handleSpjkPOIClick
。
2.3 定义变量
let dataTree = ref<any>(props.dataTree);
let defaultProps = ref<any>(props.defaultProps);
let loading = ref<Boolean>(false);
const corpvideo = ref<any>();
const videosp = ref<any>(null);
let width: any = 0;
let height: any = 0;
let oWebControl: any = null;
let initCount: any = 0;
let pubKey: any = '';
-
dataTree
: 树形结构的数据。 -
defaultProps
: 树形组件的默认属性。 -
loading
: 加载状态。 -
corpvideo
: 视频播放容器的引用。 -
videosp
: 视频播放区域的引用。 -
width
和height
: 视频播放区域的宽度和高度。 -
oWebControl
: 海康Web插件的实例。 -
initCount
: 初始化计数器。 -
pubKey
: RSA公钥。
2.4 RSA加密
const setEncrypt = (value: any) => {let encrypt = new JSEncrypt();encrypt.setPublicKey(pubKey);return encrypt.encrypt(value);
}
-
setEncrypt
: 使用 JSEncrypt 库进行 RSA 加密。
2.5 初始化插件
const initPlugin = () => {nextTick(() => {width = videosp.value.offsetWidth;height = videosp.value.offsetHeight;oWebControl = new webControl({szPluginContainer: "corpvideo",iServicePortStart: 15900,iServicePortEnd: 15900,szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",cbConnectSuccess: function () {oWebControl.JS_StartService("window", {dllPath: "./VideoPluginConnect.dll"}).then(function () {oWebControl.JS_CreateWnd("corpvideo", width, height).then(function () {init();});}, function () {});},cbConnectError: function () {oWebControl = null;webControl.JS_WakeUp("VideoWebPlugin://");initCount++;if (initCount < 3) {setTimeout(function () {initPlugin();}, 3000);} else {console.log("插件启动失败,请检查插件是否安装!");}},cbConnectClose: function (bNormalClose: any) {oWebControl = null;webControl.JS_WakeUp("VideoWebPlugin://");initCount++;if (initCount < 3) {setTimeout(function () {initPlugin();}, 3000);} else {console.log("插件启动失败,请检查插件是否安装!");}}});});
}
-
initPlugin
: 创建海康Web插件实例,并设置连接成功、连接失败和连接关闭的回调函数。 -
cbConnectSuccess
: 连接成功后启动服务并创建视频播放窗口。 -
cbConnectError
: 连接失败后尝试重新连接。 -
cbConnectClose
: 连接关闭后尝试重新连接。
2.6 获取公钥
const getPubKey = (callback: any) => {oWebControl.JS_RequestInterface({funcName: "funcName",argument: JSON.stringify({keyLength: 1024})}).then((oData: any) => {if (oData.responseMsg.data) {pubKey = oData.responseMsg.data;callback();}});
}
-
getPubKey
: 请求公钥并调用回调函数。
2.7 初始化视频播放
const init = () => {getPubKey(() => {appkey = "appkey ";secret = setEncrypt("secret");ip = "ip ";playMode = 0;port = 443;snapDir = "D:\\SnapDir";videoDir = "D:\\VideoDir";layout = "1x1";enableHTTPS = 1;encryptedFields = 'secret';showToolbar = 1;showSmart = 1;buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";oWebControl.JS_RequestInterface({funcName: "init",argument: JSON.stringify({appkey: appkey,secret: secret,ip: ip,playMode: playMode,port: port,snapDir: snapDir,videoDir: videoDir,layout: layout,enableHTTPS: enableHTTPS,encryptedFields: encryptedFields,showToolbar: showToolbar,showSmart: showSmart,buttonIDs: buttonIDs})}).then((oData: any) => {oWebControl.JS_Resize(width, height);});});
}
-
init
: 使用公钥加密敏感信息,并请求初始化视频播放。
2.8 播放视频
const JSRequestInterface = (code: any) => {cameraIndexCode = code.replace(/(^\s*)/g, "").replace(/(\s*$)/g, "");oWebControl.JS_RequestInterface({funcName: "startPreview",argument: JSON.stringify({cameraIndexCode: cameraIndexCode,streamMode: streamMode,transMode: transMode,gpuMode: gpuMode,wndId: wndId})});
}
-
JSRequestInterface
: 请求播放指定监控点的视频。
2.9 隐藏和显示窗口
const JSHideWnd = () => {oWebControl.JS_HideWnd();oWebControl.JS_DestroyWnd().then(function () {}, function () {});
}const JSShowWnd = () => {initPlugin();oWebControl.JS_ShowWnd();
}
-
JSHideWnd
: 隐藏并销毁视频播放窗口。 -
JSShowWnd
: 重新初始化并显示视频播放窗口。
2.10 监听窗口关闭和调整大小
window.addEventListener('unload', JSHideWnd);
const getElementPosition = () => {width = window.innerWidth * 0.3;height = window.innerHeight * 0.56;oWebControl.JS_Resize(width, height);
};
window.addEventListener('resize', getElementPosition);
-
window.addEventListener('unload', JSHideWnd)
: 监听窗口关闭事件,隐藏并销毁视频播放窗口。 -
getElementPosition
: 获取窗口大小并调整视频播放窗口的尺寸。 -
window.addEventListener('resize', getElementPosition)
: 监听窗口调整大小事件,动态调整视频播放窗口的尺寸。
2.11 处理节点点击事件
const pitchOns = (e: any) => {if (!e || !e.self) {if (e.equipmentCoding) {handleAddChild(e);}return;}if (e.children) {emit("handleSpjkPOIClick", e.self.indexCode, '');return;} else {handleAddChild(e);}
}const handleAddChild = (e: any) => {if (!e || !e.self) {if (e.equipmentCoding) {videoUrl(e.equipmentCoding);}return;}if (e.self.indexCode) {let params = {UnitIndexCode: e.self.indexCode,};videoallList(params).then((res: any) => {if (res.data.rows.length == 0) {emit("handleSpjkPOIClick", e.self.indexCode, '');} else {e.children = e.children || [];res.data.rows = res.data.rows.map((child: any) => ({...child,name: child.equipmentName,}));res.data.rows.forEach((child: any) => {e.children.push(child);});(e as any).expanded = true;}});}
}const videoUrl = (equipmentCoding: string) => {let params = {equipmentCoding: equipmentCoding,};JSRequestInterface(equipmentCoding)
}
-
pitchOns
: 处理树形节点点击事件,根据节点类型调用相应的方法。 -
handleAddChild
: 处理节点的子节点加载,请求子节点数据并展开节点。 -
videoUrl
: 请求指定监控点的视频URL并播放视频。
2.12 暴露方法
defineExpose({initPlugin,JSHideWnd,JSShowWnd,JSRequestInterface
})
-
defineExpose
: 暴露组件的方法,供外部调用。
3. 样式部分
<style scoped lang="scss">
// 公共element样式
@import '@/styles/eleCustomize.scss';/* 样式 */
.play_windows {display: flex;width: 100% !important;.tree-form {width: 18vw;height: 28vw;overflow: auto;padding: 0;}
}
.videosp {width: 32vw;height: 60vh !important;#corpvideo {width: 100% !important;height: 100% !important;margin-top: 0.5vh;}#player-container-0 {width: 100% !important;height: 100% !important;}
}/* 屏幕宽度超过1920px时应用 */
@media (min-width: 8000px) {.play_windows {.tree-form {width: 10vw;height: 18vw;}}.videosp {width: 45vw;}
}::v-deep(.el-radio-button__inner) {width: 2vw;height: 1vw;display: flex;justify-content: center;align-items: center;font-size: 0.6vw;
}.video-button {width: 3vw;height: 1vw;display: flex;justify-content: center;align-items: center;font-size: 0.6vw;
}::v-deep(.el-radio-button__inner) {background: transparent !important;color: white !important;border: 0 !important;display: flex;align-items: center;height: 3.5vh !important;color: white !important;margin: 0.2vw;font-size: 1.6vh !important;background: transparent !important;border: 0.1vw solid #009392 !important;border-radius: 0.2vw !important;
}::v-deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {background: linear-gradient(90deg, rgba(0, 96, 204, 0.2) 0%, rgba(0, 165, 189, 0.6) 100%) !important;color: white !important;border-color: none !important;
}
</style>
子组件 ScreenMonitoring
主要实现了监控点的树形结构展示和视频播放控制。通过 el-tree
组件展示监控点的树形结构,并在节点被点击时调用视频播放插件的初始化和播放方法。子组件提供了 JSRequestInterface
方法请求视频流,initialize
方法初始化视频播放,以及 JSHideWnd
方法停止视频播放,确保视频监控功能的完整性和可控性。
父组件调用
1. 模板部分
<template><screenVideoDialog v-model="dialogVideo" title="公安监控" width="55%" @close="onCloseDialog" @open="onOpenDialog":draggable="false"><div class="my_dialog_slot" style="height:60vh;" v-if="dialogVideo"><ScreenMonitoring ref="screenmonitoring" :dataTree="dataTree" :defaultProps="defaultProps" @handleSpjkPOIClick="handleSpjkPOIClick" /></div></screenVideoDialog>
</template>
-
<screenVideoDialog>
: 这是一个自定义的对话框组件,用于显示视频监控内容。通过v-model
绑定dialogVideo
变量来控制对话框的显示和隐藏。 -
@close="onCloseDialog"
: 当对话框关闭时,调用onCloseDialog
方法。 -
@open="onOpenDialog"
: 当对话框打开时,调用onOpenDialog
方法。 -
<div class="my_dialog_slot">
: 包含ScreenMonitoring
子组件的容器,设置高度为60vh
,并使用v-if
指令确保只有在dialogVideo
为true
时才渲染。 -
<ScreenMonitoring>
: 子组件,用于显示视频监控内容。通过ref
绑定screenmonitoring
变量,以便在父组件中调用子组件的方法。传递dataTree
和defaultProps
属性,并监听handleSpjkPOIClick
事件。
2. 脚本部分
<script setup lang="ts">
import { ref } from 'vue';
import screenVideoDialog from '@/components/Dialog/screenVideoDialog.vue';
import ScreenMonitoring from '@/components/Dialog/screenMonitoring.vue';const dialogVideo = ref(false);
const dataTree = ref([// 树形结构数据
]);
const defaultProps = ref({children: 'children',label: 'label'
});
const screenmonitoring = ref<InstanceType<typeof ScreenMonitoring> | null>(null);// 处理监控点点击事件
const handleSpjkPOIClick = (poiId: string, coord: string) => {let params = {UnitIndexCode: poiId};screenmonitoring.value?.JSRequestInterface(poiId);// getGetByCodes(params).then(res => {// setTimeout(() => {// screenmonitoring.value?.initialize(res.data.urls[0], res.data.urls);// }, 1000);// });
};// 关闭对话框时停止视频
const onCloseDialog = (e: any) => {screenmonitoring.value?.JSHideWnd();
};// 打开对话框时初始化视频
const onOpenDialog = (e: any) => {screenmonitoring.value?.initPlugin();
};
</script>
-
dialogVideo
: 一个响应式变量,用于控制对话框的显示和隐藏。 -
dataTree
: 树形结构的数据,用于传递给ScreenMonitoring
子组件。 -
defaultProps
: 树形组件的默认属性,用于传递给ScreenMonitoring
子组件。 -
screenmonitoring
: 一个响应式变量,用于存储ScreenMonitoring
子组件的实例,以便在父组件中调用其方法。 -
handleSpjkPOIClick
: 处理监控点点击事件的方法。当用户点击某个监控点时,会调用子组件的JSRequestInterface
方法,并传递poiId
参数。注释掉的部分是获取视频 URL 的逻辑,可以根据实际需求启用。 -
onCloseDialog
: 当对话框关闭时调用的方法。调用子组件的JSHideWnd
方法,停止视频播放。 -
onOpenDialog
: 当对话框打开时调用的方法。调用子组件的initPlugin
方法,初始化视频播放。
3. 样式部分
<style scoped>
.my_dialog_slot {display: flex;justify-content: center;align-items: center;height: 100%;
}
</style>
-
.my_dialog_slot
: 设置对话框内容的样式,确保内容居中显示。
通过上述代码,我们在父组件中实现了视频监控对话框的显示和隐藏,并在对话框打开和关闭时调用子组件的相应方法,以控制视频的播放和停止。
本文详细介绍了如何使用 Vue 3 框架集成海康Web插件实现视频监控功能。通过定义属性、事件、变量,以及编写初始化、播放视频、处理节点点击事件等方法,我们成功实现了视频监控系统的前端部分。同时,通过样式部分的定制,确保了良好的用户体验。希望本文对读者在开发类似项目时有所帮助。
相关文章:

Vue 3集成海康Web插件实现视频监控
🌈个人主页:前端青山 🔥系列专栏:组件封装篇 🔖人终将被年少不可得之物困其一生 依旧青山,本期给大家带来组件封装篇专栏内容:Vue 3集成海康Web插件实现视频监控 引言 最近在项目中使用了 Vue 3 结合海康Web插件来实…...

多目标优化算法:多目标蛇鹫优化算法(MOSBOA)求解DTLZ1-DTLZ9,提供完整MATLAB代码
一、蛇鹫优化算法 蛇鹫优化算法(Secretary Bird Optimization Algorithm,简称SBOA)由Youfa Fu等人于2024年4月发表在《Artificial Intelligence Review》期刊上的一种新型的元启发式算法。该算法旨在解决复杂工程优化问题,特别是…...

机器翻译基础与模型 之三:基于自注意力的模型
基于RNN和CNN的翻译模型,在处理文字序列时有个问题:它们对序列中不同位置之间的依赖关系的建模并不直接。以CNN的为例,如果要对长距离依赖进行描述,需要多层卷积操作,而且不同层之间信息传递也可能有损失,这…...
如何使用PCL处理ROS Bag文件中的点云数据并重新保存 ubuntu20.04
如何使用PCL处理ROS Bag文件中的点云数据并重新保存 要精确地处理ROS bag中的点云数据并使用PCL进行处理,再将处理后的数据保存回新的ROS bag文件,以下方案提供了详细、专业和严谨的步骤。 步骤 1: 环境设置 确保安装了ROS和PCL,并配置好环…...
背包问题(动态规划)
背包问题是一种组合优化的问题,它有多种变体,但最常见的两种是0/1背包问题和完全背包问题。 0/1背包问题 问题描述: 假设你有一个背包,背包的容量为W(可以是重量或者体积等度量),同时有n个物品…...

从0开始学习机器学习--Day26--聚类算法
无监督学习(Unsupervised learning and introduction) 监督学习问题的样本 无监督学习样本 如图,可以看到两者的区别在于无监督学习的样本是没有标签的,换言之就是无监督学习不会赋予主观上的判断,需要算法自己去探寻区别,第二张…...
Vue3插槽v-slot使用方式
在 Vue 3 中,v-slot 是用来定义和使用插槽的指令。插槽是 Vue 的一个功能,允许你在组件内部定义占位内容,便于在父组件中提供动态内容。以下是 v-slot 的详细使用方法: 1. 基础使用 <template><BaseComponent><te…...

Axure二级菜单下拉交互实例
1.使用boxlabe进行基础布局 2.设置鼠标悬浮和选中状态 3.转换为动态面板 选中所有二级菜单,进行按钮组转换 选中所有二级菜单,进行动态面板转换 4.给用户管理增加显示/隐藏事件 1)选择toggle代表上拉和下拉切换加载 2)勾选Bring to Front,并选择Push/Pull Widgets代表收缩时…...

华为VPN技术
1.启动设备 2.配置IP地址 [FW1]int g1/0/0 [FW1-GigabitEthernet1/0/0]ip add 192.168.1.254 24 [FW1-GigabitEthernet1/0/0]int g1/0/1 [FW1-GigabitEthernet1/0/1]ip add 100.1.1.1 24 [FW1-GigabitEthernet1/0/1]service-manage ping permit [FW2]int g1/0/0 [FW2-Gi…...

CommonsBeanutils与Shiro发序列化利用的学习
一、前言 前面的学习中,过了一遍cc1-cc7的利用链,在CC2的利用链中,学习了 java.util.PriorityQueue,它在Java中是一个优先队列,队列中每一个元素都有自己的优先级。在反序列化这个对象时,为了保证队列顺序…...

运维云计算SRE-第2周
1. 总结学过的权限,属性及ACL相关命令及选项,示例。 一、Linux安全模型 (一)资源分派 Authentication(认证):验证用户身份,确保登录系统的用户是合法的。 Authorization(…...
React Native 全栈开发实战班 - 用户界面进阶之响应式设计实践
在移动应用开发中,响应式设计 是确保应用在不同设备、屏幕尺寸和方向下都能提供良好用户体验的关键。React Native 提供了多种工具和技巧来实现响应式设计,包括 Flexbox 布局、动态样式、屏幕尺寸适配等。本章节将详细介绍如何在 React Native 中进行响应…...

SlickGrid点击/双击事件
分析 SlickGrid提供了点击事件方法grid.onClick和grid.onDblClick用于捕获用户对表格列的点击,捕获到点击事件之后,修改表格数据,然后使用grid.updateRow方法将修改后的数据更新到表格中。 展示 代码 创建grid(HTML)…...

一文详细深入总结服务器选型
1. 题记: 服务器选型工作是项目规划检讨的一项非常重要的工作,本文详细深入总结服务器选型。 2. 服务器基础知识概览 2.1 服务器的定义与功能 2.1 .1 定义 服务器是一种高性能计算机,其设计目的是在网络中提供服务。它可以处理来自多个客…...
一、Nginx反向代理(七层代理)二、Nginx的TCP/UDP调度器(四层代理)
一、Nginx反向代理(七层代理) 实验要求 使用Nginx实现Web反向代理功能,实现如下功能: 后端Web服务器两台,可以使用httpd实现Nginx采用轮询的方式调用后端Web服务器两台Web服务器的权重要求设置为不同的值最大失败次数为…...

CSS+JQuery 实现弹力球效果,碰到屏幕边框弹回
实现弹力球效果,碰到屏幕边框弹回,效果如下 代码如下: <img src"../image/ball.png" alt"" class"ball"> <style>.ball {position: fixed;top: 50vh;left: 50vw;width: 15vw;height: 15vw;border…...
shell编程规范和脚本变量
什么是shell 人和计算机内核之间的中介: 计算机的语言是二进制,把人类的语言翻译成计算机能够识别的语言,然后让内核来处理 内核完成之后要把结果反馈给用户,要把计算机的翻译成人类能够识别的语言 命令解释器,pyc…...

jspm美容院管理系统
摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据库设计…...

Prometheus结合K8s(二)使用
上一篇介绍了如何搭建 Prometheus结合K8s(一)搭建-CSDN博客,这章介绍使用 页面访问 kubectl get svc -n prom 看promeheus和granfana的端口访问页面 Prometheus 点击status—target,可以看到metrics的数据来源,即各…...
【虚幻引擎】UE5数字人开发实战教程
本套课程将会交大家如何去开发属于自己的数字人,包含大模型接入,流式输出,语音识别,语音合成,口型驱动,动画蓝图,语音唤醒等功能。 课程介绍视频如下: 【虚幻引擎】UE5 历时一个多月…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
MVC 数据库
MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
数据库分批入库
今天在工作中,遇到一个问题,就是分批查询的时候,由于批次过大导致出现了一些问题,一下是问题描述和解决方案: 示例: // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
安卓基础(Java 和 Gradle 版本)
1. 设置项目的 JDK 版本 方法1:通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分,设置 Gradle JDK 方法2:通过 Settings File → Settings... (或 CtrlAltS)…...

Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务,但是又不想花钱,所以就想着自己搭建一个,刚好我们用的一个开源框架已经集成了MinIO,所以就选了这个 我这边对文件服务性能要求不是太高,单机版就可以 安装非常简单,几个命令就…...