From fc55533e7c2e41263dc06270966e287755c975e2 Mon Sep 17 00:00:00 2001
From: wangrong <wangrong@shsening.com>
Date: 星期日, 23 八月 2026 13:33:27 +0800
Subject: [PATCH] 修复站点地图摄像头播放
---
src/modules/ezuikit/components/ezuikit-player.vue | 187 ++++++++++++++++++----------------------------
1 files changed, 75 insertions(+), 112 deletions(-)
diff --git a/src/modules/ezuikit/components/ezuikit-player.vue b/src/modules/ezuikit/components/ezuikit-player.vue
index 5802dfe..ed546e9 100644
--- a/src/modules/ezuikit/components/ezuikit-player.vue
+++ b/src/modules/ezuikit/components/ezuikit-player.vue
@@ -23,181 +23,144 @@
}
const props = defineProps<{
- containerId: string; // 銆愰噸瑕併�戝閮ㄤ紶鍏ュ敮涓�DOM ID
+ containerId: string;
accessToken: string;
url: string;
staticPath?: string;
+ /** 棣栧抚鍚庤嚜鍔ㄥ仠姝㈡媺娴侊紙淇濈暀鐢婚潰锛夛紝榛樿 false */
+ pauseAfterFirstFrame?: boolean;
}>();
let player: IPlayer | null = null;
+let resizeObserver: ResizeObserver | null = null;
+let inited = false;
// 鏂规硶鏆撮湶缁欑埗缁勪欢
-const play = () => {
- if (player) player.play()
-};
-
-const stop = () => {
- if (player) player.stop();
-};
-
+const play = () => { if (player) player.play(); };
+const stop = () => { if (player) player.stop(); };
const getOSDTime = () => {
- if (player)
- player.getOSDTime().then((data: any) => {
- console.log("getOSDTime 鑾峰彇 鏁版嵁", data);
- });
+ if (player) player.getOSDTime().then((data: any) => console.log("getOSDTime", data));
};
-
const capturePicture = () => {
- if (player)
- player.capturePicture(`${new Date().getTime()}`).then((data: any) => {
- console.log("capturePicture 鑾峰彇 鏁版嵁", data);
- });
+ if (player) player.capturePicture(`${Date.now()}`).then((data: any) => console.log("capturePicture", data));
};
-
-const openSound = () => {
- if (player) player.openSound();
-};
-
-const closeSound = () => {
- if (player) player.closeSound();
-};
-
+const openSound = () => { if (player) player.openSound(); };
+const closeSound = () => { if (player) player.closeSound(); };
const startSave = () => {
- if (player)
- player.startSave(`${new Date().getTime()}`).then((data: any) => {
- console.log("startSave 鑾峰彇 鏁版嵁", data);
- });
+ if (player) player.startSave(`${Date.now()}`).then((data: any) => console.log("startSave", data));
};
-
const stopSave = () => {
- if (player)
- player.stopSave().then((data: any) => {
- console.log("stopSave 鑾峰彇 鏁版嵁", data);
- });
+ if (player) player.stopSave().then((data: any) => console.log("stopSave", data));
};
-
-const startTalk = () => {
- if (player) player.startTalk();
-};
-
-const stopTalk = () => {
- if (player) player.stopTalk();
-};
-
-const fullscreen = () => {
- if (player) player.fullscreen();
-};
+const startTalk = () => { if (player) player.startTalk(); };
+const stopTalk = () => { if (player) player.stopTalk(); };
+const fullscreen = () => { if (player) player.fullscreen(); };
const destroy = async () => {
+ resizeObserver?.disconnect();
+ resizeObserver = null;
if (player) {
try {
+ await player.stop().catch(() => {});
await player.destroy();
} catch (e) {
console.warn("鎾斁鍣ㄩ攢姣佸紓甯�", e);
}
player = null;
+ inited = false;
}
};
-let playedOnce = false;
const init = () => {
- if (player) {
- destroy();
- }
+ if (inited) return;
+ if (player) { player.destroy(); player = null; }
if (!props.containerId || !props.url || !props.accessToken) return;
+
+ const el = document.getElementById(props.containerId);
+ if (!el) return;
+
+ // 鉁� 瀹瑰櫒涓嶅彲瑙� 鈫� 绛夊彲瑙佸悗鍐嶅垵濮嬪寲
+ if (!el.offsetParent || el.clientWidth === 0) {
+ resizeObserver?.disconnect();
+ resizeObserver = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ const t = entry.target as HTMLElement;
+ if (t.clientWidth > 0 && t.clientHeight > 0) {
+ resizeObserver?.disconnect();
+ resizeObserver = null;
+ init();
+ break;
+ }
+ }
+ });
+ resizeObserver.observe(el);
+ return;
+ }
+
+ // 鉁� 鏍规嵁 prop 鍐冲畾 autoplay
+ const shouldAutoplay = props.pauseAfterFirstFrame ?? false;
player = new EZUIKitPlayer({
id: props.containerId,
accessToken: props.accessToken,
url: props.url,
- autoplay: true,
+ autoplay: shouldAutoplay,
template: "pcLive",
height: 360,
scaleMode: 1,
staticPath: props.staticPath || "",
- env: {
- domain: "https://open.ys7.com",
- },
- loggerOptions: {
- level: "INFO",
- name: "ezuikit",
- showTime: true,
- },
+ env: { domain: "https://open.ys7.com" },
+ loggerOptions: { level: "INFO", name: "ezuikit", showTime: true },
streamInfoCBType: 1,
- handleError: (err: any) => {
- console.error("handleError", err);
- }
+ handleError: (err: any) => console.error("handleError", err),
});
- player.on(EZUIKitPlayer.EVENTS.firstFrameDisplay, () => {
- if (playedOnce) return;
- playedOnce = true;
- setTimeout(() => {
- player?.pause();
- }, 1000);
- });
+ // 鉁� 棣栧抚鍚庡仠姝㈡媺娴侊紙淇濈暀鐢婚潰锛夛紝鐢� stop() 涓嶇敤 pause()
+ if (shouldAutoplay) {
+ let playedOnce = false;
+ player.on(EZUIKitPlayer.EVENTS.firstFrameDisplay, () => {
+ if (playedOnce) return;
+ playedOnce = true;
+ console.warn(`[ezuikit ${props.containerId}] firstFrameDisplay 鈫� 1.5s 鍚� stop 淇濈暀鐢婚潰`);
+ setTimeout(() => {
+ player?.pause();
+ }, 1000);
+ });
+ }
- // 浜嬩欢鐩戝惉
+ // 閫氱敤浜嬩欢
+ player.on(EZUIKitPlayer.EVENTS.firstFrameDisplay, () => {
+ console.warn(`[ezuikit ${props.containerId}] firstFrameDisplay 鉁卄);
+ });
player.on(EZUIKitPlayer.EVENTS.videoInfo, (info: any) => {
console.warn("videoInfo", info);
});
player.on(EZUIKitPlayer.EVENTS.audioInfo, (info: any) => {
console.warn("audioInfo", info);
});
- player.on(EZUIKitPlayer.EVENTS.firstFrameDisplay, () => {
- console.warn("firstFrameDisplay ");
- });
player.on(EZUIKitPlayer.EVENTS.streamInfoCB, (info: any) => {
- console.warn("streamInfoCB ", info);
+ console.warn("streamInfoCB", info);
});
+
+ inited = true;
};
-// 鐩戝惉鎾斁鍦板潃/token鍙樺寲锛岄噸鏂板垵濮嬪寲
watch([() => props.url, () => props.accessToken], () => {
- init();
+ destroy().then(() => init());
});
-onMounted(() => {
- init();
-});
+onMounted(() => { init(); });
+onBeforeUnmount(() => { destroy(); });
-// 缁勪欢閿�姣侀噴鏀炬挱鏀惧櫒璧勬簮
-onBeforeUnmount(() => {
- destroy();
-});
-
-// 瀵瑰鏆撮湶瀹炰緥鏂规硶
defineExpose({
- play,
- stop,
- openSound,
- closeSound,
- capturePicture,
- startSave,
- stopSave,
- startTalk,
- stopTalk,
- fullscreen,
- getOSDTime,
- destroy
+ play, stop, openSound, closeSound, capturePicture,
+ startSave, stopSave, startTalk, stopTalk, fullscreen, getOSDTime, destroy
});
</script>
<template>
<div class="ez-player-card">
- <!-- ID鐢辩埗缁勪欢浼犲叆锛屼繚璇佸叏灞�鍞竴 -->
- <div :id="containerId" style="height: 400px;width:100%"></div>
- <!--
- <div class="player-buttons" style="margin-top:8px;display:flex;gap:6px;flex-wrap:wrap">
- <button @click="init">init</button>
- <button @click="stop">stop</button>
- <button @click="play">play</button>
- <button @click="openSound">寮�澹伴煶</button>
- <button @click="closeSound">鍏冲０闊�</button>
- <button @click="capturePicture">鎴浘</button>
- <button @click="fullscreen">鍏ㄥ睆</button>
- </div>
- -->
+ <div :id="containerId" style="height: 360px;width:100%"></div>
</div>
</template>
--
Gitblit v1.9.1