@yimou6/common-ui 1.11.5 → 1.11.7

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

@@ -1,7 +1,6 @@
-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 { defineComponent, useSlots, computed, shallowRef, ref, onMounted, watch, onBeforeUnmount, nextTick, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString, createBlock, renderSlot } from 'vue';
 import { TzjPlayerProps, uuid } from './tzj-player.mjs';
+import './errorPage.vue.mjs';
 import _sfc_main$1 from './errorPage.vue2.mjs';
 
 var __defProp = Object.defineProperty;
@@ -10,13 +9,6 @@ const _hoisted_1 = {
   key: 0,
   class: "i-tzj-easyPlayer__top"
 };
-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"
@@ -29,16 +21,13 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     "play",
     "pause",
     "mute",
-    "videoInfo",
-    "memoryWarn"
+    "videoInfo"
   ],
   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();
@@ -47,198 +36,30 @@ 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(() => {
-      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
-      );
+      initPlayer(props.url || "");
     });
-    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) => {
-        console.log("URL\u53D8\u5316\uFF1A", newUrl);
-        if (timers.reconnectTimer) {
-          clearTimeout(timers.reconnectTimer);
-          timers.reconnectTimer = null;
-        }
-        debouncedInitPlayer(newUrl);
-      },
-      { immediate: false }
+        initPlayer(newUrl || "");
+      }
     );
+    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 && !isPlayerDestroyed.value) {
+        if (player) {
           player.play(playUrl.value);
         } else {
-          destroy(false);
-          isPlayerDestroyed.value = false;
-          initPlayer(playUrl.value);
+          destroy();
         }
       }
     }, "play");
@@ -247,425 +68,89 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       if (props.debug) {
         console.log("\u6682\u505C");
       }
-      if (player && !isPlayerDestroyed.value) {
-        (_a = player.pause) == null ? void 0 : _a.call(player);
-      }
+      (_a = player == null ? void 0 : player.pause) == null ? void 0 : _a.call(player);
     }, "playerPause");
     const playerScreenShot = /* @__PURE__ */ __name(() => {
       var _a;
       if (props.debug) {
         console.log("\u622A\u56FE");
       }
-      if (player && !isPlayerDestroyed.value) {
-        (_a = player.screenshot) == null ? void 0 : _a.call(
-          player,
-          `${props.areaName}_${(/* @__PURE__ */ new Date()).getTime()}`,
-          "png",
-          0.5,
-          "download"
-        );
-      }
+      (_a = player == null ? void 0 : 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\u5207\u6362:", fullscreen);
+        console.log("\u5168\u5C4F");
       }
       if (typeof document !== "undefined") {
-        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);
+        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);
         }
+        setTimeout(() => {
+          destroy();
+          initPlayer(playUrl.value);
+        }, 200);
       }
+      isFullscreen.value = !fullscreen;
     }, "playerFullscreen");
-    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);
+    __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;
       }
-      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);
+      if (typeof window !== "undefined" && window.location) {
+        return `${window.location.origin}${url.startsWith("/") ? "" : "/"}${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;
+      return url;
+    }, "formatUrl");
+    async function initPlayer(url) {
       if (props.debug) {
-        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);
+        console.log("\u521D\u59CB\u5316\u64AD\u653E\u5668", url);
       }
-      timers.reconnectTimer = window.setTimeout(() => {
-        if (!isPlayerDestroyed.value && playUrl.value) {
-          initPlayer(playUrl.value);
-        }
-        reconnectCoolDown.value = 0;
-      }, delay);
-    }
-    __name(handleReconnect, "handleReconnect");
-    function createPlayerDom() {
       removePlayerDom();
-      if (typeof document !== "undefined" && playerRef.value) {
-        const container = playerRef.value;
-        playerRef.value.style.visibility = "visible";
-        if (!container) {
-          console.warn("\u64AD\u653E\u5668\u5BB9\u5668\u4E0D\u5B58\u5728\uFF0C\u8DF3\u8FC7DOM\u521B\u5EFA");
-          return;
-        }
-        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;
-            }
-          } 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();
+      if (url) {
+        playUrl.value = formatUrl(url);
+        if (props.debug) {
+          console.log("\u683C\u5F0F\u5316\u540E\u7684url", playUrl.value);
         }
-      } catch (e) {
-        console.warn("\u5185\u5B58\u76D1\u63A7\u5F02\u5E38:", e);
-      }
-    }
-    __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 (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);
             }
-          }
-          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);
+          }, 100);
         }
       }
-      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");
+    __name(initPlayer, "initPlayer");
     function removePlayerDom() {
       if (typeof document !== "undefined") {
         const dom = document.getElementById(id);
@@ -673,114 +158,100 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     __name(removePlayerDom, "removePlayerDom");
-    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);
+    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`;
           } else {
-            clearInterval(timer);
+            dom.style.width = `${width}px`;
+            dom.style.height = props.areaName || props.deviceSerial ? `${height - 32}px` : `${height}px`;
           }
-        }
-      });
-      removePlayerDom();
-      if (playerRef.value) {
-        playerRef.value.style.visibility = "hidden";
+          (_a = playerRef.value) == null ? void 0 : _a.appendChild(dom);
+        });
       }
-      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(destroy, "destroy");
-    onBeforeUnmount(() => {
+    __name(createPlayerDom, "createPlayerDom");
+    async function createPlayer() {
       if (props.debug) {
-        console.log("\u7EC4\u4EF6\u5378\u8F7D\uFF1A\u6E05\u7406\u6240\u6709\u8D44\u6E90");
+        console.log("\u521B\u5EFA\u64AD\u653E\u5668");
       }
-      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();
+      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
+          },
+          autoCleanupSourceBuffer: true,
+          //(对 SourceBuffer 进行自动清理)
+          autoCleanupMinBackwardDuration: 60
+          // (指示在执行自动清理时为后向缓冲区保留的持续时间,以秒为单位)
         });
-        window.dispatchEvent(new Event("resize"));
-      } catch (e) {
-        console.warn("GPU\u8D44\u6E90\u6E05\u7406\u5F02\u5E38:", e);
       }
-    });
-    __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")
-      // 暴露手动重建方法
-    });
+      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");
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "div",
@@ -791,7 +262,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         },
         [
           createCommentVNode(" \u64AD\u653E\u5668\u9876\u90E8\u663E\u793A\u533A\u57DF(\u8BBE\u5907)\u540D\u79F0 "),
-          areaName.value || deviceSerial.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          _ctx.areaName || _ctx.deviceSerial ? (openBlock(), createElementBlock("div", _hoisted_1, [
             _cache[0] || (_cache[0] = createElementVNode(
               "i",
               { class: "iconfont icon-shexiangtou4" },
@@ -802,21 +273,21 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode(
               "span",
               null,
-              toDisplayString(areaName.value || deviceSerial.value),
+              toDisplayString(_ctx.areaName || _ctx.deviceSerial),
               1
               /* TEXT */
             )
           ])) : createCommentVNode("v-if", true),
           !playSuccess.value ? (openBlock(), createBlock(_sfc_main$1, {
             key: 1,
-            "video-name": areaName.value || deviceSerial.value,
+            videoName: _ctx.areaName || _ctx.deviceSerial,
             message: "\u65E0\u4FE1\u53F7"
-          }, null, 8, ["video-name"])) : createCommentVNode("v-if", true),
+          }, null, 8, ["videoName"])) : createCommentVNode("v-if", true),
           !playUrl.value ? (openBlock(), createBlock(_sfc_main$1, {
             key: 2,
-            "video-name": areaName.value || deviceSerial.value,
+            videoName: _ctx.areaName || _ctx.deviceSerial,
             message: "\u65E0\u64AD\u653E\u5730\u5740"
-          }, null, 8, ["video-name"])) : createCommentVNode("v-if", true),
+          }, null, 8, ["videoName"])) : createCommentVNode("v-if", true),
           createCommentVNode(" \u64AD\u653E\u5668\u5E95\u90E8\u64CD\u4F5C\u680F "),
           renderSlot(_ctx.$slots, "customBar")
         ],