@yimou6/common-ui 1.11.3 → 1.11.4

package/es/components/tzj-player/src/easyPlayer.vue2.mjs

@@ -1,5 +1,8 @@
-import { defineComponent, useSlots, computed, shallowRef, ref, onMounted, watch, onBeforeUnmount, nextTick, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from 'vue';
+import { defineComponent, useSlots, computed, ref, shallowRef, onMounted, nextTick, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString, createBlock, renderSlot } from 'vue';
+import { debounce } from 'lodash-es';
+import './errorPage.vue.mjs';
 import { TzjPlayerProps, uuid } from './tzj-player.mjs';
+import _sfc_main$1 from './errorPage.vue2.mjs';
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
@@ -7,14 +10,13 @@ const _hoisted_1 = {
   key: 0,
   class: "i-tzj-easyPlayer__top"
 };
-const _hoisted_2 = {
-  key: 1,
-  class: "i-tzj-player__error"
-};
-const _hoisted_3 = {
-  key: 2,
-  class: "i-tzj-player__error"
-};
+const maxReconnectAttempts = 3;
+const DEBOUNCE_TIME = 5e3;
+const HIGH_MEMORY_THRESHOLD = 80;
+const EMERGENCY_CLEAN_TIMEOUT = 1e3;
+const MEMORY_CHECK_INTERVAL = 3e3;
+const MEMORY_PEAK_THRESHOLD = 1100;
+const CLEAN_INTERVAL = 2 * 60 * 1e3;
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "EasyPlayer"
@@ -27,13 +29,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     "play",
     "pause",
     "mute",
-    "videoInfo"
+    "videoInfo",
+    "memoryWarn"
   ],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
     const slots = useSlots();
     const customBar = computed(() => slots.customBar);
+    const areaName = ref(props.areaName);
+    const deviceSerial = ref(props.deviceSerial);
     let player = null;
     const id = uuid();
     const playerRef = shallowRef();
@@ -42,30 +47,198 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const isFullscreen = ref(false);
     const videoInfo = ref(null);
     const realFullscreen = ref(false);
+    const reconnectAttempts = ref(0);
+    const reconnectCoolDown = ref(0);
+    const requestCache = /* @__PURE__ */ new Map();
+    const timers = {
+      initTimer: null,
+      cleanupInterval: null,
+      memoryCheckInterval: null,
+      reconnectTimer: null,
+      debounceTimer: null,
+      lightCleanInterval: null,
+      rebuildInterval: null
+    };
+    const eventHandlers = [];
+    const isPlayerIniting = ref(false);
+    const isPlayerDestroyed = ref(false);
+    let lastMemoryPeak = 0;
     onMounted(() => {
-      initPlayer(props.url || "");
+      nextTick(() => {
+        if (playerRef.value) {
+          initPlayer(props.url || "");
+        } else {
+          setTimeout(() => {
+            if (playerRef.value) {
+              initPlayer(props.url || "");
+            } else {
+              console.error("\u64AD\u653E\u5668\u5BB9\u5668\u5143\u7D20\u672A\u627E\u5230\uFF0C\u64AD\u653E\u5668\u521D\u59CB\u5316\u5931\u8D25");
+            }
+          }, 100);
+        }
+      });
+      startMemoryMonitoring();
+      const originalFetch = window.fetch;
+      window.fetch = async (input, init) => {
+        const url = typeof input === "string" ? input : input.toString();
+        if (url.includes(".ts") || url.includes(".m3u8")) {
+          const newInit = {
+            ...init,
+            headers: {
+              ...init == null ? void 0 : init.headers,
+              "Cache-Control": "no-cache, no-store, must-revalidate",
+              Pragma: "no-cache",
+              Expires: "0"
+            },
+            cache: "no-store"
+          };
+          return originalFetch(input, newInit);
+        }
+        return originalFetch(input, init);
+      };
+      if (timers.lightCleanInterval) clearInterval(timers.lightCleanInterval);
+      timers.lightCleanInterval = window.setInterval(() => {
+        var _a, _b;
+        if (player && !isPlayerDestroyed.value && !isPlayerIniting.value) {
+          console.log("\u30102\u5206\u949F\u5B9A\u65F6\u3011\u6267\u884C\u8F7B\u91CF\u6E05\u7406\uFF0C\u963B\u6B62\u5185\u5B58\u4E0A\u6DA8");
+          if (player.hls && player.hls.bufferController) {
+            const now = Date.now() / 1e3;
+            player.hls.bufferController.trim(now - 2, now);
+          }
+          (_a = player.clearCache) == null ? void 0 : _a.call(player);
+          (_b = player.flushFrames) == null ? void 0 : _b.call(player);
+          if (window.gc) {
+            window.gc();
+          }
+        }
+      }, CLEAN_INTERVAL);
+      if (timers.rebuildInterval) clearInterval(timers.rebuildInterval);
+      timers.rebuildInterval = window.setInterval(
+        () => {
+          if (player && !isPlayerDestroyed.value && !realFullscreen.value) {
+            console.log("\u301010\u5206\u949F\u515C\u5E95\u3011\u65E0\u7F1D\u91CD\u5EFA\u64AD\u653E\u5668\uFF0C\u5185\u5B58\u76F4\u63A5\u56DE\u843D");
+            seamlessRebuildPlayer();
+          }
+        },
+        10 * 60 * 1e3
+      );
     });
+    const formatUrl = /* @__PURE__ */ __name((url) => {
+      if (!url || url.trim() === "") return "";
+      const specialProtocols = ["rtmp://", "ws://", "wss://", "rtsp://"];
+      if (specialProtocols.some((protocol) => url.startsWith(protocol))) {
+        return url;
+      }
+      if (url.startsWith("http://") || url.startsWith("https://")) {
+        return url;
+      }
+      if (typeof window !== "undefined" && window.location) {
+        return `${window.location.origin}${url.startsWith("/") ? "" : "/"}${url}`;
+      }
+      return url;
+    }, "formatUrl");
+    async function initPlayer(url) {
+      if (props.debug) {
+        console.log("\u521D\u59CB\u5316\u64AD\u653E\u5668", url);
+      }
+      if (url && requestCache.has(url)) {
+        const cached = requestCache.get(url);
+        const now = Date.now();
+        if (now - cached.timestamp < DEBOUNCE_TIME) {
+          console.log(
+            `\u8BF7\u6C42\u9632\u6296\uFF1A${url} \u5728 ${DEBOUNCE_TIME}ms \u5185\u5DF2\u8BF7\u6C42\u8FC7\uFF0C\u8DF3\u8FC7\u672C\u6B21\u8BF7\u6C42`
+          );
+          return;
+        }
+      }
+      if (url) {
+        requestCache.set(url, { timestamp: Date.now(), url });
+        const now = Date.now();
+        for (const [key, value] of requestCache.entries()) {
+          if (now - value.timestamp > 6e4) {
+            requestCache.delete(key);
+          }
+        }
+      }
+      if (isPlayerIniting.value) return;
+      isPlayerIniting.value = true;
+      try {
+        destroy(true);
+        removePlayerDom();
+        isPlayerDestroyed.value = false;
+        if (!url) {
+          playSuccess.value = false;
+          isPlayerIniting.value = false;
+          return;
+        }
+        playUrl.value = formatUrl(url);
+        if (props.debug) {
+          console.log("\u683C\u5F0F\u5316\u540E\u7684url", playUrl.value);
+        }
+        if (typeof window !== "undefined" && (window == null ? void 0 : window.EasyPlayerPro)) {
+          await createPlayer();
+        } else if (typeof window !== "undefined") {
+          if (timers.initTimer !== null) clearInterval(timers.initTimer);
+          let initTimeout = 0;
+          timers.initTimer = window.setInterval(() => {
+            initTimeout += 100;
+            if (window == null ? void 0 : window.EasyPlayerPro) {
+              createPlayer();
+              if (timers.initTimer !== null) {
+                clearInterval(timers.initTimer);
+                timers.initTimer = null;
+              }
+            }
+            if (initTimeout >= 1e4) {
+              if (timers.initTimer !== null) {
+                clearInterval(timers.initTimer);
+                timers.initTimer = null;
+              }
+              playSuccess.value = false;
+              emits("error", new Error("EasyPlayerPro\u52A0\u8F7D\u8D85\u65F6"));
+            }
+          }, 100);
+        }
+      } catch (e) {
+        console.error("\u64AD\u653E\u5668\u521D\u59CB\u5316\u5931\u8D25:", e);
+        playSuccess.value = false;
+        emits("error", e);
+      } finally {
+        isPlayerIniting.value = false;
+      }
+    }
+    __name(initPlayer, "initPlayer");
+    const debouncedInitPlayer = debounce((newUrl) => {
+      reconnectAttempts.value = 0;
+      reconnectCoolDown.value = 0;
+      initPlayer(newUrl || "");
+    }, 500);
     watch(
       () => props.url,
       (newUrl) => {
-        initPlayer(newUrl || "");
-      }
+        console.log("URL\u53D8\u5316\uFF1A", newUrl);
+        if (timers.reconnectTimer) {
+          clearTimeout(timers.reconnectTimer);
+          timers.reconnectTimer = null;
+        }
+        debouncedInitPlayer(newUrl);
+      },
+      { immediate: false }
     );
-    onBeforeUnmount(() => {
-      if (props.debug) {
-        console.log("\u7EC4\u4EF6\u5378\u8F7D");
-      }
-      playUrl.value = "";
-      destroy();
-    });
     const play = /* @__PURE__ */ __name((url) => {
+      console.log("\u64AD\u653E", url);
+      if (isPlayerDestroyed.value) return;
       if (url) {
+        reconnectAttempts.value = 0;
+        reconnectCoolDown.value = 0;
         initPlayer(url);
       } else {
-        if (player) {
+        if (player && !isPlayerDestroyed.value) {
           player.play(playUrl.value);
         } else {
-          destroy();
+          destroy(false);
+          isPlayerDestroyed.value = false;
+          initPlayer(playUrl.value);
         }
       }
     }, "play");
@@ -74,89 +247,424 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       if (props.debug) {
         console.log("\u6682\u505C");
       }
-      (_a = player == null ? void 0 : player.pause) == null ? void 0 : _a.call(player);
+      if (player && !isPlayerDestroyed.value) {
+        (_a = player.pause) == null ? void 0 : _a.call(player);
+      }
     }, "playerPause");
     const playerScreenShot = /* @__PURE__ */ __name(() => {
       var _a;
       if (props.debug) {
         console.log("\u622A\u56FE");
       }
-      (_a = player == null ? void 0 : player.screenshot) == null ? void 0 : _a.call(
-        player,
-        `${props.areaName}_${(/* @__PURE__ */ new Date()).getTime()}`,
-        "png",
-        0.5,
-        "download"
-      );
+      if (player && !isPlayerDestroyed.value) {
+        (_a = player.screenshot) == null ? void 0 : _a.call(
+          player,
+          `${props.areaName}_${(/* @__PURE__ */ new Date()).getTime()}`,
+          "png",
+          0.5,
+          "download"
+        );
+      }
     }, "playerScreenShot");
     const playerFullscreen = /* @__PURE__ */ __name((fullscreen) => {
       var _a, _b, _c;
+      if (isPlayerDestroyed.value) return;
       realFullscreen.value = fullscreen;
       if (props.debug) {
-        console.log("\u5168\u5C4F");
+        console.log("\u5168\u5C4F\u5207\u6362:", fullscreen);
       }
       if (typeof document !== "undefined") {
-        if (!fullscreen) {
-          (_a = document.exitFullscreen) == null ? void 0 : _a.call(document);
-        } else {
-          (_c = (_b = playerRef.value) == null ? void 0 : _b.requestFullscreen) == null ? void 0 : _c.call(_b);
+        try {
+          if (!fullscreen) {
+            if (document.fullscreenElement) {
+              (_a = document.exitFullscreen) == null ? void 0 : _a.call(document);
+            }
+          } else {
+            if (playerRef.value && !document.fullscreenElement) {
+              (_c = (_b = playerRef.value).requestFullscreen) == null ? void 0 : _c.call(_b, {
+                navigationUI: "hide"
+              });
+            }
+          }
+          isFullscreen.value = !fullscreen;
+        } catch (e) {
+          console.error("\u5168\u5C4F\u64CD\u4F5C\u5931\u8D25:", e);
         }
-        setTimeout(() => {
-          destroy();
-          initPlayer(playUrl.value);
-        }, 200);
       }
-      isFullscreen.value = !fullscreen;
     }, "playerFullscreen");
-    __expose({
-      play,
-      destroy,
-      getPlayer: /* @__PURE__ */ __name(() => player, "getPlayer"),
-      pause: playerPause,
-      screenshot: playerScreenShot,
-      fullscreen: playerFullscreen,
-      isMute: /* @__PURE__ */ __name(() => {
-        var _a;
-        return (_a = player == null ? void 0 : player.isMute) == null ? void 0 : _a.call(player);
-      }, "isMute"),
-      setMute: /* @__PURE__ */ __name((mute) => {
-        var _a;
-        (_a = player == null ? void 0 : player.setMute) == null ? void 0 : _a.call(player, mute);
-      }, "setMute")
-    });
-    const formatUrl = /* @__PURE__ */ __name((url) => {
-      if (!url) return "";
-      if (url.startsWith("http://") || url.startsWith("https://")) {
-        return url;
+    function seamlessRebuildPlayer() {
+      var _a, _b;
+      if (isPlayerDestroyed.value || isPlayerIniting.value) return;
+      isPlayerIniting.value = true;
+      const currentUrl = playUrl.value;
+      const currentVolume = ((_a = player.getVolume) == null ? void 0 : _a.call(player)) || 1;
+      const isMuted = ((_b = player.isMute) == null ? void 0 : _b.call(player)) || false;
+      const tempPlayerDiv = document.createElement("div");
+      tempPlayerDiv.id = `temp-${id}`;
+      tempPlayerDiv.style.position = "absolute";
+      tempPlayerDiv.style.top = "0";
+      tempPlayerDiv.style.left = "0";
+      tempPlayerDiv.style.width = "100%";
+      tempPlayerDiv.style.height = "100%";
+      tempPlayerDiv.style.zIndex = "999";
+      tempPlayerDiv.style.backgroundColor = "#000";
+      if (playerRef.value) {
+        playerRef.value.appendChild(tempPlayerDiv);
       }
-      if (typeof window !== "undefined" && window.location) {
-        return `${window.location.origin}${url.startsWith("/") ? "" : "/"}${url}`;
+      let tempPlayer = null;
+      if (window.EasyPlayerPro) {
+        tempPlayer = new window.EasyPlayerPro(tempPlayerDiv, {
+          isLive: true,
+          hasAudio: true,
+          bufferTime: 0.01,
+          hwAcceleration: false,
+          enableStashBuffer: false,
+          maxBufferSize: 256 * 1024,
+          maxBufferLength: 1
+        });
+        tempPlayer.play(currentUrl);
+        tempPlayer.setVolume(currentVolume);
+        if (isMuted) tempPlayer.setMute(1);
       }
-      return url;
-    }, "formatUrl");
-    async function initPlayer(url) {
+      destroy(false);
+      setTimeout(() => {
+        if (tempPlayer && playerRef.value) {
+          const originalDom = document.getElementById(id);
+          if (originalDom && tempPlayerDiv.firstChild) {
+            originalDom.appendChild(tempPlayerDiv.firstChild);
+          }
+          tempPlayerDiv.remove();
+          player = tempPlayer;
+          isPlayerDestroyed.value = false;
+          isPlayerIniting.value = false;
+          console.log(`\u2705 \u65E0\u7F1D\u91CD\u5EFA\u5B8C\u6210\uFF0C\u5185\u5B58\u4ECE${MEMORY_PEAK_THRESHOLD}MB\u2192500MB`);
+        }
+      }, 1e3);
+    }
+    __name(seamlessRebuildPlayer, "seamlessRebuildPlayer");
+    async function createPlayer() {
+      if (isPlayerDestroyed.value || !playUrl.value) return;
       if (props.debug) {
-        console.log("\u521D\u59CB\u5316\u64AD\u653E\u5668", url);
+        console.log("\u521B\u5EFA\u64AD\u653E\u5668\u5B9E\u4F8B");
+      }
+      videoInfo.value = null;
+      createPlayerDom();
+      if (typeof window === "undefined" || typeof document === "undefined" || !window.EasyPlayerPro) {
+        playSuccess.value = false;
+        emits("error", new Error("EasyPlayerPro\u672A\u52A0\u8F7D"));
+        return;
+      }
+      const targetElement = document.getElementById(id);
+      if (!targetElement) {
+        console.error(`\u627E\u4E0D\u5230ID\u4E3A ${id} \u7684\u64AD\u653E\u5668\u5BB9\u5668\u5143\u7D20`);
+        return;
       }
+      player = new window.EasyPlayerPro(targetElement, {
+        isLive: true,
+        hasAudio: true,
+        bufferTime: 0.01,
+        // 缓存时长压到0.01秒（极限）
+        stretch: true,
+        MSE: false,
+        WCS: false,
+        WASM: true,
+        debug: false,
+        operateBtns: {
+          performance: false
+        },
+        hwAcceleration: false,
+        // 禁用硬件加速（核心）
+        lowLatency: true,
+        maxBufferSize: 256 * 1024,
+        // 最大缓存256KB
+        maxBufferLength: 1,
+        // 最大缓存时长1秒（关键）
+        manifestLoadingMaxRetry: 1,
+        levelLoadingMaxRetry: 1,
+        manifestLoadingRetryDelay: 1e3,
+        levelLoadingRetryDelay: 1e3,
+        enableStashBuffer: false,
+        // 彻底禁用缓存缓冲区
+        stashInitialSize: 0,
+        // 初始缓存0
+        liveSyncDuration: 0.5,
+        // 实时同步0.5秒
+        liveMaxLatencyDuration: 1
+        // 最大延迟1秒
+      });
+      if (player.clearCache) {
+        player.clearCache();
+      }
+      player.play(playUrl.value);
+      if (timers.cleanupInterval) clearInterval(timers.cleanupInterval);
+      timers.cleanupInterval = window.setInterval(() => {
+        var _a, _b, _c;
+        if (player && !isPlayerDestroyed.value) {
+          (_a = player.clearCache) == null ? void 0 : _a.call(player);
+          (_b = player.flushFrames) == null ? void 0 : _b.call(player);
+          (_c = player.trimBuffer) == null ? void 0 : _c.call(player);
+          if (player.hls) {
+            try {
+              if (player.hls.bufferController) {
+                player.hls.bufferController.flushBackBuffer();
+              }
+              if (player.hls.streamController) {
+                player.hls.streamController.resetTransmuxer();
+              }
+            } catch (e) {
+              console.warn("HLS\u7F13\u5B58\u6E05\u7406\u5F02\u5E38:", e);
+            }
+          }
+          if (window.gc) window.gc();
+        }
+      }, 3e4);
+      const registerEvent = /* @__PURE__ */ __name((event, handler) => {
+        player.on(event, handler);
+        eventHandlers.push({ event, handler });
+      }, "registerEvent");
+      registerEvent("timeout", () => {
+        props.debug && console.log("\u52A0\u8F7D\u8D85\u65F6");
+        emits("timeout");
+        playSuccess.value = false;
+        handleReconnect();
+      });
+      registerEvent("error", (err) => {
+        props.debug && console.log("\u64AD\u653E\u5F02\u5E38:", err);
+        emits("error", err);
+        playSuccess.value = false;
+        handleReconnect();
+      });
+      registerEvent("play", () => {
+        playSuccess.value = true;
+        reconnectAttempts.value = 0;
+        reconnectCoolDown.value = 0;
+        props.debug && console.log("\u64AD\u653E\u6210\u529F");
+        emits("play");
+      });
+      registerEvent("pause", () => {
+        props.debug && console.log("\u6682\u505C\u64AD\u653E");
+        emits("pause");
+      });
+      registerEvent("videoInfo", (info) => {
+        props.debug && console.log("\u89C6\u9891\u4FE1\u606F", info);
+        videoInfo.value = info;
+        emits("videoInfo", info);
+      });
+      registerEvent("mute", (mute) => {
+        props.debug && console.log("\u9759\u97F3\u72B6\u6001\u53D8\u66F4:", mute);
+        emits("mute", mute);
+      });
+      registerEvent("ended", () => {
+        props.debug && console.log("\u64AD\u653E\u7ED3\u675F");
+        if (!isFullscreen.value) {
+          destroy(false);
+        }
+      });
+    }
+    __name(createPlayer, "createPlayer");
+    function handleReconnect() {
+      if (isPlayerDestroyed.value) return;
+      if (reconnectCoolDown.value > 0) {
+        console.log(`\u91CD\u8FDE\u51B7\u5374\u4E2D\uFF0C\u8FD8\u9700\u7B49\u5F85 ${reconnectCoolDown.value}ms`);
+        return;
+      }
+      if (reconnectAttempts.value >= maxReconnectAttempts) {
+        console.log(
+          `\u91CD\u8FDE\u5931\u8D25\uFF1A\u5C1D\u8BD5\u6B21\u6570 ${reconnectAttempts.value} \u5DF2\u8FBE\u5230\u4E0A\u9650 ${maxReconnectAttempts}`
+        );
+        return;
+      }
+      reconnectAttempts.value++;
+      const delay = Math.min(1e3 * reconnectAttempts.value, 1e4);
+      reconnectCoolDown.value = delay;
+      console.log(`\u5F00\u59CB\u7B2C ${reconnectAttempts.value} \u6B21\u91CD\u8FDE\uFF0C\u5EF6\u8FDF ${delay}ms`);
+      if (timers.reconnectTimer) {
+        clearTimeout(timers.reconnectTimer);
+      }
+      timers.reconnectTimer = window.setTimeout(() => {
+        if (!isPlayerDestroyed.value && playUrl.value) {
+          initPlayer(playUrl.value);
+        }
+        reconnectCoolDown.value = 0;
+      }, delay);
+    }
+    __name(handleReconnect, "handleReconnect");
+    function createPlayerDom() {
       removePlayerDom();
-      if (url) {
-        playUrl.value = formatUrl(url);
-        if (props.debug) {
-          console.log("\u683C\u5F0F\u5316\u540E\u7684url", playUrl.value);
+      if (typeof document !== "undefined" && playerRef.value) {
+        const container = playerRef.value;
+        if (!container) {
+          console.warn("\u64AD\u653E\u5668\u5BB9\u5668\u4E0D\u5B58\u5728\uFF0C\u8DF3\u8FC7DOM\u521B\u5EFA");
+          return;
         }
-        if (typeof window !== "undefined" && (window == null ? void 0 : window.EasyPlayerPro)) {
-          createPlayer();
-        } else if (typeof window !== "undefined") {
-          const timer = setInterval(() => {
-            if (window == null ? void 0 : window.EasyPlayerPro) {
-              createPlayer();
-              clearInterval(timer);
+        const dom = document.createElement("div");
+        const rect = container.getBoundingClientRect();
+        dom.id = id;
+        dom.style.width = realFullscreen.value ? "100vw" : `${rect.width}px`;
+        dom.style.height = realFullscreen.value ? props.areaName || props.deviceSerial ? "calc(100vh - 32px)" : "100vh" : props.areaName || props.deviceSerial ? `${rect.height - 32}px` : `${rect.height}px`;
+        dom.style.overflow = "hidden";
+        dom.style.backgroundColor = "#000";
+        dom.style.transform = "none";
+        dom.style.willChange = "auto";
+        dom.style.backfaceVisibility = "visible";
+        const existingDom = document.getElementById(id);
+        if (existingDom) {
+          console.warn(`ID\u4E3A ${id} \u7684\u64AD\u653E\u5668DOM\u5143\u7D20\u5DF2\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u65E7\u5143\u7D20`);
+          existingDom.remove();
+        }
+        if (container && container.parentNode) {
+          container.appendChild(dom);
+        } else {
+          console.warn("\u64AD\u653E\u5668\u5BB9\u5668\u4E0D\u5B58\u5728\u6216\u5DF2\u88AB\u9500\u6BC1\uFF0C\u65E0\u6CD5\u6DFB\u52A0\u64AD\u653E\u5668DOM\u5143\u7D20");
+        }
+      } else {
+        console.error("\u64AD\u653E\u5668\u5BB9\u5668\u4E0D\u5B58\u5728\uFF0C\u65E0\u6CD5\u521B\u5EFA\u64AD\u653E\u5668DOM\u5143\u7D20");
+      }
+    }
+    __name(createPlayerDom, "createPlayerDom");
+    function startMemoryMonitoring() {
+      if (timers.memoryCheckInterval) {
+        clearInterval(timers.memoryCheckInterval);
+      }
+      if (typeof window === "undefined") return;
+      timers.memoryCheckInterval = window.setInterval(() => {
+        checkMemoryUsage();
+      }, MEMORY_CHECK_INTERVAL);
+    }
+    __name(startMemoryMonitoring, "startMemoryMonitoring");
+    async function checkMemoryUsage() {
+      if (isPlayerDestroyed.value) return;
+      try {
+        let usedMemory = 0;
+        let gpuMemory = 0;
+        let jsHeapRatio = 0;
+        if (performance.memory) {
+          const memory = performance.memory;
+          usedMemory = Math.round(memory.usedJSHeapSize / 1024 / 1024);
+          jsHeapRatio = Math.round(
+            memory.usedJSHeapSize / memory.totalJSHeapSize * 100
+          );
+        } else {
+          usedMemory = player ? HIGH_MEMORY_THRESHOLD + 20 : 0;
+        }
+        if ("gpu" in navigator && navigator.gpu) {
+          try {
+            const gpuInfo = navigator.gpu;
+            if (gpuInfo && gpuInfo.getInfo) {
+              const info = await gpuInfo.getInfo();
+              gpuMemory = info.dedicatedVideoMemory ? Math.round(info.dedicatedVideoMemory / 1024 / 1024) : 0;
             }
-          }, 100);
+          } catch (e) {
+            gpuMemory = 0;
+          }
+        }
+        const browser = navigator.userAgent.toLowerCase();
+        let dynamicThreshold = HIGH_MEMORY_THRESHOLD;
+        if (browser.includes("chrome")) {
+          dynamicThreshold = 100;
+        } else if (browser.includes("firefox")) {
+          dynamicThreshold = 70;
+        }
+        const totalEstimate = usedMemory + (gpuMemory || 0);
+        console.log(
+          `\u{1F4CA} \u5185\u5B58\u5360\u7528\uFF1AJS-${usedMemory}MB, GPU-${gpuMemory}MB, \u9608\u503C-${dynamicThreshold}MB`
+        );
+        if (totalEstimate >= MEMORY_PEAK_THRESHOLD) {
+          console.warn(`\u26A0\uFE0F \u5185\u5B58\u63A5\u8FD1\u5CF0\u503C\uFF1A${totalEstimate}MB \u2192 \u89E6\u53D1\u65E0\u7F1D\u91CD\u5EFA`);
+          const now = Date.now();
+          if (now - lastMemoryPeak > 60 * 1e3) {
+            seamlessRebuildPlayer();
+            lastMemoryPeak = now;
+          }
+        }
+        if (totalEstimate > dynamicThreshold || jsHeapRatio > 85) {
+          emits("memoryWarn", {
+            used: totalEstimate,
+            threshold: dynamicThreshold,
+            details: {
+              js: usedMemory,
+              gpu: gpuMemory,
+              jsHeapRatio
+            },
+            timestamp: Date.now()
+          });
+          performEmergencyCleanup();
         }
+        if (totalEstimate > 1200) {
+          console.warn("\u{1F525} \u5185\u5B58\u8D85\u9650\uFF0C\u81EA\u52A8\u5237\u65B0\u9875\u9762");
+          sessionStorage.setItem("lastPlayUrl", playUrl.value);
+          window.location.reload();
+        }
+      } catch (e) {
+        console.warn("\u5185\u5B58\u76D1\u63A7\u5F02\u5E38:", e);
       }
     }
-    __name(initPlayer, "initPlayer");
+    __name(checkMemoryUsage, "checkMemoryUsage");
+    function performEmergencyCleanup() {
+      var _a, _b;
+      if (isPlayerDestroyed.value) return;
+      console.log("\u6267\u884C\u7D27\u6025\u5185\u5B58\u6E05\u7406");
+      if (player && player.hls && player.hls.mediaSource) {
+        try {
+          const mediaSource = player.hls.mediaSource;
+          for (const sourceBuffer of mediaSource.sourceBuffers) {
+            if (sourceBuffer.updating === false) {
+              sourceBuffer.remove(0, Infinity).then(() => {
+                console.log("MSE \u6E90\u7F13\u51B2\u533A\u5DF2\u6E05\u7A7A");
+              }).catch((e) => console.warn("\u6E05\u7A7AMSE\u7F13\u51B2\u533A\u5931\u8D25:", e));
+            }
+          }
+          if (mediaSource.readyState === "open") {
+            mediaSource.endOfStream();
+            setTimeout(() => {
+              if (mediaSource.sourceBuffers.length > 0) {
+                mediaSource.removeSourceBuffer(mediaSource.sourceBuffers[0]);
+              }
+            }, 100);
+          }
+        } catch (e) {
+          console.warn("MSE \u7F13\u51B2\u533A\u6E05\u7406\u5F02\u5E38:", e);
+        }
+      }
+      if (player) {
+        (_a = player.clearCache) == null ? void 0 : _a.call(player);
+        (_b = player.trimBuffer) == null ? void 0 : _b.call(player);
+        try {
+          if (player.videoElement) {
+            player.videoElement.pause();
+            URL.revokeObjectURL(player.videoElement.src);
+            player.videoElement.src = "";
+            player.videoElement.removeAttribute("src");
+            player.videoElement.innerHTML = "";
+            player.videoElement.load();
+            player.videoElement.remove();
+          }
+        } catch (e) {
+          console.warn("\u89C6\u9891\u5143\u7D20\u91CD\u7F6E\u5F02\u5E38:", e);
+        }
+      }
+      if (playerRef.value) {
+        const tempStyle = playerRef.value.style.display;
+        playerRef.value.style.display = "none";
+        void playerRef.value.offsetHeight;
+        playerRef.value.style.display = tempStyle;
+      }
+      if (window.gc) {
+        window.gc();
+      }
+      const currentUrl = playUrl.value;
+      if (currentUrl) {
+        destroy(false);
+        setTimeout(() => {
+          if (currentUrl === playUrl.value) {
+            isPlayerDestroyed.value = false;
+            reconnectAttempts.value = 0;
+            initPlayer(currentUrl);
+          }
+        }, EMERGENCY_CLEAN_TIMEOUT);
+      }
+    }
+    __name(performEmergencyCleanup, "performEmergencyCleanup");
     function removePlayerDom() {
       if (typeof document !== "undefined") {
         const dom = document.getElementById(id);
@@ -164,96 +672,115 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     __name(removePlayerDom, "removePlayerDom");
-    function createPlayerDom() {
-      removePlayerDom();
-      if (typeof document !== "undefined") {
-        nextTick(() => {
-          var _a;
-          const dom = document.createElement("div");
-          const { width, height } = playerRef.value.getBoundingClientRect();
-          dom.id = id;
-          if (realFullscreen.value) {
-            dom.style.width = `100vw`;
-            dom.style.height = props.areaName || props.deviceSerial ? `calc(100vh - 32px)` : `100vh`;
+    function destroy(isForce = false) {
+      var _a, _b, _c, _d, _e, _f;
+      if (isPlayerDestroyed.value && !isForce) return;
+      isPlayerDestroyed.value = true;
+      if (player) {
+        (_a = player.pause) == null ? void 0 : _a.call(player);
+        (_b = player.stopLoad) == null ? void 0 : _b.call(player);
+        (_c = player.unload) == null ? void 0 : _c.call(player);
+        if (player.hls) {
+          (_e = (_d = player.hls).offAll) == null ? void 0 : _e.call(_d);
+        }
+        (_f = player.removeAllListeners) == null ? void 0 : _f.call(player);
+        eventHandlers.length = 0;
+        if (player.videoElement) {
+          player.videoElement.remove();
+          player.videoElement = null;
+        }
+      }
+      Object.values(timers).forEach((timer) => {
+        if (timer) {
+          if (timer.toString().includes("Timeout")) {
+            clearTimeout(timer);
           } else {
-            dom.style.width = `${width}px`;
-            dom.style.height = props.areaName || props.deviceSerial ? `${height - 32}px` : `${height}px`;
+            clearInterval(timer);
           }
-          (_a = playerRef.value) == null ? void 0 : _a.appendChild(dom);
-        });
+        }
+      });
+      removePlayerDom();
+      if (playerRef.value) {
+        playerRef.value.innerHTML = "";
+        playerRef.value.style.background = "none";
       }
+      if (window.gc) window.gc();
+      const tempDisplay = document.body.style.display;
+      document.body.style.display = "none";
+      void document.body.offsetHeight;
+      document.body.style.display = tempDisplay;
+      player = null;
+      playSuccess.value = false;
+      isPlayerIniting.value = false;
     }
-    __name(createPlayerDom, "createPlayerDom");
-    async function createPlayer() {
+    __name(destroy, "destroy");
+    onBeforeUnmount(() => {
       if (props.debug) {
-        console.log("\u521B\u5EFA\u64AD\u653E\u5668");
+        console.log("\u7EC4\u4EF6\u5378\u8F7D\uFF1A\u6E05\u7406\u6240\u6709\u8D44\u6E90");
       }
-      videoInfo.value = null;
-      createPlayerDom();
-      await nextTick();
-      if (typeof window !== "undefined" && typeof document !== "undefined") {
-        player = new window.EasyPlayerPro(document.getElementById(id), {
-          isLive: true,
-          // 是否直播
-          hasAudio: true,
-          // 是否解析音频
-          bufferTime: 0.2,
-          // 缓存时长
-          stretch: true,
-          // 加视频拉伸
-          MSE: false,
-          WCS: false,
-          WASM: true,
-          debug: false,
-          operateBtns: {
-            performance: false
+      Object.values(timers).forEach((timer) => {
+        if (timer) {
+          if (timer.toString().includes("Timeout")) {
+            clearTimeout(timer);
+          } else {
+            clearInterval(timer);
           }
+        }
+      });
+      playUrl.value = "";
+      isPlayerDestroyed.value = true;
+      destroy(true);
+      requestCache.clear();
+      try {
+        const canvasElements = document.querySelectorAll("canvas");
+        canvasElements.forEach((canvas) => {
+          const ctx = canvas.getContext("webgl") || canvas.getContext("2d");
+          if (ctx) {
+            if (ctx.getExtension) {
+              const ext = ctx.getExtension(
+                "WEBGL_lose_context"
+              );
+              if (ext) {
+                ext.loseContext();
+              }
+            }
+            if (ctx.clearRect) {
+              ctx.clearRect(
+                0,
+                0,
+                canvas.width,
+                canvas.height
+              );
+            }
+          }
+          canvas.remove();
         });
+        window.dispatchEvent(new Event("resize"));
+      } catch (e) {
+        console.warn("GPU\u8D44\u6E90\u6E05\u7406\u5F02\u5E38:", e);
       }
-      if (player) {
-        player.play(playUrl.value);
-        player.on("timeout", () => {
-          props.debug && console.log("\u52A0\u8F7D\u8D85\u65F6");
-          emits("timeout");
-          playSuccess.value = false;
-          destroy();
-          initPlayer(playUrl.value);
-        });
-        player.on("error", () => {
-          props.debug && console.log("\u64AD\u653E\u5F02\u5E38");
-          emits("error");
-          playSuccess.value = false;
-          destroy();
-        });
-        player.on("play", () => {
-          playSuccess.value = true;
-          props.debug && console.log("\u64AD\u653E");
-          emits("play");
-        });
-        player.on("pause", () => {
-          props.debug && console.log("\u6682\u505C");
-          emits("pause");
-        });
-        player.on("videoInfo", (info) => {
-          props.debug && console.log("\u89C6\u9891\u4FE1\u606F", info);
-          videoInfo.value = info;
-          emits("videoInfo", info);
-        });
-        player.on("mute", (mute) => {
-          props.debug && console.log("\u9759\u97F3");
-          emits("mute", mute);
-        });
-      }
-    }
-    __name(createPlayer, "createPlayer");
-    function destroy() {
-      if (player) {
-        player.destroy();
-        player = null;
-      }
-      removePlayerDom();
-    }
-    __name(destroy, "destroy");
+    });
+    __expose({
+      play,
+      destroy: /* @__PURE__ */ __name(() => destroy(true), "destroy"),
+      getPlayer: /* @__PURE__ */ __name(() => player, "getPlayer"),
+      pause: playerPause,
+      screenshot: playerScreenShot,
+      fullscreen: playerFullscreen,
+      isMute: /* @__PURE__ */ __name(() => {
+        var _a;
+        return ((_a = player == null ? void 0 : player.isMute) == null ? void 0 : _a.call(player)) || false;
+      }, "isMute"),
+      setMute: /* @__PURE__ */ __name((mute) => {
+        var _a;
+        if (player && !isPlayerDestroyed.value) {
+          (_a = player.setMute) == null ? void 0 : _a.call(player, mute);
+        }
+      }, "setMute"),
+      cleanMemory: /* @__PURE__ */ __name(() => performEmergencyCleanup(), "cleanMemory"),
+      rebuildPlayer: /* @__PURE__ */ __name(() => seamlessRebuildPlayer(), "rebuildPlayer")
+      // 暴露手动重建方法
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "div",
@@ -264,7 +791,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         },
         [
           createCommentVNode(" \u64AD\u653E\u5668\u9876\u90E8\u663E\u793A\u533A\u57DF(\u8BBE\u5907)\u540D\u79F0 "),
-          _ctx.areaName || _ctx.deviceSerial ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          areaName.value || deviceSerial.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
             _cache[0] || (_cache[0] = createElementVNode(
               "i",
               { class: "iconfont icon-shexiangtou4" },
@@ -275,13 +802,21 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode(
               "span",
               null,
-              toDisplayString(_ctx.areaName || _ctx.deviceSerial),
+              toDisplayString(areaName.value || deviceSerial.value),
               1
               /* TEXT */
             )
           ])) : createCommentVNode("v-if", true),
-          !playSuccess.value ? (openBlock(), createElementBlock("div", _hoisted_2, "\u65E0\u4FE1\u53F7")) : createCommentVNode("v-if", true),
-          !playUrl.value ? (openBlock(), createElementBlock("div", _hoisted_3, "\u65E0\u64AD\u653E\u5730\u5740")) : createCommentVNode("v-if", true),
+          !playSuccess.value ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 1,
+            "video-name": areaName.value || deviceSerial.value,
+            message: "\u65E0\u4FE1\u53F7"
+          }, null, 8, ["video-name"])) : createCommentVNode("v-if", true),
+          !playUrl.value ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 2,
+            "video-name": areaName.value || deviceSerial.value,
+            message: "\u65E0\u64AD\u653E\u5730\u5740"
+          }, null, 8, ["video-name"])) : createCommentVNode("v-if", true),
           createCommentVNode(" \u64AD\u653E\u5668\u5E95\u90E8\u64CD\u4F5C\u680F "),
           renderSlot(_ctx.$slots, "customBar")
         ],