feat 添加新功能多像摄像头切换

This commit is contained in:
Ironsp
2026-07-27 09:05:53 +08:00
parent 8768ec3729
commit 1b55bf6935
3 changed files with 33 additions and 8 deletions

View File

@@ -5,10 +5,6 @@
"ComputedRef": true, "ComputedRef": true,
"DirectiveBinding": true, "DirectiveBinding": true,
"EffectScope": true, "EffectScope": true,
"ElLoading": true,
"ElMessage": true,
"ElMessageBox": true,
"ElNotification": true,
"ExtractDefaultPropTypes": true, "ExtractDefaultPropTypes": true,
"ExtractPropTypes": true, "ExtractPropTypes": true,
"ExtractPublicPropTypes": true, "ExtractPublicPropTypes": true,

View File

@@ -75,8 +75,8 @@ export const initHls = (monitorVideoUrl, monitorVideoRef, isDialogVisible?: () =
if (Hls.isSupported()) { if (Hls.isSupported()) {
const hls = new Hls({ const hls = new Hls({
// ★ ZLM 注册流需要时间,配置自动重试 // ★ ZLM 注册流需要时间,配置自动重试
manifestLoadingMaxRetry: 20, manifestLoadingMaxRetry: 5,
manifestLoadingRetryDelay: 500, manifestLoadingRetryDelay: 1000,
manifestLoadingTimeOut: 5000, manifestLoadingTimeOut: 5000,
levelLoadingMaxRetry: 5, levelLoadingMaxRetry: 5,
levelLoadingRetryDelay: 500, levelLoadingRetryDelay: 500,
@@ -86,8 +86,32 @@ export const initHls = (monitorVideoUrl, monitorVideoRef, isDialogVisible?: () =
liveSyncDurationCount: 3, liveSyncDurationCount: 3,
liveDurationInfinity: true, liveDurationInfinity: true,
// 缓冲区上限,防止无限增长导致内存爆掉 // 缓冲区上限,防止无限增长导致内存爆掉
maxBufferLength: 30, maxBufferLength: 5,
maxMaxBufferLength: 60 maxMaxBufferLength: 10,
// manifest 加载:最多重试 5 次,每次间隔 1 秒,单次超时 10 秒
// manifestLoadingMaxRetry: 5,
// manifestLoadingRetryDelay: 1000,
// manifestLoadingTimeOut: 10000,
// // level清晰度加载最多重试 3 次,每次间隔 1 秒,单次超时 15 秒
// levelLoadingMaxRetry: 3,
// levelLoadingRetryDelay: 1000,
// levelLoadingTimeOut: 15000,
// lowLatencyMode: true,
// startLevel: -1,
// // 直播同步:滞后 2 个分片时自动追赶 live edge
// liveSyncDurationCount: 2,
// liveDurationInfinity: true,
// // 不保留已播放过的旧缓冲,减少内存占用
backBufferLength: 0
// // 缓冲区上限 5~10 秒,限制同时发出的分片请求数,防止占满连接池
// maxBufferLength: 5,
// maxMaxBufferLength: 10,
// // 分片加载:最多重试 3 次,每次间隔 2 秒,单次超时 15 秒
// fragLoadingMaxRetry: 3,
// fragLoadingRetryDelay: 2000,
// fragLoadingTimeOut: 15000
// // 允许缓冲区内最大 0.5 秒的空洞,避免小卡顿触发不必要的重载
// maxBufferHole: 0.5
}); });
hls.loadSource(url); hls.loadSource(url);

View File

@@ -232,6 +232,7 @@
<div class="flex w-full items-center justify-between gap-2 min-w-0 pr-8"> <div class="flex w-full items-center justify-between gap-2 min-w-0 pr-8">
<span class="truncate">{{ videoName }}-{{ monitoringArea }}监控</span> <span class="truncate">{{ videoName }}-{{ monitoringArea }}监控</span>
<div> <div>
<el-button type="primary" class="shrink-0" @click="handleVideo()">切换摄像头</el-button>
<el-button type="primary" class="shrink-0" @click="handleRefresh">刷新</el-button> <el-button type="primary" class="shrink-0" @click="handleRefresh">刷新</el-button>
<el-button v-if="!seeSee" type="primary" class="shrink-0" @click="drawImage()">绘制区域</el-button> <el-button v-if="!seeSee" type="primary" class="shrink-0" @click="drawImage()">绘制区域</el-button>
<el-button v-if="seeSee" type="primary" class="shrink-0" @click="clearImage()">清空区域</el-button> <el-button v-if="seeSee" type="primary" class="shrink-0" @click="clearImage()">清空区域</el-button>
@@ -793,6 +794,10 @@ watch(
videoName.value = newValue === 1 ? '绘制区域' : '实时监控'; videoName.value = newValue === 1 ? '绘制区域' : '实时监控';
} }
); );
/** 刷新按钮操作 */
const handleVideo = async (row?: DemoVO) => {
console.log('11111111111');
};
/** 刷新按钮操作 */ /** 刷新按钮操作 */
const handleRefresh = async () => { const handleRefresh = async () => {