call-live-sdk1 0.0.2 → 0.0.4

package/dist/call-live-sdk.es.js

@@ -25593,9 +25593,6 @@ var define_import_meta_env_default = {};
 const envConfig$1 = {
   // 环境名称
   env: define_import_meta_env_default.VITE_ENV || "development",
-  // 地图相关配置
-  amapKey: "d3e9b4bd66a3ed8533f2e5d01c24e273",
-  amapCode: "ff1c6caa84b5fe4e179dc6a84580995c",
   // SDK 授权配置
   queenSdkKey: "hP7in57avgV12eJB7dff0052b8ac0481da28769b23b37bc77",
   // API 相关配置
@@ -25615,24 +25612,28 @@ var GlobalErrorType = /* @__PURE__ */ ((GlobalErrorType2) => {
 })(GlobalErrorType || {});
 const envConfig = {
   callConfig: {
-    el: envConfig$1.env === "production" ? "" : "root",
-    sign: envConfig$1.env === "production" ? "" : "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlZGl0aW9uX2lkIjo0NywiZXhwIjoxNzY2OTg2NDY2LCJpYXQiOjE3NjYzODE2NjYsIm5iZiI6MTc2NjM4MTY2Niwic3ViX3VzZXJpZCI6MCwidXNlcmlkIjoiMzg3MzU5ODkifQ.PoX2zUuJycp_Qt8obbKNO1m6GcAWBYklaeIi2IgxnEI",
-    liveId: envConfig$1.env === "production" ? null : 53065,
-    title: envConfig$1.env === "production" ? "" : "test",
+    el: envConfig$1.env === "dev" ? "root" : "",
+    sign: envConfig$1.env === "dev" ? "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlZGl0aW9uX2lkIjo0NywiZXhwIjoxNzY3NTgyODExLCJpYXQiOjE3NjY5NzgwMTEsIm5iZiI6MTc2Njk3ODAxMSwic3ViX3VzZXJpZCI6MCwidXNlcmlkIjoiMzg3MzU5ODkifQ.lB9hFdxAJUGt4eg9WugAlkyIWhPayqcOI15x1DToQFo" : "",
+    liveId: envConfig$1.env === "dev" ? 60974 : null,
+    title: envConfig$1.env === "dev" ? "test" : "菲耀直播",
     components: {
       chat: { enabled: true },
       team: { enabled: true },
       call: { enabled: true, inviteLink: "" }
     },
-    agentId: envConfig$1.env === "production" ? null : 38735989,
+    agentId: envConfig$1.env === "dev" ? 38735989 : null,
     apiDomain: envConfig$1.liveProxyUrl
   },
   guestConfig: {
     el: "",
-    sign: envConfig$1.env === "production" ? "" : "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlZGl0aW9uX2lkIjo0NywiZXhwIjoxNzY2OTg2NDY2LCJpYXQiOjE3NjYzODE2NjYsIm5iZiI6MTc2NjM4MTY2Niwic3ViX3VzZXJpZCI6MCwidXNlcmlkIjoiMzg3MzU5ODkifQ.PoX2zUuJycp_Qt8obbKNO1m6GcAWBYklaeIi2IgxnEI",
-    liveId: envConfig$1.env === "production" ? null : 53065,
-    agentId: envConfig$1.env === "production" ? null : 38735989,
+    sign: envConfig$1.env === "dev" ? "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlZGl0aW9uX2lkIjo0NywiZXhwIjoxNzY2OTg2NDY2LCJpYXQiOjE3NjYzODE2NjYsIm5iZiI6MTc2NjM4MTY2Niwic3ViX3VzZXJpZCI6MCwidXNlcmlkIjoiMzg3MzU5ODkifQ.PoX2zUuJycp_Qt8obbKNO1m6GcAWBYklaeIi2IgxnEI" : "",
+    liveId: envConfig$1.env === "dev" ? null : 60974,
+    agentId: envConfig$1.env === "dev" ? null : 38735989,
     apiDomain: envConfig$1.liveProxyUrl
+  },
+  styleConfig: {
+    minHeight: 770,
+    minWidth: 1500
   }
 };
 const useSdkStore = create$c((set3, get4) => ({
@@ -46579,10 +46580,14 @@ const errorConfig = {
     console.warn("Login expired, please re-login");
   }
 };
-console.log("<<envConfig.env>>", envConfig$1);
-console.log("=====>", envConfig$1.env === "production" ? useSdkStore.getState().getApiDomain() : envConfig$1);
+const map$d = {
+  production: useSdkStore.getState().getApiDomain(),
+  test: envConfig$1.liveProxyUrl,
+  dev: ""
+};
+console.log("envConfig.env", envConfig$1.env);
 const axiosInstance = axios.create({
-  baseURL: envConfig$1.env === "production" ? useSdkStore.getState().getApiDomain() : envConfig$1.liveProxyUrl,
+  baseURL: map$d[envConfig$1.env],
   // 只在生产环境设置基础 URL，开发环境使用代理
   timeout: 3e4,
   // 30秒超时
@@ -82396,6 +82401,259 @@ const useGuestStore = create$c()((set3, get4) => ({
     set3({ status });
   }
 }));
+const calculateAspectRatio = (area) => {
+  const targetAspectRatio = 16 / 9;
+  const currentAspectRatio = area.width / area.height;
+  let drawWidth = area.width;
+  let drawHeight = area.height;
+  let drawX = area.x;
+  let drawY = area.y;
+  if (currentAspectRatio > targetAspectRatio) {
+    drawWidth = area.height * targetAspectRatio;
+    drawX = area.x + (area.width - drawWidth) / 2;
+  } else {
+    drawHeight = area.width / targetAspectRatio;
+    drawY = area.y + (area.height - drawHeight) / 2;
+  }
+  return { drawX, drawY, drawWidth, drawHeight };
+};
+const prepareOffscreenCanvas = (targetCanvas, get4, set3) => {
+  let offscreenCanvas = get4().offscreenCanvasRef;
+  let offscreenContext = get4().offscreenContextRef;
+  if (!offscreenCanvas || offscreenCanvas.width !== targetCanvas.width || offscreenCanvas.height !== targetCanvas.height) {
+    offscreenCanvas = document.createElement("canvas");
+    offscreenCanvas.width = targetCanvas.width;
+    offscreenCanvas.height = targetCanvas.height;
+    offscreenContext = offscreenCanvas.getContext("2d");
+    set3({
+      offscreenCanvasRef: offscreenCanvas,
+      offscreenContextRef: offscreenContext
+    });
+  }
+  return offscreenCanvas;
+};
+const renderGridLayout = (ctx2, canvas, layout, get4) => {
+  if (layout.callAreas && layout.callAreas.length > 0) {
+    layout.callAreas.forEach((area) => {
+      const { drawX, drawY, drawWidth, drawHeight } = calculateAspectRatio(area);
+      ctx2.fillStyle = "rgba(26, 26, 26, 0.8)";
+      ctx2.fillRect(drawX, drawY, drawWidth, drawHeight);
+      ctx2.strokeStyle = "rgba(51, 51, 51, 0.6)";
+      ctx2.lineWidth = 2;
+      ctx2.strokeRect(drawX, drawY, drawWidth, drawHeight);
+      if (!area.isVideoEnabled && area.domId.includes("screen")) {
+        get4().renderEmptyUserArea(ctx2, area, drawX, drawY, drawWidth, drawHeight);
+      } else {
+        const container = document.getElementById(area.domId);
+        if (container) {
+          const videoElement = container.querySelector("video");
+          if (videoElement) {
+            get4().drawUserVideoContent(
+              ctx2,
+              videoElement,
+              area,
+              drawX,
+              drawY,
+              drawWidth,
+              drawHeight
+            );
+          }
+        }
+        get4().drawUserInfo(ctx2, area, drawX, drawY, drawWidth, drawHeight);
+        get4().drawStatusIndicators(ctx2, area, drawX, drawY, drawWidth);
+      }
+    });
+  } else {
+    ctx2.fillStyle = "rgba(0, 0, 0, 0.3)";
+    ctx2.fillRect(0, 0, canvas.width, canvas.height);
+    ctx2.fillStyle = "#ffffff";
+    ctx2.font = "24px Arial";
+    ctx2.textAlign = "center";
+    ctx2.textBaseline = "middle";
+    ctx2.fillText("暂无连麦用户", canvas.width / 2, canvas.height / 2);
+  }
+};
+const renderMainPlusListLayout = (ctx2, canvas, originalCanvas, layout, callConfig, callUsers, get4) => {
+  if (layout.mainArea) {
+    const mainCanvasId = get4().mainCanvasId;
+    const shouldRenderTargetVideo = mainCanvasId && mainCanvasId !== callConfig.drawing_board_id;
+    if (shouldRenderTargetVideo) {
+      const targetUser = callUsers.find((user) => {
+        return user.videoList && user.videoList.includes(mainCanvasId);
+      });
+      if (targetUser) {
+        if (!targetUser.isVideoEnabled && mainCanvasId.includes("screen")) {
+          get4().renderEmptyUserArea(
+            ctx2,
+            targetUser,
+            layout.mainArea.x,
+            layout.mainArea.y,
+            layout.mainArea.width,
+            layout.mainArea.height
+          );
+        } else {
+          try {
+            const videoWrap = document.getElementById(mainCanvasId);
+            const videoElement = videoWrap == null ? void 0 : videoWrap.querySelector("video");
+            if (videoElement && videoElement.tagName === "VIDEO") {
+              const videoWidth = videoElement.videoWidth;
+              const videoHeight = videoElement.videoHeight;
+              if (videoWidth > 0 && videoHeight > 0) {
+                const isUserMobile = targetUser.device === "mobile";
+                const mainAreaWidth = layout.mainArea.width;
+                const mainAreaHeight = layout.mainArea.height;
+                const scaleX = mainAreaWidth / videoWidth;
+                const scaleY = mainAreaHeight / videoHeight;
+                const scale2 = Math.min(scaleX, scaleY);
+                const drawWidth = videoWidth * scale2;
+                const drawHeight = videoHeight * scale2;
+                const drawX = layout.mainArea.x + (mainAreaWidth - drawWidth) / 2;
+                const drawY = layout.mainArea.y + (mainAreaHeight - drawHeight) / 2;
+                if (isUserMobile) {
+                  ctx2.fillStyle = "#000000";
+                  ctx2.fillRect(layout.mainArea.x, layout.mainArea.y, mainAreaWidth, mainAreaHeight);
+                }
+                ctx2.drawImage(videoElement, drawX, drawY, drawWidth, drawHeight);
+              } else {
+                get4().renderEmptyUserArea(
+                  ctx2,
+                  targetUser,
+                  layout.mainArea.x,
+                  layout.mainArea.y,
+                  layout.mainArea.width,
+                  layout.mainArea.height
+                );
+              }
+            } else {
+              get4().renderEmptyUserArea(
+                ctx2,
+                targetUser,
+                layout.mainArea.x,
+                layout.mainArea.y,
+                layout.mainArea.width,
+                layout.mainArea.height
+              );
+            }
+          } catch (error2) {
+            console.error("主画布区域-绘制外部视频元素失败:", error2);
+            get4().renderEmptyUserArea(
+              ctx2,
+              targetUser,
+              layout.mainArea.x,
+              layout.mainArea.y,
+              layout.mainArea.width,
+              layout.mainArea.height
+            );
+          }
+        }
+      } else {
+        ctx2.fillStyle = "rgba(31, 41, 55, 0.7)";
+        ctx2.fillRect(
+          layout.mainArea.x,
+          layout.mainArea.y,
+          layout.mainArea.width,
+          layout.mainArea.height
+        );
+      }
+    } else {
+      ctx2.fillStyle = "rgb(0, 0, 0)";
+      ctx2.fillRect(
+        layout.mainArea.x,
+        layout.mainArea.y,
+        layout.mainArea.width,
+        layout.mainArea.height
+      );
+      ctx2.drawImage(
+        originalCanvas,
+        0,
+        0,
+        originalCanvas.width,
+        originalCanvas.height,
+        layout.mainArea.x,
+        layout.mainArea.y,
+        layout.mainArea.width,
+        layout.mainArea.height
+      );
+    }
+  }
+};
+const renderUserVideoAreas = (context, callAreas, get4) => {
+  callAreas.forEach((area) => {
+    var _a2;
+    const { drawX, drawY, drawWidth, drawHeight } = calculateAspectRatio(area);
+    context.save();
+    context.fillStyle = "rgba(17, 24, 39, 0.8)";
+    context.fillRect(drawX, drawY, drawWidth, drawHeight);
+    const container = document.getElementById(area.domId);
+    if (!container || !area.isVideoEnabled && !((_a2 = area.domId) == null ? void 0 : _a2.includes("screen"))) {
+      get4().renderEmptyUserArea(context, area, drawX, drawY, drawWidth, drawHeight);
+      context.restore();
+      return;
+    }
+    const videoElement = container.querySelector("video");
+    get4().drawUserVideoContent(context, videoElement, area, drawX, drawY, drawWidth, drawHeight);
+    get4().drawUserInfo(context, area, drawX, drawY, drawWidth, drawHeight);
+    get4().drawStatusIndicators(context, area, drawX, drawY, drawWidth);
+    context.restore();
+  });
+};
+const drawBackgroundImage = (ctx2, canvas, backgroundImgUrl, get4, set3) => {
+  const { backgroundImageRef, lastBackgroundImgUrlRef } = get4();
+  if (!backgroundImageRef || lastBackgroundImgUrlRef !== backgroundImgUrl) {
+    const img = new Image();
+    img.src = backgroundImgUrl;
+    img.crossOrigin = "anonymous";
+    set3({
+      backgroundImageRef: img,
+      lastBackgroundImgUrlRef: backgroundImgUrl
+    });
+    img.onload = () => {
+      get4().renderCompositeFrameSmooth();
+    };
+    img.onerror = () => {
+      console.error("[CallStore] 背景图加载失败:", backgroundImgUrl);
+      ctx2.fillStyle = "#000000";
+      ctx2.fillRect(0, 0, canvas.width, canvas.height);
+    };
+  } else if (backgroundImageRef.complete && backgroundImageRef.naturalWidth > 0) {
+    try {
+      ctx2.globalAlpha = 0.9;
+      const imgAspectRatio = backgroundImageRef.width / backgroundImageRef.height;
+      const canvasAspectRatio = canvas.width / canvas.height;
+      let drawWidth, drawHeight, drawX, drawY;
+      if (imgAspectRatio > canvasAspectRatio) {
+        drawHeight = canvas.height;
+        drawWidth = canvas.height * imgAspectRatio;
+        drawX = (canvas.width - drawWidth) / 2;
+        drawY = 0;
+      } else {
+        drawWidth = canvas.width;
+        drawHeight = canvas.width / imgAspectRatio;
+        drawX = 0;
+        drawY = (canvas.height - drawHeight) / 2;
+      }
+      ctx2.drawImage(
+        backgroundImageRef,
+        0,
+        0,
+        backgroundImageRef.width,
+        backgroundImageRef.height,
+        drawX,
+        drawY,
+        drawWidth,
+        drawHeight
+      );
+      ctx2.globalAlpha = 1;
+    } catch (error2) {
+      console.error("[CallStore] 背景图绘制失败:", error2);
+      ctx2.fillStyle = "rgba(0, 0, 0, 0.8)";
+      ctx2.fillRect(0, 0, canvas.width, canvas.height);
+    }
+  } else {
+    ctx2.fillStyle = "rgba(0, 0, 0, 0.8)";
+    ctx2.fillRect(0, 0, canvas.width, canvas.height);
+  }
+};
 var VideoType = /* @__PURE__ */ ((VideoType2) => {
   VideoType2["CAMERA"] = "video";
   VideoType2["SCREEN"] = "screen";
@@ -83260,281 +83518,14 @@ const useCallStore = create$c()(
       const originalCanvas = fabricInstance == null ? void 0 : fabricInstance.lowerCanvasEl;
       if (!canvas || !context || !originalCanvas)
         return;
-      const prepareOffscreenCanvas = (targetCanvas) => {
-        let offscreenCanvas2 = get4().offscreenCanvasRef;
-        let offscreenContext2 = get4().offscreenContextRef;
-        if (!offscreenCanvas2 || offscreenCanvas2.width !== targetCanvas.width || offscreenCanvas2.height !== targetCanvas.height) {
-          offscreenCanvas2 = document.createElement("canvas");
-          offscreenCanvas2.width = targetCanvas.width;
-          offscreenCanvas2.height = targetCanvas.height;
-          offscreenContext2 = offscreenCanvas2.getContext("2d");
-          set3({
-            offscreenCanvasRef: offscreenCanvas2,
-            offscreenContextRef: offscreenContext2
-          });
-        }
-        return offscreenCanvas2;
-      };
-      const calculateAspectRatio = (area) => {
-        const targetAspectRatio = 16 / 9;
-        const currentAspectRatio = area.width / area.height;
-        let drawWidth = area.width;
-        let drawHeight = area.height;
-        let drawX = area.x;
-        let drawY = area.y;
-        if (currentAspectRatio > targetAspectRatio) {
-          drawWidth = area.height * targetAspectRatio;
-          drawX = area.x + (area.width - drawWidth) / 2;
-        } else {
-          drawHeight = area.width / targetAspectRatio;
-          drawY = area.y + (area.height - drawHeight) / 2;
-        }
-        return { drawX, drawY, drawWidth, drawHeight };
-      };
-      const renderGridLayout = (ctx2, canvas2, layout) => {
-        if (layout.callAreas && layout.callAreas.length > 0) {
-          layout.callAreas.forEach((area) => {
-            const { drawX, drawY, drawWidth, drawHeight } = calculateAspectRatio(area);
-            ctx2.fillStyle = "rgba(26, 26, 26, 0.8)";
-            ctx2.fillRect(drawX, drawY, drawWidth, drawHeight);
-            ctx2.strokeStyle = "rgba(51, 51, 51, 0.6)";
-            ctx2.lineWidth = 2;
-            ctx2.strokeRect(drawX, drawY, drawWidth, drawHeight);
-            if (!area.isVideoEnabled && area.domId.includes("screen")) {
-              get4().renderEmptyUserArea(ctx2, area, drawX, drawY, drawWidth, drawHeight);
-            } else {
-              const container = document.getElementById(area.domId);
-              if (container) {
-                const videoElement = container.querySelector("video");
-                if (videoElement) {
-                  get4().drawUserVideoContent(
-                    ctx2,
-                    videoElement,
-                    area,
-                    drawX,
-                    drawY,
-                    drawWidth,
-                    drawHeight
-                  );
-                }
-              }
-              get4().drawUserInfo(ctx2, area, drawX, drawY, drawWidth, drawHeight);
-              get4().drawStatusIndicators(ctx2, area, drawX, drawY, drawWidth);
-            }
-          });
-        } else {
-          ctx2.fillStyle = "rgba(0, 0, 0, 0.3)";
-          ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
-          ctx2.fillStyle = "#ffffff";
-          ctx2.font = "24px Arial";
-          ctx2.textAlign = "center";
-          ctx2.textBaseline = "middle";
-          ctx2.fillText("暂无连麦用户", canvas2.width / 2, canvas2.height / 2);
-        }
-      };
-      const renderMainPlusListLayout = (ctx2, canvas2, originalCanvas2, layout) => {
-        if (layout.mainArea) {
-          const mainCanvasId = get4().mainCanvasId;
-          const shouldRenderTargetVideo = mainCanvasId && mainCanvasId !== callConfig.drawing_board_id;
-          if (shouldRenderTargetVideo) {
-            const targetUser = callUsers.find((user) => {
-              return user.videoList && user.videoList.includes(mainCanvasId);
-            });
-            if (targetUser) {
-              if (!targetUser.isVideoEnabled && mainCanvasId.includes("screen")) {
-                get4().renderEmptyUserArea(
-                  ctx2,
-                  targetUser,
-                  layout.mainArea.x,
-                  layout.mainArea.y,
-                  layout.mainArea.width,
-                  layout.mainArea.height
-                );
-              } else {
-                try {
-                  const videoWrap = document.getElementById(mainCanvasId);
-                  const videoElement = videoWrap == null ? void 0 : videoWrap.querySelector("video");
-                  if (videoElement && videoElement.tagName === "VIDEO") {
-                    const videoWidth = videoElement.videoWidth;
-                    const videoHeight = videoElement.videoHeight;
-                    if (videoWidth > 0 && videoHeight > 0) {
-                      const isUserMobile = targetUser.device === "mobile";
-                      const mainAreaWidth = layout.mainArea.width;
-                      const mainAreaHeight = layout.mainArea.height;
-                      const scaleX = mainAreaWidth / videoWidth;
-                      const scaleY = mainAreaHeight / videoHeight;
-                      const scale2 = Math.min(scaleX, scaleY);
-                      const drawWidth = videoWidth * scale2;
-                      const drawHeight = videoHeight * scale2;
-                      const drawX = layout.mainArea.x + (mainAreaWidth - drawWidth) / 2;
-                      const drawY = layout.mainArea.y + (mainAreaHeight - drawHeight) / 2;
-                      if (isUserMobile) {
-                        ctx2.fillStyle = "#000000";
-                        ctx2.fillRect(
-                          layout.mainArea.x,
-                          layout.mainArea.y,
-                          mainAreaWidth,
-                          mainAreaHeight
-                        );
-                      }
-                      ctx2.drawImage(videoElement, drawX, drawY, drawWidth, drawHeight);
-                    } else {
-                      get4().renderEmptyUserArea(
-                        ctx2,
-                        targetUser,
-                        layout.mainArea.x,
-                        layout.mainArea.y,
-                        layout.mainArea.width,
-                        layout.mainArea.height
-                      );
-                    }
-                  } else {
-                    get4().renderEmptyUserArea(
-                      ctx2,
-                      targetUser,
-                      layout.mainArea.x,
-                      layout.mainArea.y,
-                      layout.mainArea.width,
-                      layout.mainArea.height
-                    );
-                  }
-                } catch (error2) {
-                  console.error("主画布区域-绘制外部视频元素失败:", error2);
-                  get4().renderEmptyUserArea(
-                    ctx2,
-                    targetUser,
-                    layout.mainArea.x,
-                    layout.mainArea.y,
-                    layout.mainArea.width,
-                    layout.mainArea.height
-                  );
-                }
-              }
-            } else {
-              ctx2.fillStyle = "rgba(31, 41, 55, 0.7)";
-              ctx2.fillRect(
-                layout.mainArea.x,
-                layout.mainArea.y,
-                layout.mainArea.width,
-                layout.mainArea.height
-              );
-            }
-          } else {
-            ctx2.fillStyle = "rgb(0, 0, 0)";
-            ctx2.fillRect(
-              layout.mainArea.x,
-              layout.mainArea.y,
-              layout.mainArea.width,
-              layout.mainArea.height
-            );
-            ctx2.drawImage(
-              originalCanvas2,
-              0,
-              0,
-              originalCanvas2.width,
-              originalCanvas2.height,
-              layout.mainArea.x,
-              layout.mainArea.y,
-              layout.mainArea.width,
-              layout.mainArea.height
-            );
-          }
-        }
-      };
-      const renderUserVideoAreas = (context2, callAreas) => {
-        callAreas.forEach((area) => {
-          var _a2;
-          const { drawX, drawY, drawWidth, drawHeight } = calculateAspectRatio(area);
-          context2.save();
-          context2.fillStyle = "rgba(17, 24, 39, 0.8)";
-          context2.fillRect(drawX, drawY, drawWidth, drawHeight);
-          const container = document.getElementById(area.domId);
-          if (!container || !area.isVideoEnabled && !((_a2 = area.domId) == null ? void 0 : _a2.includes("screen"))) {
-            get4().renderEmptyUserArea(context2, area, drawX, drawY, drawWidth, drawHeight);
-            context2.restore();
-            return;
-          }
-          const videoElement = container.querySelector("video");
-          get4().drawUserVideoContent(
-            context2,
-            videoElement,
-            area,
-            drawX,
-            drawY,
-            drawWidth,
-            drawHeight
-          );
-          get4().drawUserInfo(context2, area, drawX, drawY, drawWidth, drawHeight);
-          get4().drawStatusIndicators(context2, area, drawX, drawY, drawWidth);
-          context2.restore();
-        });
-      };
-      const drawBackgroundImage = (ctx2, canvas2, backgroundImgUrl2) => {
-        const { backgroundImageRef, lastBackgroundImgUrlRef } = get4();
-        if (!backgroundImageRef || lastBackgroundImgUrlRef !== backgroundImgUrl2) {
-          const img = new Image();
-          img.src = backgroundImgUrl2;
-          img.crossOrigin = "anonymous";
-          set3({
-            backgroundImageRef: img,
-            lastBackgroundImgUrlRef: backgroundImgUrl2
-          });
-          img.onload = () => {
-            const { renderCompositeFrameSmooth } = get4();
-            renderCompositeFrameSmooth();
-          };
-          img.onerror = () => {
-            console.error("[CallStore] 背景图加载失败:", backgroundImgUrl2);
-            ctx2.fillStyle = "#000000";
-            ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
-          };
-        } else if (backgroundImageRef.complete && backgroundImageRef.naturalWidth > 0) {
-          try {
-            ctx2.globalAlpha = 0.9;
-            const imgAspectRatio = backgroundImageRef.width / backgroundImageRef.height;
-            const canvasAspectRatio = canvas2.width / canvas2.height;
-            let drawWidth, drawHeight, drawX, drawY;
-            if (imgAspectRatio > canvasAspectRatio) {
-              drawHeight = canvas2.height;
-              drawWidth = canvas2.height * imgAspectRatio;
-              drawX = (canvas2.width - drawWidth) / 2;
-              drawY = 0;
-            } else {
-              drawWidth = canvas2.width;
-              drawHeight = canvas2.width / imgAspectRatio;
-              drawX = 0;
-              drawY = (canvas2.height - drawHeight) / 2;
-            }
-            ctx2.drawImage(
-              backgroundImageRef,
-              0,
-              0,
-              backgroundImageRef.width,
-              backgroundImageRef.height,
-              drawX,
-              drawY,
-              drawWidth,
-              drawHeight
-            );
-            ctx2.globalAlpha = 1;
-          } catch (error2) {
-            console.error("[CallStore] 背景图绘制失败:", error2);
-            ctx2.fillStyle = "rgba(0, 0, 0, 0.8)";
-            ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
-          }
-        } else {
-          ctx2.fillStyle = "rgba(0, 0, 0, 0.8)";
-          ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
-        }
-      };
-      const offscreenCanvas = prepareOffscreenCanvas(canvas);
+      const offscreenCanvas = prepareOffscreenCanvas(canvas, get4, set3);
       const offscreenContext = offscreenCanvas.getContext("2d");
       if (!offscreenContext)
         return;
       offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
       const backgroundImgUrl = callConfig.backgroundImg;
       if (callConfig.isCall && backgroundImgUrl && backgroundImgUrl.trim() !== "") {
-        drawBackgroundImage(offscreenContext, offscreenCanvas, backgroundImgUrl);
+        drawBackgroundImage(offscreenContext, offscreenCanvas, backgroundImgUrl, get4, set3);
       } else {
         offscreenContext.fillStyle = "#000000";
         offscreenContext.fillRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
@@ -83543,14 +83534,22 @@ const useCallStore = create$c()(
         const layout = calculateLayout();
         switch (layoutMode) {
           case "grid":
-            renderGridLayout(offscreenContext, canvas, layout);
+            renderGridLayout(offscreenContext, canvas, layout, get4);
             break;
           case "main_plus_list":
-            renderMainPlusListLayout(offscreenContext, canvas, originalCanvas, layout);
+            renderMainPlusListLayout(
+              offscreenContext,
+              canvas,
+              originalCanvas,
+              layout,
+              callConfig,
+              callUsers,
+              get4
+            );
             break;
         }
         if (layout.callAreas.length) {
-          renderUserVideoAreas(offscreenContext, layout.callAreas);
+          renderUserVideoAreas(offscreenContext, layout.callAreas, get4);
         }
       } else {
         const mainArea = {
@@ -83749,6 +83748,7 @@ const useCallStore = create$c()(
         }
         return result;
       }).filter(Boolean).map((track) => new MediaStream([track]));
+      console.log("连麦音频混流", b2);
       set3({ callAudioStreamsRef: b2 });
     },
     handleRemoteUserPublishScreen: async (userId, isPublishing) => {
@@ -85377,13 +85377,12 @@ function useLiveInfo() {
         live_id
       }
     }).then((res) => {
-      console.log("直播信息请求成功：", res);
       if (res.success === false) {
         staticMethods.error(res.errorMessage);
         requestResult.cancel();
-        return res;
+        return;
       }
-      return res;
+      return res.data;
     }).catch((error22) => {
       console.error("直播信息请求失败,取消轮训：", error22);
       requestResult.cancel();
@@ -85563,7 +85562,6 @@ const Head = ({
     run: state.run,
     cancel: state.cancel
   }));
-  console.log("data,title", data2);
   const {
     fetchActivityType
   } = useActivityTypeStore();
@@ -85581,11 +85579,18 @@ const Head = ({
   const {
     livePushCode
   } = useLivePushCodeStore();
+  const title = useSdkStore((state) => state.callConfig.title);
   const {
-    data: liveInfoData
+    data: liveInfoData,
+    run: runLiveInfo
   } = useRequest(() => request(`/bis/live-info?id=${liveId}`).then((res) => res.data), {
-    manual: callConfig.role !== "main"
+    manual: true
   });
+  reactExports.useEffect(() => {
+    if (callConfig.rule === "main") {
+      runLiveInfo();
+    }
+  }, [callConfig.rule]);
   const [isLive, setIsLive] = reactExports.useState(false);
   const [isCurrentPagePushing, setIsCurrentPagePushing] = reactExports.useState(false);
   const [isModalVisible, setIsModalVisible] = reactExports.useState(false);
@@ -86035,10 +86040,10 @@ const Head = ({
     }
   }, [data2 == null ? void 0 : data2.status]);
   reactExports.useEffect(() => {
-    if ((callConfig == null ? void 0 : callConfig.rule) === "main" && !isLive && (data2 == null ? void 0 : data2.is_pushing) !== void 0 && localPushingStatus !== (data2 == null ? void 0 : data2.is_pushing)) {
+    if (!isLive) {
       checkPushingStatus();
     }
-  }, [data2 == null ? void 0 : data2.is_pushing, localPushingStatus, checkPushingStatus, isLive, callConfig == null ? void 0 : callConfig.rule]);
+  }, [data2 == null ? void 0 : data2.is_pushing, localPushingStatus, checkPushingStatus, isLive]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
     className: "min-h-56px bg-#222933 px-26px flex items-center justify-between",
     children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
@@ -86050,7 +86055,7 @@ const Head = ({
           style: {
             lineHeight: 1
           },
-          children: (callConfig == null ? void 0 : callConfig.title) || "菲耀直播"
+          children: title
         }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
           className: "w-1px h-18px bg-#fff mx-4"
         }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
@@ -195591,46 +195596,37 @@ const useDrawingToolsStore = create$c((set3, get4) => ({
   setPenSize: (size) => set3((state) => {
     const newSize = typeof size === "function" ? size(state.penSize) : size;
     return {
-      penSize: newSize,
-      penSizeRef: { current: newSize }
+      penSize: newSize
     };
   }),
   penColor: "#ff5a5a",
   setPenColor: (color) => set3((state) => {
     const newColor = typeof color === "function" ? color(state.penColor) : color;
     return {
-      penColor: newColor,
-      penColorRef: { current: newColor }
+      penColor: newColor
     };
   }),
-  penSizeRef: { current: 2 },
-  penColorRef: { current: "#ff5a5a" },
   // 激光笔设置
   laserPenSize: 2,
   setLaserPenSize: (size) => set3((state) => {
     const newSize = typeof size === "function" ? size(state.laserPenSize) : size;
     return {
-      laserPenSize: newSize,
-      laserPenSizeRef: { current: newSize }
+      laserPenSize: newSize
     };
   }),
   laserPenColor: "#ff5a5a",
   setLaserPenColor: (color) => set3((state) => {
     const newColor = typeof color === "function" ? color(state.laserPenColor) : color;
     return {
-      laserPenColor: newColor,
-      laserPenColorRef: { current: newColor }
+      laserPenColor: newColor
     };
   }),
-  laserPenSizeRef: { current: 2 },
-  laserPenColorRef: { current: "#ff5a5a" },
   // 形状设置
   shapeSize: 2,
   setShapeSize: (size) => set3((state) => {
     const newSize = typeof size === "function" ? size(state.shapeSize) : size;
     return {
-      shapeSize: newSize,
-      shapeSizeRef: { current: newSize }
+      shapeSize: newSize
     };
   }),
   shapeType: "rect",
@@ -195645,39 +195641,32 @@ const useDrawingToolsStore = create$c((set3, get4) => ({
   setShapeColor: (color) => set3((state) => {
     const newColor = typeof color === "function" ? color(state.shapeColor) : color;
     return {
-      shapeColor: newColor,
-      shapeColorRef: { current: newColor }
+      shapeColor: newColor
     };
   }),
-  shapeSizeRef: { current: 2 },
-  shapeTypeRef: { current: "rect" },
-  shapeColorRef: { current: "#ff5a5a" },
   // 文字设置
   textSize: 16,
   setTextSize: (size) => set3((state) => {
     const newSize = typeof size === "function" ? size(state.textSize) : size;
     return {
-      textSize: newSize,
-      textSizeRef: { current: newSize }
+      textSize: newSize
     };
   }),
   textColor: "#ff5a5a",
   setTextColor: (color) => set3((state) => {
     const newColor = typeof color === "function" ? color(state.textColor) : color;
     return {
-      textColor: newColor,
-      textColorRef: { current: newColor }
+      textColor: newColor
     };
   }),
-  textSizeRef: { current: 16 },
-  textColorRef: { current: "#ff5a5a" },
   // 预览弹窗状态
   isPreviewModalVisible: false,
   setIsPreviewModalVisible: (visible) => set3({ isPreviewModalVisible: visible }),
   // 绘图相关引用
   downPoint: { current: null },
   upPoint: { current: null },
-  currentShape: { current: null }
+  currentShape: { current: null },
+  getter: () => get4()
 }));
 const useCallUserPagination = (config2) => {
   const { gridCols } = config2;
@@ -196128,7 +196117,7 @@ const CallUserVideo = reactExports.memo(({
       }
     },
     children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-      className: "relative  h-full bg-gray-900",
+      className: "relative w-full h-full bg-gray-900",
       style: {
         aspectRatio: "16/9"
       },
@@ -196322,14 +196311,14 @@ const CallGridLayout = ({
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(CallUserVideo, {
           user: callCurrentUser,
           video_id: callCurrentUser.rtc_userid + "screen",
-          className: `min-h-0 aspect-video  h-full object-cover`
+          className: `min-h-0 aspect-video w-full h-full object-cover`
         }, "local-player-screen")
       }), currentPage === 1 && (callCurrentUser == null ? void 0 : callCurrentUser.rtc_userid) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
         style: videoItemStyle,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(CallUserVideo, {
           user: callCurrentUser,
           video_id: callCurrentUser.rtc_userid,
-          className: `min-h-0 aspect-video  h-full object-cover`
+          className: `min-h-0 aspect-video w-full h-full object-cover`
         }, "local-player")
       }), currentPageUsers.map((user) => {
         if (user.rtc_userid === callConfig.rtc_userid && currentPage === 1) {
@@ -196341,14 +196330,14 @@ const CallGridLayout = ({
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(CallUserVideo, {
               user,
               video_id: user.rtc_userid + "screen",
-              className: `min-h-0 aspect-video  h-full object-cover`
+              className: `min-h-0 aspect-video w-full h-full object-cover`
             }, user.rtc_userid + "screen")
           }), user.rtc_userid && /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
             style: videoItemStyle,
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(CallUserVideo, {
               user,
               video_id: user.rtc_userid,
-              className: `min-h-0 aspect-video  h-full object-cover`
+              className: `min-h-0 aspect-video w-full h-full object-cover`
             }, user.rtc_userid)
           })]
         }, user.rtc_userid);
@@ -265727,7 +265716,7 @@ const Document$1 = ({
       return /* @__PURE__ */ jsxRuntimeExports.jsx("a", {
         href: r3.buy_url,
         target: "_blank",
-        className: "flex text-stone-500",
+        className: "text-[--call-live-sdk-color-primary]",
         rel: "noreferrer",
         children: r3.name
       });
@@ -266087,13 +266076,13 @@ const Document$1 = ({
         title: "预览文档",
         width: 715,
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-          className: "w-670px pt-4 h-430px bg-#e8e8e8 flex items-center flex-col",
+          className: "w-670px pt-4 h-430px bg-#1a1a1a flex items-center flex-col",
           children: [/* @__PURE__ */ jsxRuntimeExports.jsx("img", {
             src: urlList[listIndex],
-            className: " h-92  object-contain"
+            className: " h-92  object-contain bg-#0e121c p-4 rounded"
           }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-            className: "flex items-center h-40px",
-            children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+            className: "flex items-center h-40px text-white",
+            children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, {
               onClick: () => {
                 if (listIndex > 0) {
                   setListIndex(listIndex - 1);
@@ -266101,12 +266090,13 @@ const Document$1 = ({
                   setListIndex(urlList.length - 1);
                 }
               },
-              className: " cursor-pointer bg-white px-2",
+              type: "primary",
+              ghost: true,
               children: "上一页"
             }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-              className: "mx-2",
+              className: "mx-2 text-white",
               children: [listIndex + 1, "/", urlList.length]
-            }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+            }), /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, {
               onClick: () => {
                 if (listIndex < urlList.length - 1) {
                   setListIndex(listIndex + 1);
@@ -266114,7 +266104,8 @@ const Document$1 = ({
                   setListIndex(0);
                 }
               },
-              className: " cursor-pointer bg-white px-2",
+              type: "primary",
+              ghost: true,
               children: "下一页"
             })]
           })]
@@ -266211,7 +266202,6 @@ const DocumentControler = ({
     setDocumentIndex(selectedScene.documentIndex);
     handleImageClick(selectedScene.documentIndex);
   }, [currentScene]);
-  console.log("documentInfo", documentInfo);
   reactExports.useEffect(() => {
     if (!documentInfo.name) {
       setDocumentScrollLeft(0);
@@ -266528,30 +266518,20 @@ const ToolOption = reactExports.memo(({
   });
 });
 ToolOption.displayName = "ToolOption";
+const COLORS = ["#ff5a5a", "#ffbf48", "#3a9bff", "#58efb8", "#000000", "#808080", "#ffffff"];
+const LINE_SIZES = [2, 4, 6];
+const TEXT_SIZES = [16, 20, 24, 28, 32];
+const TOOL_IDS = {
+  SELECT: 1,
+  PEN: 2,
+  LASER_PEN: 3,
+  SHAPE: 4,
+  TEXT: 5
+};
 const DrawingToolbar = ({
   onToolClick,
   onClearCanvas,
-  onPreviewClick,
-  // 初始值 - 仅用于初始化，实际状态由 model 管理
-  initialPenSize = 2,
-  initialPenColor = "#ff5a5a",
-  initialLaserPenSize = 2,
-  initialLaserPenColor = "#ff5a5a",
-  initialShapeSize = 2,
-  initialShapeType = "rect",
-  initialShapeColor = "#ff5a5a",
-  initialTextSize = 16,
-  initialTextColor = "#ff5a5a",
-  // 状态更新回调 - 用于向父组件通知变化
-  onPenSizeChange,
-  onPenColorChange,
-  onLaserPenSizeChange,
-  onLaserPenColorChange,
-  onShapeSizeChange,
-  onShapeTypeChange,
-  onShapeColorChange,
-  onTextSizeChange,
-  onTextColorChange
+  onPreviewClick
 }) => {
   const {
     // 工具选择
@@ -266582,114 +266562,23 @@ const DrawingToolbar = ({
     // 预览弹窗状态
     setIsPreviewModalVisible
   } = useDrawingToolsStore();
-  const prevPropsRef = reactExports.useRef({
-    initialPenSize,
-    initialPenColor,
-    initialLaserPenSize,
-    initialLaserPenColor,
-    initialShapeSize,
-    initialShapeType,
-    initialShapeColor,
-    initialTextSize,
-    initialTextColor
-  });
-  reactExports.useEffect(() => {
-    const prevProps = prevPropsRef.current;
-    if (prevProps.initialPenSize !== initialPenSize) {
-      setPenSize(initialPenSize);
-      prevPropsRef.current.initialPenSize = initialPenSize;
-    }
-    if (prevProps.initialPenColor !== initialPenColor) {
-      setPenColor(initialPenColor);
-      prevPropsRef.current.initialPenColor = initialPenColor;
-    }
-    if (prevProps.initialLaserPenSize !== initialLaserPenSize) {
-      setLaserPenSize(initialLaserPenSize);
-      prevPropsRef.current.initialLaserPenSize = initialLaserPenSize;
-    }
-    if (prevProps.initialLaserPenColor !== initialLaserPenColor) {
-      setLaserPenColor(initialLaserPenColor);
-      prevPropsRef.current.initialLaserPenColor = initialLaserPenColor;
-    }
-    if (prevProps.initialShapeSize !== initialShapeSize) {
-      setShapeSize(initialShapeSize);
-      prevPropsRef.current.initialShapeSize = initialShapeSize;
-    }
-    if (prevProps.initialShapeType !== initialShapeType) {
-      setShapeType(initialShapeType);
-      prevPropsRef.current.initialShapeType = initialShapeType;
-    }
-    if (prevProps.initialShapeColor !== initialShapeColor) {
-      setShapeColor(initialShapeColor);
-      prevPropsRef.current.initialShapeColor = initialShapeColor;
-    }
-    if (prevProps.initialTextSize !== initialTextSize) {
-      setTextSize(initialTextSize);
-      prevPropsRef.current.initialTextSize = initialTextSize;
-    }
-    if (prevProps.initialTextColor !== initialTextColor) {
-      setTextColor(initialTextColor);
-      prevPropsRef.current.initialTextColor = initialTextColor;
-    }
-  }, [initialPenSize, initialPenColor, initialLaserPenSize, initialLaserPenColor, initialShapeSize, initialShapeType, initialShapeColor, initialTextSize, initialTextColor]);
   const handleToolClick = (tool) => {
     setSelectedTool(tool);
     onToolClick(tool);
   };
-  const handlePenSizeChange = (size) => {
-    setPenSize(size);
-    if (onPenSizeChange)
-      onPenSizeChange(size);
-    setTimeout(() => onToolClick(2));
-  };
-  const handlePenColorChange = (color) => {
-    setPenColor(color);
-    if (onPenColorChange)
-      onPenColorChange(color);
-    setTimeout(() => onToolClick(2));
-  };
-  const handleLaserPenSizeChange = (size) => {
-    setLaserPenSize(size);
-    if (onLaserPenSizeChange)
-      onLaserPenSizeChange(size);
-    setTimeout(() => onToolClick(3));
-  };
-  const handleLaserPenColorChange = (color) => {
-    setLaserPenColor(color);
-    if (onLaserPenColorChange)
-      onLaserPenColorChange(color);
-    setTimeout(() => onToolClick(3));
-  };
-  const handleShapeSizeChange = (size) => {
-    setShapeSize(size);
-    if (onShapeSizeChange)
-      onShapeSizeChange(size);
-    setTimeout(() => onToolClick(4));
-  };
-  const handleShapeTypeChange = (type4) => {
-    setShapeType(type4);
-    if (onShapeTypeChange)
-      onShapeTypeChange(type4);
-    setTimeout(() => onToolClick(4));
-  };
-  const handleShapeColorChange = (color) => {
-    setShapeColor(color);
-    if (onShapeColorChange)
-      onShapeColorChange(color);
-    setTimeout(() => onToolClick(4));
-  };
-  const handleTextSizeChange = (size) => {
-    setTextSize(size);
-    if (onTextSizeChange)
-      onTextSizeChange(size);
-    setTimeout(() => onToolClick(5));
-  };
-  const handleTextColorChange = (color) => {
-    setTextColor(color);
-    if (onTextColorChange)
-      onTextColorChange(color);
-    setTimeout(() => onToolClick(5));
-  };
+  const handleToolSettingChange = (setter, toolId) => (value) => {
+    setter(value);
+    setTimeout(() => onToolClick(toolId));
+  };
+  const handlePenSizeChange = handleToolSettingChange(setPenSize, TOOL_IDS.PEN);
+  const handlePenColorChange = handleToolSettingChange(setPenColor, TOOL_IDS.PEN);
+  const handleLaserPenSizeChange = handleToolSettingChange(setLaserPenSize, TOOL_IDS.LASER_PEN);
+  const handleLaserPenColorChange = handleToolSettingChange(setLaserPenColor, TOOL_IDS.LASER_PEN);
+  const handleShapeSizeChange = handleToolSettingChange(setShapeSize, TOOL_IDS.SHAPE);
+  const handleShapeTypeChange = handleToolSettingChange(setShapeType, TOOL_IDS.SHAPE);
+  const handleShapeColorChange = handleToolSettingChange(setShapeColor, TOOL_IDS.SHAPE);
+  const handleTextSizeChange = handleToolSettingChange(setTextSize, TOOL_IDS.TEXT);
+  const handleTextColorChange = handleToolSettingChange(setTextColor, TOOL_IDS.TEXT);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
     className: "flex items-center",
     children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Space, {
@@ -266700,10 +266589,10 @@ const DrawingToolbar = ({
         children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
           className: "w-32px h-32px flex justify-center items-center cursor-pointer hover:bg-#12151a",
           style: {
-            background: selectedTool === 1 ? "#12151a" : "",
-            color: selectedTool === 1 ? "#6672fc" : "#fff"
+            background: selectedTool === TOOL_IDS.SELECT ? "#12151a" : "",
+            color: selectedTool === TOOL_IDS.SELECT ? "#6672fc" : "#fff"
           },
-          onClick: () => handleToolClick(1),
+          onClick: () => handleToolClick(TOOL_IDS.SELECT),
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgGuideO, {
             className: "text-24px"
           })
@@ -266713,11 +266602,11 @@ const DrawingToolbar = ({
         optionContent: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
           className: "w-260px py-4 px-3 flex flex-col justify-between",
           children: [/* @__PURE__ */ jsxRuntimeExports.jsx(SizePicker, {
-            sizes: [2, 4, 6],
+            sizes: LINE_SIZES,
             selectedSize: penSize,
             onSizeChange: handlePenSizeChange
           }), /* @__PURE__ */ jsxRuntimeExports.jsx(ColorPicker, {
-            colors: ["#ff5a5a", "#ffbf48", "#3a9bff", "#58efb8", "#000000", "#808080", "#ffffff"],
+            colors: COLORS,
             selectedColor: penColor,
             onColorChange: handlePenColorChange
           })]
@@ -266729,10 +266618,10 @@ const DrawingToolbar = ({
           children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
             className: "w-32px h-32px flex justify-center items-center cursor-pointer hover:bg-#12151a",
             style: {
-              background: selectedTool === 2 ? "#12151a" : "",
-              color: selectedTool === 2 ? "#6672fc" : "#fff"
+              background: selectedTool === TOOL_IDS.PEN ? "#12151a" : "",
+              color: selectedTool === TOOL_IDS.PEN ? "#6672fc" : "#fff"
             },
-            onClick: () => handleToolClick(2),
+            onClick: () => handleToolClick(TOOL_IDS.PEN),
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgEdit, {
               className: "text-18px"
             })
@@ -266743,11 +266632,11 @@ const DrawingToolbar = ({
         optionContent: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
           className: "w-260px py-4 px-3 flex flex-col justify-between",
           children: [/* @__PURE__ */ jsxRuntimeExports.jsx(SizePicker, {
-            sizes: [2, 4, 6],
+            sizes: LINE_SIZES,
             selectedSize: laserPenSize,
             onSizeChange: handleLaserPenSizeChange
           }), /* @__PURE__ */ jsxRuntimeExports.jsx(ColorPicker, {
-            colors: ["#ff5a5a", "#ffbf48", "#3a9bff", "#58efb8", "#000000", "#808080", "#ffffff"],
+            colors: COLORS,
             selectedColor: laserPenColor,
             onColorChange: handleLaserPenColorChange
           })]
@@ -266759,10 +266648,10 @@ const DrawingToolbar = ({
           children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
             className: "w-32px h-32px flex justify-center items-center cursor-pointer hover:bg-#12151a",
             style: {
-              background: selectedTool === 3 ? "#12151a" : "",
-              color: selectedTool === 3 ? "#6672fc" : "#fff"
+              background: selectedTool === TOOL_IDS.LASER_PEN ? "#12151a" : "",
+              color: selectedTool === TOOL_IDS.LASER_PEN ? "#6672fc" : "#fff"
             },
-            onClick: () => handleToolClick(3),
+            onClick: () => handleToolClick(TOOL_IDS.LASER_PEN),
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$r, {
               className: "text-18px"
             })
@@ -266777,7 +266666,7 @@ const DrawingToolbar = ({
               marginBottom: 10
             },
             children: [/* @__PURE__ */ jsxRuntimeExports.jsx(SizePicker, {
-              sizes: [2, 4, 6],
+              sizes: LINE_SIZES,
               selectedSize: shapeSize,
               onSizeChange: handleShapeSizeChange
             }), /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeTypePicker, {
@@ -266786,7 +266675,7 @@ const DrawingToolbar = ({
               onTypeChange: handleShapeTypeChange
             })]
           }), /* @__PURE__ */ jsxRuntimeExports.jsx(ColorPicker, {
-            colors: ["#ff5a5a", "#ffbf48", "#3a9bff", "#58efb8", "#000000", "#808080", "#ffffff"],
+            colors: COLORS,
             selectedColor: shapeColor,
             onColorChange: handleShapeColorChange
           })]
@@ -266798,10 +266687,10 @@ const DrawingToolbar = ({
           children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
             className: "w-32px h-32px flex justify-center items-center cursor-pointer hover:bg-#12151a",
             style: {
-              background: selectedTool === 4 ? "#12151a" : "",
-              color: selectedTool === 4 ? "#6672fc" : "#fff"
+              background: selectedTool === TOOL_IDS.SHAPE ? "#12151a" : "",
+              color: selectedTool === TOOL_IDS.SHAPE ? "#6672fc" : "#fff"
             },
-            onClick: () => handleToolClick(4),
+            onClick: () => handleToolClick(TOOL_IDS.SHAPE),
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$p, {
               className: "text-18px"
             })
@@ -266812,11 +266701,11 @@ const DrawingToolbar = ({
         optionContent: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
           className: "w-260px py-4 px-3 flex flex-col justify-between",
           children: [/* @__PURE__ */ jsxRuntimeExports.jsx(TextSizePicker, {
-            sizes: [16, 20, 24, 28, 32],
+            sizes: TEXT_SIZES,
             selectedSize: textSize,
             onSizeChange: handleTextSizeChange
           }), /* @__PURE__ */ jsxRuntimeExports.jsx(ColorPicker, {
-            colors: ["#ff5a5a", "#ffbf48", "#3a9bff", "#58efb8", "#000000", "#808080", "#ffffff"],
+            colors: COLORS,
             selectedColor: textColor,
             onColorChange: handleTextColorChange
           })]
@@ -266828,10 +266717,10 @@ const DrawingToolbar = ({
           children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
             className: "w-32px h-32px flex justify-center items-center cursor-pointer hover:bg-#12151a",
             style: {
-              background: selectedTool === 5 ? "#12151a" : "",
-              color: selectedTool === 5 ? "#6672fc" : "#fff"
+              background: selectedTool === TOOL_IDS.TEXT ? "#12151a" : "",
+              color: selectedTool === TOOL_IDS.TEXT ? "#6672fc" : "#fff"
             },
-            onClick: () => handleToolClick(5),
+            onClick: () => handleToolClick(TOOL_IDS.TEXT),
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$e, {
               className: "text-18px"
             })
@@ -267049,14 +266938,11 @@ const LivePlayer = ({
     callUsers: state.callUsers,
     toggleRightSidebar: state.toggleRightSidebar
   }));
-  useSdkStore((state) => state.callConfig.el);
   const canvasRef = reactExports.useRef(null);
   const canvasContainerRef = reactExports.useRef(null);
   const streamRef = reactExports.useRef(null);
   const streamContainerRef = reactExports.useRef(null);
   const {
-    // 工具选择
-    selectedTool,
     setSelectedTool,
     // 绘图相关引用
     downPoint,
@@ -267064,37 +266950,37 @@ const LivePlayer = ({
     currentShape,
     // 形状设置
     shapeType,
-    setShapeType,
-    shapeTypeRef,
     shapeColor,
-    setShapeColor,
-    shapeColorRef,
     shapeSize,
-    setShapeSize,
-    shapeSizeRef,
     // 画笔设置
     penColor,
-    setPenColor,
-    penColorRef,
     penSize,
-    setPenSize,
-    penSizeRef,
     // 激光笔设置
     laserPenColor,
-    setLaserPenColor,
-    laserPenColorRef,
     laserPenSize,
-    setLaserPenSize,
-    laserPenSizeRef,
     // 文字设置
     textColor,
-    setTextColor,
-    textColorRef,
     textSize,
-    setTextSize,
-    textSizeRef,
-    setIsPreviewModalVisible
-  } = useDrawingToolsStore();
+    // 预览弹窗状态
+    setIsPreviewModalVisible,
+    getter: getDrawing
+  } = useDrawingToolsStore((state) => ({
+    setSelectedTool: state.setSelectedTool,
+    downPoint: state.downPoint,
+    upPoint: state.upPoint,
+    currentShape: state.currentShape,
+    shapeType: state.shapeType,
+    shapeColor: state.shapeColor,
+    shapeSize: state.shapeSize,
+    penColor: state.penColor,
+    penSize: state.penSize,
+    laserPenColor: state.laserPenColor,
+    laserPenSize: state.laserPenSize,
+    textColor: state.textColor,
+    textSize: state.textSize,
+    getter: state.getter,
+    setIsPreviewModalVisible: state.setIsPreviewModalVisible
+  }));
   const canvasSettingRef = reactExports.useRef("horizontal");
   const worker = reactExports.useRef(null);
   const isWorkerRunning = reactExports.useRef(false);
@@ -267631,9 +267517,9 @@ const LivePlayer = ({
   };
   const drawShapeMouseDown = (e3) => {
     downPoint.current = e3.absolutePointer;
-    const shapeType2 = shapeTypeRef.current;
-    const shapeColor2 = shapeColorRef.current;
-    const shapeSize2 = shapeSizeRef.current;
+    const shapeType2 = getDrawing().shapeType;
+    const shapeColor2 = getDrawing().shapeColor;
+    const shapeSize2 = getDrawing().shapeSize;
     if (shapeType2 === "circle" || shapeType2 === "rect") {
       currentShape.current = shapeType2 === "circle" ? new xo({
         left: downPoint.current.x,
@@ -267661,7 +267547,7 @@ const LivePlayer = ({
   const drawShapeMouseMove = (e3) => {
     if (!currentShape.current)
       return;
-    const shapeType2 = shapeTypeRef.current;
+    const shapeType2 = getDrawing().shapeType;
     const currentPoint = e3.absolutePointer;
     const dx = currentPoint.x - downPoint.current.x;
     const dy = currentPoint.y - downPoint.current.y;
@@ -267695,7 +267581,7 @@ const LivePlayer = ({
     canvasRequestRenderAll();
   };
   const drawShareMouseUp = () => {
-    const shapeColor2 = shapeColorRef.current;
+    const shapeColor2 = getDrawing().shapeColor;
     if (currentShape.current) {
       if (JSON.stringify(downPoint.current) === JSON.stringify(upPoint.current)) {
         return;
@@ -267710,8 +267596,8 @@ const LivePlayer = ({
   const drawTextMouseDown = (e3) => {
     var _a3;
     const pointer = (_a3 = getter().fabricInstance) == null ? void 0 : _a3.getPointer(e3.e);
-    const textColor2 = textColorRef.current;
-    const textSize2 = textSizeRef.current;
+    const textColor2 = getDrawing().textColor;
+    const textSize2 = getDrawing().textSize;
     if (pointer) {
       const {
         x,
@@ -267732,8 +267618,8 @@ const LivePlayer = ({
   };
   const enablePenDrawing = () => {
     const canvas = getter().fabricInstance;
-    const penColor2 = penColorRef.current;
-    const penSize2 = penSizeRef.current;
+    const penColor2 = getDrawing().penColor;
+    const penSize2 = getDrawing().penSize;
     const pencilBrush = new oo(canvas);
     pencilBrush.color = penColor2;
     pencilBrush.width = penSize2;
@@ -267744,8 +267630,8 @@ const LivePlayer = ({
   };
   const enableLaserPenDrawing = () => {
     const canvas = getter().fabricInstance;
-    const laserPenColor2 = laserPenColorRef.current;
-    const laserPenSize2 = laserPenSizeRef.current;
+    const laserPenColor2 = getDrawing().laserPenColor;
+    const laserPenSize2 = getDrawing().laserPenSize;
     const pencilBrush = new oo(canvas);
     pencilBrush.color = laserPenColor2;
     pencilBrush.width = laserPenSize2;
@@ -269038,6 +268924,7 @@ const LivePlayer = ({
       console.log("loadCanvasState", newObj);
       setFabricObjects(newObj);
     },
+    getRtmpRef: () => rtmpRef,
     getActiveVideoStreams: () => activeVideoStreamsRef.current,
     getMicrophoneStreams: () => microphoneStreamsRef.current,
     getBackgroundAudioStreams: () => backgroundAudioStreamsRef.current,
@@ -269247,28 +269134,9 @@ const LivePlayer = ({
       children: [isMainRole && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
         className: " flex items-center justify-center h-48px gap-5 bg-#222933",
         children: [/* @__PURE__ */ jsxRuntimeExports.jsx(DrawingToolbar, {
-          selectedTool,
           onToolClick: clickTool,
           onClearCanvas: clearCanvas,
-          onPreviewClick: () => setIsPreviewModalVisible(true),
-          initialPenSize: penSize,
-          initialPenColor: penColor,
-          initialLaserPenSize: laserPenSize,
-          initialLaserPenColor: laserPenColor,
-          initialShapeSize: shapeSize,
-          initialShapeType: shapeType,
-          initialShapeColor: shapeColor,
-          initialTextSize: textSize,
-          initialTextColor: textColor,
-          onPenSizeChange: setPenSize,
-          onPenColorChange: setPenColor,
-          onLaserPenSizeChange: setLaserPenSize,
-          onLaserPenColorChange: setLaserPenColor,
-          onShapeSizeChange: setShapeSize,
-          onShapeTypeChange: setShapeType,
-          onShapeColorChange: setShapeColor,
-          onTextSizeChange: setTextSize,
-          onTextColorChange: setTextColor
+          onPreviewClick: () => setIsPreviewModalVisible(true)
         }), callConfig.isCall && /* @__PURE__ */ jsxRuntimeExports.jsx(LayoutSwitcher, {
           className: "absolute right-10",
           currentLayout: layoutMode,
@@ -269301,12 +269169,12 @@ const LivePlayer = ({
               })
             }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
               id: "video-container",
-              className: "absolute overflow-hidden bg-#000  z-[-10]",
+              className: "absolute overflow-hidden bg-#000 w-full z-[-10]",
               style: {
                 aspectRatio: 16 / 9
               },
               children: [/* @__PURE__ */ jsxRuntimeExports.jsx("video", {
-                className: " h-full object-cover",
+                className: "w-full h-full object-cover",
                 ref: videoRef
               }), !(isMainCanvasUser == null ? void 0 : isMainCanvasUser.isVideoEnabled) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
                 className: "absolute inset-0 bg-gray-800 flex items-center justify-center",
@@ -280200,6 +280068,617 @@ let ErrorBoundary$1 = class ErrorBoundary extends reactExports.Component {
     return this.props.children;
   }
 };
+const AudioVisualizer = reactExports.memo(
+  ({ selectedMicrophone, isVisible: isVisible3, onVolumeLevelsChange }) => {
+    const [audioContext, setAudioContext] = reactExports.useState(null);
+    const [analyser, setAnalyser] = reactExports.useState(null);
+    const [microphoneStream, setMicrophoneStream] = reactExports.useState(null);
+    const [volumeLevels, setVolumeLevels] = reactExports.useState(Array(12).fill(0));
+    const animationFrameRef = reactExports.useRef(null);
+    const canvasRef = reactExports.useRef(null);
+    const microphoneStreamRef = reactExports.useRef(microphoneStream);
+    const audioContextRef = reactExports.useRef(audioContext);
+    const analyserRef = reactExports.useRef(analyser);
+    reactExports.useEffect(() => {
+      microphoneStreamRef.current = microphoneStream;
+      audioContextRef.current = audioContext;
+      analyserRef.current = analyser;
+    }, [microphoneStream, audioContext, analyser]);
+    const cleanupMediaResources = reactExports.useCallback(() => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+      if (microphoneStreamRef.current) {
+        microphoneStreamRef.current.getTracks().forEach((track) => track.stop());
+        setMicrophoneStream(null);
+      }
+      if (audioContextRef.current) {
+        audioContextRef.current.close().catch((err2) => console.error("关闭音频上下文失败:", err2));
+        setAudioContext(null);
+        setAnalyser(null);
+      }
+    }, []);
+    reactExports.useEffect(() => {
+      if (onVolumeLevelsChange) {
+        onVolumeLevelsChange(volumeLevels);
+      }
+    }, [volumeLevels, onVolumeLevelsChange]);
+    reactExports.useEffect(() => {
+      if (isVisible3 && selectedMicrophone) {
+        const context = new (window.AudioContext || window.webkitAudioContext)();
+        setAudioContext(context);
+        const audioAnalyser = context.createAnalyser();
+        audioAnalyser.fftSize = 2048;
+        setAnalyser(audioAnalyser);
+        navigator.mediaDevices.getUserMedia({
+          audio: {
+            deviceId: selectedMicrophone ? { exact: selectedMicrophone } : void 0
+          }
+        }).then((stream) => {
+          setMicrophoneStream(stream);
+          const source = context.createMediaStreamSource(stream);
+          source.connect(audioAnalyser);
+          const canvas = canvasRef.current;
+          const canvasCtx = canvas == null ? void 0 : canvas.getContext("2d");
+          const frequencyDataArray = new Uint8Array(audioAnalyser.frequencyBinCount);
+          const timeDataArray = new Uint8Array(audioAnalyser.frequencyBinCount);
+          const analyzeVolume = () => {
+            audioAnalyser.getByteFrequencyData(frequencyDataArray);
+            audioAnalyser.getByteTimeDomainData(timeDataArray);
+            if (canvasCtx && canvas) {
+              canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+              canvasCtx.lineWidth = 2;
+              canvasCtx.strokeStyle = "#2196F3";
+              canvasCtx.beginPath();
+              const sliceWidth = canvas.width / timeDataArray.length;
+              let x = 0;
+              for (let i = 0; i < timeDataArray.length; i++) {
+                const v3 = timeDataArray[i] / 128;
+                const y3 = v3 * canvas.height / 2;
+                if (i === 0) {
+                  canvasCtx.moveTo(x, y3);
+                } else {
+                  canvasCtx.lineTo(x, y3);
+                }
+                x += sliceWidth;
+              }
+              canvasCtx.lineTo(canvas.width, canvas.height / 2);
+              canvasCtx.stroke();
+            }
+            const segmentSize = Math.floor(frequencyDataArray.length / 12);
+            const normalizedLevels = Array(12).fill(0).map((_2, index2) => {
+              const start2 = index2 * segmentSize;
+              const end2 = start2 + segmentSize;
+              const segmentAvg = frequencyDataArray.slice(start2, end2).reduce((sum2, value) => sum2 + value, 0) / segmentSize;
+              return Math.min(1, Math.pow(segmentAvg / 255, 0.8));
+            });
+            setVolumeLevels(normalizedLevels);
+            animationFrameRef.current = requestAnimationFrame(analyzeVolume);
+          };
+          analyzeVolume();
+        }).catch((err2) => {
+          console.error("获取麦克风失败:", err2);
+          const interval = setInterval(() => {
+            const newLevels = Array(12).fill(0).map(() => Math.random());
+            setVolumeLevels(newLevels);
+          }, 200);
+          return () => clearInterval(interval);
+        });
+        return cleanupMediaResources;
+      }
+    }, [isVisible3, selectedMicrophone, cleanupMediaResources]);
+    reactExports.useEffect(() => {
+      return () => {
+        cleanupMediaResources();
+      };
+    }, [cleanupMediaResources]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: " h-24 bg-gray-50 rounded border border-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("canvas", { ref: canvasRef, className: " h-full", width: "400", height: "100" }) }) });
+  }
+);
+AudioVisualizer.displayName = "AudioVisualizer";
+class MediaErrorBoundary extends reactExports.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      errorMessage: ""
+    };
+  }
+  static getDerivedStateFromError(error2) {
+    return {
+      hasError: true,
+      errorMessage: error2.message
+    };
+  }
+  componentDidCatch(error2, errorInfo) {
+    console.error("媒体设备错误:", error2, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+        className: "p-4 border border-red-300 rounded bg-red-50",
+        children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Alert, {
+          message: "媒体设备错误",
+          description: `无法访问媒体设备: ${this.state.errorMessage}。请检查设备权限或连接。`,
+          type: "error",
+          showIcon: true,
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon, {})
+        }), /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, {
+          type: "primary",
+          className: "mt-4",
+          onClick: () => this.setState({
+            hasError: false,
+            errorMessage: ""
+          }),
+          children: "重试"
+        })]
+      });
+    }
+    return this.props.children;
+  }
+}
+const MediaSettings = () => {
+  const {
+    callCurrentUser,
+    toggleVideo,
+    rtc,
+    getter
+  } = useCallStore();
+  const [isModalVisible, setIsModalVisible] = reactExports.useState(false);
+  const [mirrorEnabled, setMirrorEnabled] = reactExports.useState(true);
+  const [cameraDevices, setCameraDevices] = reactExports.useState([]);
+  const [microphoneDevices, setMicrophoneDevices] = reactExports.useState([]);
+  const [selectedCamera, setSelectedCamera] = reactExports.useState("");
+  const [selectedMicrophone, setSelectedMicrophone] = reactExports.useState("");
+  const [beautySettings, setBeautySettings] = reactExports.useState({
+    enabled: false,
+    whiteIntensity: 0.5,
+    smoothIntensity: 0.5,
+    sharpenIntensity: 0.5
+  });
+  const [beautyExtension, setBeautyExtension] = reactExports.useState(null);
+  const [beautyCompatible, setBeautyCompatible] = reactExports.useState(false);
+  const [beautyInitialized, setBeautyInitialized] = reactExports.useState(false);
+  const getDevices = reactExports.useCallback(async () => {
+    try {
+      if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
+        console.error("浏览器不支持获取媒体设备列表");
+        staticMethods.error("您的浏览器不支持媒体设备选择功能");
+        return;
+      }
+      await navigator.mediaDevices.getUserMedia({
+        audio: true,
+        video: true
+      }).catch((err2) => console.error("获取媒体权限失败:", err2));
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const cameras = devices.filter((device) => device.kind === "videoinput").map((device) => ({
+        id: device.deviceId,
+        label: device.label || `摄像头 ${device.deviceId.slice(0, 5)}...`
+      }));
+      const microphones = devices.filter((device) => device.kind === "audioinput").map((device) => ({
+        id: device.deviceId,
+        label: device.label || `麦克风 ${device.deviceId.slice(0, 5)}...`
+      }));
+      if (cameras.length > 0) {
+        setCameraDevices(cameras);
+        setSelectedCamera((prevCamera) => {
+          return cameras.find((cam) => cam.id === prevCamera) ? prevCamera : cameras[0].id;
+        });
+      }
+      if (microphones.length > 0) {
+        setMicrophoneDevices(microphones);
+        setSelectedMicrophone((prevMic) => {
+          return microphones.find((mic) => mic.id === prevMic) ? prevMic : microphones[0].id;
+        });
+      }
+    } catch (error2) {
+      console.error("获取设备列表失败:", error2);
+      staticMethods.error("获取媒体设备失败，请检查设备权限");
+      setCameraDevices([{
+        id: "default",
+        label: "默认摄像头"
+      }]);
+      setMicrophoneDevices([{
+        id: "default",
+        label: "默认麦克风"
+      }]);
+    }
+  }, []);
+  reactExports.useEffect(() => {
+    if (isModalVisible) {
+      getDevices();
+    }
+    if (navigator.mediaDevices) {
+      navigator.mediaDevices.addEventListener("devicechange", getDevices);
+      return () => {
+        navigator.mediaDevices.removeEventListener("devicechange", getDevices);
+      };
+    }
+  }, [getDevices, isModalVisible]);
+  reactExports.useEffect(() => {
+    if (isModalVisible && !beautyInitialized) {
+      initializeBeautyExtension();
+    }
+  }, [isModalVisible, beautyInitialized]);
+  const initializeBeautyExtension = reactExports.useCallback(async () => {
+    try {
+      const rtcInstance = getter().rtc;
+      if (rtcInstance && rtcInstance.beautyExtension) {
+        const extension = rtcInstance.beautyExtension;
+        const compatibilityResult = await extension.checkCompatibility();
+        console.log("浏览器兼容性检查结果:", compatibilityResult);
+        if (compatibilityResult.isCompatible) {
+          setBeautyExtension(extension);
+          setBeautyCompatible(true);
+          setBeautyInitialized(true);
+          console.log("美颜扩展初始化成功");
+        } else {
+          console.warn("浏览器不支持美颜功能:", compatibilityResult.message || "兼容性检查失败");
+          setBeautyCompatible(false);
+          staticMethods.warning("您的浏览器不支持美颜功能，请使用 Chrome 78+ 或其他兼容浏览器");
+        }
+      } else {
+        console.warn("RTC客户端或美颜扩展未初始化");
+        setBeautyCompatible(false);
+        staticMethods.warning("RTC客户端未初始化，无法使用美颜功能");
+      }
+    } catch (error2) {
+      console.error("美颜扩展初始化失败:", error2);
+      setBeautyCompatible(false);
+      staticMethods.error("美颜功能初始化失败");
+    }
+  }, [rtc]);
+  const handleBeautyToggle = reactExports.useCallback((enabled) => {
+    if (!beautyExtension || !beautyCompatible) {
+      staticMethods.warning("美颜功能不可用");
+      return;
+    }
+    try {
+      if (enabled) {
+        beautyExtension.enableBeauty();
+        console.log("美颜已开启");
+      } else {
+        beautyExtension.disableBeauty();
+        console.log("美颜已关闭");
+      }
+      setBeautySettings((prev2) => ({
+        ...prev2,
+        enabled
+      }));
+    } catch (error2) {
+      console.error("美颜开关操作失败:", error2);
+      staticMethods.error("美颜开关操作失败");
+    }
+  }, [beautyExtension, beautyCompatible]);
+  const handleBeautyIntensityChange = reactExports.useCallback(
+    debounce$6((type4, value) => {
+      if (!beautyExtension || !beautyCompatible) {
+        return;
+      }
+      try {
+        let mode;
+        let settingKey;
+        switch (type4) {
+          case "white":
+            mode = EffectBeautyMode.EFFECT_WHITE_MODE;
+            settingKey = "whiteIntensity";
+            break;
+          case "smooth":
+            mode = EffectBeautyMode.EFFECT_SMOOTH_MODE;
+            settingKey = "smoothIntensity";
+            break;
+          case "sharpen":
+            mode = EffectBeautyMode.EFFECT_SHARPEN_MODE;
+            settingKey = "sharpenIntensity";
+            break;
+          default:
+            return;
+        }
+        beautyExtension.setBeautyIntensity(mode, value);
+        setBeautySettings((prev2) => ({
+          ...prev2,
+          [settingKey]: value
+        }));
+        console.log(`${type4} 强度已设置为:`, value);
+      } catch (error2) {
+        console.error("美颜强度设置失败:", error2);
+        staticMethods.error("美颜强度设置失败");
+      }
+    }, 300),
+    // 300ms 防抖延迟
+    [beautyExtension, beautyCompatible]
+  );
+  reactExports.useEffect(() => {
+    const savedBeautySettings = localStorage.getItem("beautySettings");
+    if (savedBeautySettings) {
+      try {
+        const parsed = JSON.parse(savedBeautySettings);
+        setBeautySettings(parsed);
+      } catch (error2) {
+        console.error("加载美颜设置失败:", error2);
+      }
+    }
+  }, []);
+  reactExports.useEffect(() => {
+    localStorage.setItem("beautySettings", JSON.stringify(beautySettings));
+  }, [beautySettings]);
+  const handleCameraChange = reactExports.useCallback(async (newCameraId) => {
+    setSelectedCamera(newCameraId);
+    try {
+      const rtcInstance = getter().rtc;
+      if (rtcInstance && rtcInstance.setMediaDevices) {
+        const result = await rtcInstance.setMediaDevices({
+          cameraId: newCameraId,
+          mirrorEnabled
+        });
+        if (result.success) {
+          console.log("摄像头设备已切换:", newCameraId);
+        } else {
+          console.error("摄像头切换失败:", result.message);
+          staticMethods.error("摄像头切换失败");
+        }
+      }
+    } catch (error2) {
+      console.error("摄像头配置失败:", error2);
+      staticMethods.error("摄像头配置失败");
+    }
+  }, [rtc, mirrorEnabled]);
+  const handleMicrophoneChange = reactExports.useCallback(async (newMicrophoneId) => {
+    setSelectedMicrophone(newMicrophoneId);
+    try {
+      const rtcInstance = getter().rtc;
+      if (rtcInstance && rtcInstance.setMediaDevices) {
+        const result = await rtcInstance.setMediaDevices({
+          microphoneId: newMicrophoneId
+        });
+        if (result.success) {
+          console.log("麦克风设备已切换:", newMicrophoneId);
+        } else {
+          console.error("麦克风切换失败:", result.message);
+          staticMethods.error("麦克风切换失败");
+        }
+      }
+    } catch (error2) {
+      console.error("麦克风配置失败:", error2);
+      staticMethods.error("麦克风配置失败");
+    }
+  }, [rtc]);
+  const handleMirrorChange = reactExports.useCallback(async (checked) => {
+    setMirrorEnabled(checked);
+    try {
+      const rtcInstance = getter().rtc;
+      if (rtcInstance && rtcInstance.setMediaDevices) {
+        const result = await rtcInstance.setMediaDevices({
+          cameraId: selectedCamera,
+          mirrorEnabled: checked
+        });
+        if (result.success) {
+          console.log("镜像翻转已设置:", checked);
+        } else {
+          console.error("镜像翻转设置失败:", result.message);
+          staticMethods.error("镜像翻转设置失败");
+        }
+      }
+    } catch (error2) {
+      console.error("镜像翻转配置失败:", error2);
+      staticMethods.error("镜像翻转配置失败");
+    }
+  }, [rtc, selectedCamera]);
+  const closeMediaSettings = reactExports.useCallback(() => {
+    setIsModalVisible(false);
+  }, []);
+  const openMediaSettings = () => {
+    console.log("openMediaSettings");
+    setIsModalVisible(true);
+  };
+  const handleClose = reactExports.useCallback(() => {
+    closeMediaSettings();
+  }, [closeMediaSettings]);
+  reactExports.useEffect(() => {
+    console.log("useEffect openMediaSettings");
+    eventBus.on("openMediaSettings", openMediaSettings);
+    eventBus.on("closeMediaSettings", closeMediaSettings);
+    return () => {
+      eventBus.off("openMediaSettings", openMediaSettings);
+      eventBus.off("closeMediaSettings", closeMediaSettings);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, {
+    open: isModalVisible,
+    title: "媒体设置",
+    onCancel: handleClose,
+    width: 910,
+    footer: null,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+      className: "flex justify-between",
+      children: [/* @__PURE__ */ jsxRuntimeExports.jsx(MediaErrorBoundary, {
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+            className: "mb-6",
+            children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+              className: "flex items-center mb-2",
+              children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                className: "mr-2",
+                children: "摄像头："
+              }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+                className: "flex-1",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select$1, {
+                  className: "w-full",
+                  value: selectedCamera,
+                  onChange: handleCameraChange,
+                  options: reactExports.useMemo(() => cameraDevices.map((device) => ({
+                    value: device.id,
+                    label: device.label
+                  })), [cameraDevices])
+                })
+              })]
+            }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+              className: "flex items-center mb-2",
+              children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                className: "mr-2",
+                children: "麦克风："
+              }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+                className: "flex-1",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select$1, {
+                  className: "w-full",
+                  value: selectedMicrophone,
+                  onChange: handleMicrophoneChange,
+                  options: reactExports.useMemo(() => microphoneDevices.map((device) => ({
+                    value: device.id,
+                    label: device.label
+                  })), [microphoneDevices])
+                })
+              })]
+            }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+              className: "mt-8",
+              children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+                className: "flex items-center justify-between mb-2",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                  children: "音频监控"
+                })
+              }), /* @__PURE__ */ jsxRuntimeExports.jsx(MediaErrorBoundary, {
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(AudioVisualizer, {
+                  selectedMicrophone,
+                  isVisible: isModalVisible
+                })
+              })]
+            }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+              className: "mt-8",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                className: "flex items-center justify-between mb-2",
+                children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                  children: "镜像翻转"
+                }), /* @__PURE__ */ jsxRuntimeExports.jsx(Switch, {
+                  checked: mirrorEnabled,
+                  onChange: handleMirrorChange,
+                  size: "small"
+                })]
+              })
+            }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+              className: "mt-8 border-t pt-6",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                className: "mb-4",
+                children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", {
+                  className: "text-lg font-medium mb-4 flex items-center",
+                  children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                    className: "mr-2",
+                    children: "🎨"
+                  }), "美颜设置", !beautyCompatible && /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                    className: "ml-2 text-xs text-red-500 bg-red-50 px-2 py-1 rounded",
+                    children: "不支持"
+                  })]
+                }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                  className: "flex items-center justify-between mb-4",
+                  children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                    className: "text-sm",
+                    children: "启用美颜"
+                  }), /* @__PURE__ */ jsxRuntimeExports.jsx(Switch, {
+                    checked: beautySettings.enabled,
+                    onChange: handleBeautyToggle,
+                    disabled: !beautyCompatible,
+                    size: "small"
+                  })]
+                }), beautySettings.enabled && beautyCompatible && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                  className: "space-y-4",
+                  children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                      className: "flex items-center justify-between mb-2",
+                      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                        className: "text-sm",
+                        children: "美白强度"
+                      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
+                        className: "text-xs text-gray-500",
+                        children: [Math.round(beautySettings.whiteIntensity * 100), "%"]
+                      })]
+                    }), /* @__PURE__ */ jsxRuntimeExports.jsx(Slider2, {
+                      min: 0,
+                      max: 1,
+                      step: 0.1,
+                      value: beautySettings.whiteIntensity,
+                      onChange: (value) => handleBeautyIntensityChange("white", value),
+                      tooltip: {
+                        formatter: (value) => `${Math.round((value || 0) * 100)}%`
+                      }
+                    })]
+                  }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                      className: "flex items-center justify-between mb-2",
+                      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                        className: "text-sm",
+                        children: "磨皮强度"
+                      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
+                        className: "text-xs text-gray-500",
+                        children: [Math.round(beautySettings.smoothIntensity * 100), "%"]
+                      })]
+                    }), /* @__PURE__ */ jsxRuntimeExports.jsx(Slider2, {
+                      min: 0,
+                      max: 1,
+                      step: 0.1,
+                      value: beautySettings.smoothIntensity,
+                      onChange: (value) => handleBeautyIntensityChange("smooth", value),
+                      tooltip: {
+                        formatter: (value) => `${Math.round((value || 0) * 100)}%`
+                      }
+                    })]
+                  }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                      className: "flex items-center justify-between mb-2",
+                      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                        className: "text-sm",
+                        children: "锐化强度"
+                      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
+                        className: "text-xs text-gray-500",
+                        children: [Math.round(beautySettings.sharpenIntensity * 100), "%"]
+                      })]
+                    }), /* @__PURE__ */ jsxRuntimeExports.jsx(Slider2, {
+                      min: 0,
+                      max: 1,
+                      step: 0.1,
+                      value: beautySettings.sharpenIntensity,
+                      onChange: (value) => handleBeautyIntensityChange("sharpen", value),
+                      tooltip: {
+                        formatter: (value) => `${Math.round((value || 0) * 100)}%`
+                      }
+                    })]
+                  })]
+                }), !beautyCompatible && /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, {
+                  message: "美颜功能不可用",
+                  description: "您的浏览器不支持美颜功能，请使用 Chrome 78+ 或其他兼容浏览器",
+                  type: "warning",
+                  showIcon: true,
+                  icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon, {}),
+                  className: "mt-4"
+                })]
+              })
+            })]
+          })
+        })
+      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+        children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(MediaErrorBoundary, {
+            children: isModalVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(CallUserVideo, {
+              video_id: (callCurrentUser == null ? void 0 : callCurrentUser.rtc_userid) + "preview",
+              user: callCurrentUser,
+              className: " h-60",
+              selectable: false
+            })
+          })
+        }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+          className: "mt-4 flex items-center justify-center",
+          children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
+            className: "text-sm",
+            children: [(callCurrentUser == null ? void 0 : callCurrentUser.isVideoEnabled) ? "开启" : "关闭", "摄像头"]
+          }), /* @__PURE__ */ jsxRuntimeExports.jsx(Switch, {
+            checked: callCurrentUser == null ? void 0 : callCurrentUser.isVideoEnabled,
+            onChange: toggleVideo,
+            size: "small"
+          })]
+        })]
+      })]
+    })
+  });
+};
 const CallComponent = () => {
   const liveId = useLiveId();
   const {
@@ -280310,7 +280789,7 @@ const CallComponent = () => {
             })
           }), callConfig.rule === "main" && callConfig.isCall && /* @__PURE__ */ jsxRuntimeExports.jsx(CallBottomActions, {
             onConfigUpdate: handleUpdateRTCConfig
-          })]
+          }), (callConfig == null ? void 0 : callConfig.isCall) && /* @__PURE__ */ jsxRuntimeExports.jsx(MediaSettings, {})]
         })
       })
     })
@@ -280967,10 +281446,141 @@ const useCommentSocketStore = create$c((set3, get4) => ({
   disconnect: void 0,
   // 业务方法（空实现，后续由 Hook 覆盖）
   fetChatUrl: async (id3) => {
-  },
-  setCallback: () => {
   }
 }));
+function useCommentSocket() {
+  const liveId = useLiveId();
+  const callbackRef = reactExports.useRef();
+  const fetchLivePush = useLivePushCodeStore((state) => state.fetchLivePush);
+  const chat_url = useCommentSocketStore((state) => state.chat_url);
+  const handleMessageChange = reactExports.useCallback((mess) => {
+    var _a2;
+    if (!(mess == null ? void 0 : mess.data))
+      return;
+    let message2;
+    try {
+      message2 = JSON.parse(mess.data);
+    } catch (e3) {
+      console.error("解析 WebSocket 消息失败：", e3);
+      return;
+    }
+    useCommentSocketStore.setState({ latestMessage: mess });
+    switch (message2.type) {
+      case "comment_delete":
+        useCommentSocketStore.setState({ commentDeleteItem: message2.data });
+        setTimeout(() => {
+          useCommentSocketStore.setState({ commentDeleteItem: {} });
+        }, 0);
+        break;
+      case "chat_forward":
+        (_a2 = callbackRef.current) == null ? void 0 : _a2.call(callbackRef, message2.data);
+        break;
+      case "activity_config_change":
+        useCommentSocketStore.setState({ activityConfigChange: message2.data });
+        break;
+    }
+  }, []);
+  const socketRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    if (!chat_url) {
+      return;
+    }
+    if (socketRef.current) {
+      socketRef.current.close();
+      socketRef.current = null;
+    }
+    try {
+      socketRef.current = new WebSocket(chat_url);
+      socketRef.current.onopen = (event) => {
+        if (liveId && socketRef.current) {
+          try {
+            const joinRoomMessage = JSON.stringify({
+              type: "join_room",
+              data: { room_id: liveId }
+            });
+            socketRef.current.send(joinRoomMessage);
+          } catch (error2) {
+            console.error("❌ WebSocket: 发送 join_room 失败:", error2);
+          }
+        }
+        useCommentSocketStore.setState({ readyState: 1 });
+      };
+      socketRef.current.onclose = (event) => {
+        useCommentSocketStore.setState({ readyState: 3 });
+      };
+      socketRef.current.onerror = (error2) => {
+        console.error("❌ WebSocket: 连接错误:", error2);
+        useCommentSocketStore.setState({ readyState: 3 });
+      };
+      socketRef.current.onmessage = (event) => {
+        handleMessageChange(event);
+      };
+    } catch (error2) {
+      console.error("❌ WebSocket: 创建连接失败:", error2);
+      useCommentSocketStore.setState({ readyState: 3 });
+    }
+    return () => {
+      if (socketRef.current) {
+        socketRef.current.close();
+        socketRef.current = null;
+      }
+    };
+  }, [chat_url, liveId, handleMessageChange]);
+  const fetChatUrl = reactExports.useCallback(
+    async (id3) => {
+      if (!id3) {
+        return;
+      }
+      try {
+        const res = await fetchLivePush(id3);
+        if (!res) {
+          console.error("❌ 获取直播推流配置失败");
+          return;
+        }
+        let newChatUrl = res.chat_url || "";
+        if (newChatUrl) {
+          const userAgentParam = `equipment=${encodeURIComponent(navigator.userAgent)}`;
+          newChatUrl += newChatUrl.includes("?") ? `&${userAgentParam}` : `?${userAgentParam}`;
+        } else {
+          console.error("❌ 未获取到有效的 chat_url");
+        }
+        useCommentSocketStore.setState({
+          chat_url: newChatUrl,
+          rtmUrl: res.rtm_push_url || "",
+          webTransportUrl: res.web_transport_url || ""
+        });
+      } catch (error2) {
+        console.error("❌ 获取直播推流配置失败:", error2);
+      }
+    },
+    [fetchLivePush]
+  );
+  const setCallback = reactExports.useCallback((callback) => {
+    callbackRef.current = callback;
+  }, []);
+  const sendMessage = reactExports.useCallback((message2) => {
+    if (socketRef.current && socketRef.current.readyState === 1) {
+      socketRef.current.send(message2);
+    } else {
+      console.error("useCommentSocket - 发送消息失败，WebSocket 未连接");
+    }
+  }, []);
+  const disconnect = reactExports.useCallback(() => {
+    if (socketRef.current) {
+      socketRef.current.close();
+      socketRef.current = null;
+      useCommentSocketStore.setState({ readyState: 3 });
+    }
+  }, []);
+  reactExports.useEffect(() => {
+    useCommentSocketStore.setState({
+      sendMessage,
+      disconnect,
+      fetChatUrl
+    });
+  }, [sendMessage, disconnect, fetChatUrl]);
+  return { ...useCommentSocketStore.getState(), setCallback };
+}
 function getTargetElement(target, defaultElement) {
   if (!target) {
     return defaultElement;
@@ -288902,7 +289512,7 @@ const ChatComponent = () => {
     fetChatUrl,
     disconnect,
     setCallback
-  } = useCommentSocketStore();
+  } = useCommentSocket();
   const [selectFilter, setSelectFilter] = reactExports.useState(1);
   const fetchInteractionList = async () => {
     const res = await request("/bis/interaction-list", {
@@ -288942,11 +289552,20 @@ const ChatComponent = () => {
     }
   };
   reactExports.useEffect(() => {
-    fetChatUrl(liveId);
+    setCallback(handleMessage);
     return () => {
-      disconnect == null ? void 0 : disconnect();
+      setCallback(() => {
+      });
     };
   }, []);
+  reactExports.useEffect(() => {
+    if (liveId) {
+      fetChatUrl(liveId);
+    }
+    return () => {
+      disconnect == null ? void 0 : disconnect();
+    };
+  }, [liveId, fetChatUrl, disconnect]);
   const handleMessage = (message2) => {
     console.log("New message received:", message2);
     if (Object.keys(message2).length === 0)
@@ -288971,13 +289590,6 @@ const ChatComponent = () => {
       }
     }
   };
-  reactExports.useEffect(() => {
-    setCallback(handleMessage);
-    return () => {
-      setCallback(() => {
-      });
-    };
-  }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
     className: " h-full",
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
@@ -291727,13 +292339,16 @@ const RtcJoomRoom = reactExports.memo(({
           }
         }, VideoRenderMode.RENDER_MODE_HIDDEN));
         if (callConfig.rule === "sub" && callConfig.enter_muted) {
-          toggleAudio(false);
+          await toggleAudio(false);
         } else {
           updateCallConfig({
             isReady: true
           });
         }
         await ((_d2 = getter().rtc) == null ? void 0 : _d2.publishStream());
+        if (callConfig.rule === "main") {
+          callAudioMixing();
+        }
       } catch (err2) {
         console.error("创建本地流失败" + rtc_userid, "appid:" + appid, "roomid:" + rtc_room_id, "userid:" + rtc_userid, err2);
       }
@@ -292200,618 +292815,6 @@ const RtcJoomRoom = reactExports.memo(({
     })
   });
 });
-const AudioVisualizer = reactExports.memo(
-  ({ selectedMicrophone, isVisible: isVisible3, onVolumeLevelsChange }) => {
-    const [audioContext, setAudioContext] = reactExports.useState(null);
-    const [analyser, setAnalyser] = reactExports.useState(null);
-    const [microphoneStream, setMicrophoneStream] = reactExports.useState(null);
-    const [volumeLevels, setVolumeLevels] = reactExports.useState(Array(12).fill(0));
-    const animationFrameRef = reactExports.useRef(null);
-    const canvasRef = reactExports.useRef(null);
-    const microphoneStreamRef = reactExports.useRef(microphoneStream);
-    const audioContextRef = reactExports.useRef(audioContext);
-    const analyserRef = reactExports.useRef(analyser);
-    reactExports.useEffect(() => {
-      microphoneStreamRef.current = microphoneStream;
-      audioContextRef.current = audioContext;
-      analyserRef.current = analyser;
-    }, [microphoneStream, audioContext, analyser]);
-    const cleanupMediaResources = reactExports.useCallback(() => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = null;
-      }
-      if (microphoneStreamRef.current) {
-        microphoneStreamRef.current.getTracks().forEach((track) => track.stop());
-        setMicrophoneStream(null);
-      }
-      if (audioContextRef.current) {
-        audioContextRef.current.close().catch((err2) => console.error("关闭音频上下文失败:", err2));
-        setAudioContext(null);
-        setAnalyser(null);
-      }
-    }, []);
-    reactExports.useEffect(() => {
-      if (onVolumeLevelsChange) {
-        onVolumeLevelsChange(volumeLevels);
-      }
-    }, [volumeLevels, onVolumeLevelsChange]);
-    reactExports.useEffect(() => {
-      if (isVisible3 && selectedMicrophone) {
-        const context = new (window.AudioContext || window.webkitAudioContext)();
-        setAudioContext(context);
-        const audioAnalyser = context.createAnalyser();
-        audioAnalyser.fftSize = 2048;
-        setAnalyser(audioAnalyser);
-        navigator.mediaDevices.getUserMedia({
-          audio: {
-            deviceId: selectedMicrophone ? { exact: selectedMicrophone } : void 0
-          }
-        }).then((stream) => {
-          setMicrophoneStream(stream);
-          const source = context.createMediaStreamSource(stream);
-          source.connect(audioAnalyser);
-          const canvas = canvasRef.current;
-          const canvasCtx = canvas == null ? void 0 : canvas.getContext("2d");
-          const frequencyDataArray = new Uint8Array(audioAnalyser.frequencyBinCount);
-          const timeDataArray = new Uint8Array(audioAnalyser.frequencyBinCount);
-          const analyzeVolume = () => {
-            audioAnalyser.getByteFrequencyData(frequencyDataArray);
-            audioAnalyser.getByteTimeDomainData(timeDataArray);
-            if (canvasCtx && canvas) {
-              canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
-              canvasCtx.lineWidth = 2;
-              canvasCtx.strokeStyle = "#2196F3";
-              canvasCtx.beginPath();
-              const sliceWidth = canvas.width / timeDataArray.length;
-              let x = 0;
-              for (let i = 0; i < timeDataArray.length; i++) {
-                const v3 = timeDataArray[i] / 128;
-                const y3 = v3 * canvas.height / 2;
-                if (i === 0) {
-                  canvasCtx.moveTo(x, y3);
-                } else {
-                  canvasCtx.lineTo(x, y3);
-                }
-                x += sliceWidth;
-              }
-              canvasCtx.lineTo(canvas.width, canvas.height / 2);
-              canvasCtx.stroke();
-            }
-            const segmentSize = Math.floor(frequencyDataArray.length / 12);
-            const normalizedLevels = Array(12).fill(0).map((_2, index2) => {
-              const start2 = index2 * segmentSize;
-              const end2 = start2 + segmentSize;
-              const segmentAvg = frequencyDataArray.slice(start2, end2).reduce((sum2, value) => sum2 + value, 0) / segmentSize;
-              return Math.min(1, Math.pow(segmentAvg / 255, 0.8));
-            });
-            setVolumeLevels(normalizedLevels);
-            animationFrameRef.current = requestAnimationFrame(analyzeVolume);
-          };
-          analyzeVolume();
-        }).catch((err2) => {
-          console.error("获取麦克风失败:", err2);
-          const interval = setInterval(() => {
-            const newLevels = Array(12).fill(0).map(() => Math.random());
-            setVolumeLevels(newLevels);
-          }, 200);
-          return () => clearInterval(interval);
-        });
-        return cleanupMediaResources;
-      }
-    }, [isVisible3, selectedMicrophone, cleanupMediaResources]);
-    reactExports.useEffect(() => {
-      return () => {
-        cleanupMediaResources();
-      };
-    }, [cleanupMediaResources]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: " h-24 bg-gray-50 rounded border border-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("canvas", { ref: canvasRef, className: " h-full", width: "400", height: "100" }) }) });
-  }
-);
-AudioVisualizer.displayName = "AudioVisualizer";
-class MediaErrorBoundary extends reactExports.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hasError: false,
-      errorMessage: ""
-    };
-  }
-  static getDerivedStateFromError(error2) {
-    return {
-      hasError: true,
-      errorMessage: error2.message
-    };
-  }
-  componentDidCatch(error2, errorInfo) {
-    console.error("媒体设备错误:", error2, errorInfo);
-  }
-  render() {
-    if (this.state.hasError) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-        className: "p-4 border border-red-300 rounded bg-red-50",
-        children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Alert, {
-          message: "媒体设备错误",
-          description: `无法访问媒体设备: ${this.state.errorMessage}。请检查设备权限或连接。`,
-          type: "error",
-          showIcon: true,
-          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon, {})
-        }), /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, {
-          type: "primary",
-          className: "mt-4",
-          onClick: () => this.setState({
-            hasError: false,
-            errorMessage: ""
-          }),
-          children: "重试"
-        })]
-      });
-    }
-    return this.props.children;
-  }
-}
-const MediaSettings = () => {
-  const {
-    callCurrentUser,
-    toggleVideo,
-    rtc,
-    getter
-  } = useCallStore();
-  const [isModalVisible, setIsModalVisible] = reactExports.useState(false);
-  const [mirrorEnabled, setMirrorEnabled] = reactExports.useState(true);
-  const [cameraDevices, setCameraDevices] = reactExports.useState([]);
-  const [microphoneDevices, setMicrophoneDevices] = reactExports.useState([]);
-  const [selectedCamera, setSelectedCamera] = reactExports.useState("");
-  const [selectedMicrophone, setSelectedMicrophone] = reactExports.useState("");
-  const [beautySettings, setBeautySettings] = reactExports.useState({
-    enabled: false,
-    whiteIntensity: 0.5,
-    smoothIntensity: 0.5,
-    sharpenIntensity: 0.5
-  });
-  const [beautyExtension, setBeautyExtension] = reactExports.useState(null);
-  const [beautyCompatible, setBeautyCompatible] = reactExports.useState(false);
-  console.log("beautyCompatible", beautyCompatible);
-  const [beautyInitialized, setBeautyInitialized] = reactExports.useState(false);
-  const getDevices = reactExports.useCallback(async () => {
-    try {
-      if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
-        console.error("浏览器不支持获取媒体设备列表");
-        staticMethods.error("您的浏览器不支持媒体设备选择功能");
-        return;
-      }
-      await navigator.mediaDevices.getUserMedia({
-        audio: true,
-        video: true
-      }).catch((err2) => console.error("获取媒体权限失败:", err2));
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      const cameras = devices.filter((device) => device.kind === "videoinput").map((device) => ({
-        id: device.deviceId,
-        label: device.label || `摄像头 ${device.deviceId.slice(0, 5)}...`
-      }));
-      const microphones = devices.filter((device) => device.kind === "audioinput").map((device) => ({
-        id: device.deviceId,
-        label: device.label || `麦克风 ${device.deviceId.slice(0, 5)}...`
-      }));
-      if (cameras.length > 0) {
-        setCameraDevices(cameras);
-        setSelectedCamera((prevCamera) => {
-          return cameras.find((cam) => cam.id === prevCamera) ? prevCamera : cameras[0].id;
-        });
-      }
-      if (microphones.length > 0) {
-        setMicrophoneDevices(microphones);
-        setSelectedMicrophone((prevMic) => {
-          return microphones.find((mic) => mic.id === prevMic) ? prevMic : microphones[0].id;
-        });
-      }
-    } catch (error2) {
-      console.error("获取设备列表失败:", error2);
-      staticMethods.error("获取媒体设备失败，请检查设备权限");
-      setCameraDevices([{
-        id: "default",
-        label: "默认摄像头"
-      }]);
-      setMicrophoneDevices([{
-        id: "default",
-        label: "默认麦克风"
-      }]);
-    }
-  }, []);
-  reactExports.useEffect(() => {
-    if (isModalVisible) {
-      getDevices();
-    }
-    if (navigator.mediaDevices) {
-      navigator.mediaDevices.addEventListener("devicechange", getDevices);
-      return () => {
-        navigator.mediaDevices.removeEventListener("devicechange", getDevices);
-      };
-    }
-  }, [getDevices, isModalVisible]);
-  reactExports.useEffect(() => {
-    if (isModalVisible && !beautyInitialized) {
-      initializeBeautyExtension();
-    }
-  }, [isModalVisible, beautyInitialized]);
-  const initializeBeautyExtension = reactExports.useCallback(async () => {
-    try {
-      const rtcInstance = getter().rtc;
-      if (rtcInstance && rtcInstance.beautyExtension) {
-        const extension = rtcInstance.beautyExtension;
-        const compatibilityResult = await extension.checkCompatibility();
-        console.log("浏览器兼容性检查结果:", compatibilityResult);
-        if (compatibilityResult.isCompatible) {
-          setBeautyExtension(extension);
-          setBeautyCompatible(true);
-          setBeautyInitialized(true);
-          console.log("美颜扩展初始化成功");
-        } else {
-          console.warn("浏览器不支持美颜功能:", compatibilityResult.message || "兼容性检查失败");
-          setBeautyCompatible(false);
-          staticMethods.warning("您的浏览器不支持美颜功能，请使用 Chrome 78+ 或其他兼容浏览器");
-        }
-      } else {
-        console.warn("RTC客户端或美颜扩展未初始化");
-        setBeautyCompatible(false);
-        staticMethods.warning("RTC客户端未初始化，无法使用美颜功能");
-      }
-    } catch (error2) {
-      console.error("美颜扩展初始化失败:", error2);
-      setBeautyCompatible(false);
-      staticMethods.error("美颜功能初始化失败");
-    }
-  }, [rtc]);
-  const handleBeautyToggle = reactExports.useCallback((enabled) => {
-    if (!beautyExtension || !beautyCompatible) {
-      staticMethods.warning("美颜功能不可用");
-      return;
-    }
-    try {
-      if (enabled) {
-        beautyExtension.enableBeauty();
-        console.log("美颜已开启");
-      } else {
-        beautyExtension.disableBeauty();
-        console.log("美颜已关闭");
-      }
-      setBeautySettings((prev2) => ({
-        ...prev2,
-        enabled
-      }));
-    } catch (error2) {
-      console.error("美颜开关操作失败:", error2);
-      staticMethods.error("美颜开关操作失败");
-    }
-  }, [beautyExtension, beautyCompatible]);
-  const handleBeautyIntensityChange = reactExports.useCallback(
-    debounce$6((type4, value) => {
-      if (!beautyExtension || !beautyCompatible) {
-        return;
-      }
-      try {
-        let mode;
-        let settingKey;
-        switch (type4) {
-          case "white":
-            mode = EffectBeautyMode.EFFECT_WHITE_MODE;
-            settingKey = "whiteIntensity";
-            break;
-          case "smooth":
-            mode = EffectBeautyMode.EFFECT_SMOOTH_MODE;
-            settingKey = "smoothIntensity";
-            break;
-          case "sharpen":
-            mode = EffectBeautyMode.EFFECT_SHARPEN_MODE;
-            settingKey = "sharpenIntensity";
-            break;
-          default:
-            return;
-        }
-        beautyExtension.setBeautyIntensity(mode, value);
-        setBeautySettings((prev2) => ({
-          ...prev2,
-          [settingKey]: value
-        }));
-        console.log(`${type4} 强度已设置为:`, value);
-      } catch (error2) {
-        console.error("美颜强度设置失败:", error2);
-        staticMethods.error("美颜强度设置失败");
-      }
-    }, 300),
-    // 300ms 防抖延迟
-    [beautyExtension, beautyCompatible]
-  );
-  reactExports.useEffect(() => {
-    const savedBeautySettings = localStorage.getItem("beautySettings");
-    if (savedBeautySettings) {
-      try {
-        const parsed = JSON.parse(savedBeautySettings);
-        setBeautySettings(parsed);
-      } catch (error2) {
-        console.error("加载美颜设置失败:", error2);
-      }
-    }
-  }, []);
-  reactExports.useEffect(() => {
-    localStorage.setItem("beautySettings", JSON.stringify(beautySettings));
-  }, [beautySettings]);
-  const handleCameraChange = reactExports.useCallback(async (newCameraId) => {
-    setSelectedCamera(newCameraId);
-    try {
-      const rtcInstance = getter().rtc;
-      if (rtcInstance && rtcInstance.setMediaDevices) {
-        const result = await rtcInstance.setMediaDevices({
-          cameraId: newCameraId,
-          mirrorEnabled
-        });
-        if (result.success) {
-          console.log("摄像头设备已切换:", newCameraId);
-        } else {
-          console.error("摄像头切换失败:", result.message);
-          staticMethods.error("摄像头切换失败");
-        }
-      }
-    } catch (error2) {
-      console.error("摄像头配置失败:", error2);
-      staticMethods.error("摄像头配置失败");
-    }
-  }, [rtc, mirrorEnabled]);
-  const handleMicrophoneChange = reactExports.useCallback(async (newMicrophoneId) => {
-    setSelectedMicrophone(newMicrophoneId);
-    try {
-      const rtcInstance = getter().rtc;
-      if (rtcInstance && rtcInstance.setMediaDevices) {
-        const result = await rtcInstance.setMediaDevices({
-          microphoneId: newMicrophoneId
-        });
-        if (result.success) {
-          console.log("麦克风设备已切换:", newMicrophoneId);
-        } else {
-          console.error("麦克风切换失败:", result.message);
-          staticMethods.error("麦克风切换失败");
-        }
-      }
-    } catch (error2) {
-      console.error("麦克风配置失败:", error2);
-      staticMethods.error("麦克风配置失败");
-    }
-  }, [rtc]);
-  const handleMirrorChange = reactExports.useCallback(async (checked) => {
-    setMirrorEnabled(checked);
-    try {
-      const rtcInstance = getter().rtc;
-      if (rtcInstance && rtcInstance.setMediaDevices) {
-        const result = await rtcInstance.setMediaDevices({
-          cameraId: selectedCamera,
-          mirrorEnabled: checked
-        });
-        if (result.success) {
-          console.log("镜像翻转已设置:", checked);
-        } else {
-          console.error("镜像翻转设置失败:", result.message);
-          staticMethods.error("镜像翻转设置失败");
-        }
-      }
-    } catch (error2) {
-      console.error("镜像翻转配置失败:", error2);
-      staticMethods.error("镜像翻转配置失败");
-    }
-  }, [rtc, selectedCamera]);
-  const closeMediaSettings = reactExports.useCallback(() => {
-    setIsModalVisible(false);
-  }, []);
-  const openMediaSettings = () => {
-    console.log("openMediaSettings");
-    setIsModalVisible(true);
-  };
-  const handleClose = reactExports.useCallback(() => {
-    closeMediaSettings();
-  }, [closeMediaSettings]);
-  reactExports.useEffect(() => {
-    console.log("useEffect openMediaSettings");
-    eventBus.on("openMediaSettings", openMediaSettings);
-    eventBus.on("closeMediaSettings", closeMediaSettings);
-    return () => {
-      eventBus.off("openMediaSettings", openMediaSettings);
-      eventBus.off("closeMediaSettings", closeMediaSettings);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, {
-    open: isModalVisible,
-    title: "媒体设置",
-    onCancel: handleClose,
-    width: 910,
-    footer: null,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-      className: "flex justify-between",
-      children: [/* @__PURE__ */ jsxRuntimeExports.jsx(MediaErrorBoundary, {
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-            className: "mb-6",
-            children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-              className: "flex items-center mb-2",
-              children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                className: "mr-2",
-                children: "摄像头："
-              }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-                className: "flex-1",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select$1, {
-                  className: "w-full",
-                  value: selectedCamera,
-                  onChange: handleCameraChange,
-                  options: reactExports.useMemo(() => cameraDevices.map((device) => ({
-                    value: device.id,
-                    label: device.label
-                  })), [cameraDevices])
-                })
-              })]
-            }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-              className: "flex items-center mb-2",
-              children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                className: "mr-2",
-                children: "麦克风："
-              }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-                className: "flex-1",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select$1, {
-                  className: "w-full",
-                  value: selectedMicrophone,
-                  onChange: handleMicrophoneChange,
-                  options: reactExports.useMemo(() => microphoneDevices.map((device) => ({
-                    value: device.id,
-                    label: device.label
-                  })), [microphoneDevices])
-                })
-              })]
-            }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-              className: "mt-8",
-              children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-                className: "flex items-center justify-between mb-2",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                  children: "音频监控"
-                })
-              }), /* @__PURE__ */ jsxRuntimeExports.jsx(MediaErrorBoundary, {
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(AudioVisualizer, {
-                  selectedMicrophone,
-                  isVisible: isModalVisible
-                })
-              })]
-            }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-              className: "mt-8",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                className: "flex items-center justify-between mb-2",
-                children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                  children: "镜像翻转"
-                }), /* @__PURE__ */ jsxRuntimeExports.jsx(Switch, {
-                  checked: mirrorEnabled,
-                  onChange: handleMirrorChange,
-                  size: "small"
-                })]
-              })
-            }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-              className: "mt-8 border-t pt-6",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                className: "mb-4",
-                children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", {
-                  className: "text-lg font-medium mb-4 flex items-center",
-                  children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                    className: "mr-2",
-                    children: "🎨"
-                  }), "美颜设置", !beautyCompatible && /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                    className: "ml-2 text-xs text-red-500 bg-red-50 px-2 py-1 rounded",
-                    children: "不支持"
-                  })]
-                }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                  className: "flex items-center justify-between mb-4",
-                  children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                    className: "text-sm",
-                    children: "启用美颜"
-                  }), /* @__PURE__ */ jsxRuntimeExports.jsx(Switch, {
-                    checked: beautySettings.enabled,
-                    onChange: handleBeautyToggle,
-                    disabled: !beautyCompatible,
-                    size: "small"
-                  })]
-                }), beautySettings.enabled && beautyCompatible && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                  className: "space-y-4",
-                  children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                      className: "flex items-center justify-between mb-2",
-                      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                        className: "text-sm",
-                        children: "美白强度"
-                      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
-                        className: "text-xs text-gray-500",
-                        children: [Math.round(beautySettings.whiteIntensity * 100), "%"]
-                      })]
-                    }), /* @__PURE__ */ jsxRuntimeExports.jsx(Slider2, {
-                      min: 0,
-                      max: 1,
-                      step: 0.1,
-                      value: beautySettings.whiteIntensity,
-                      onChange: (value) => handleBeautyIntensityChange("white", value),
-                      tooltip: {
-                        formatter: (value) => `${Math.round((value || 0) * 100)}%`
-                      }
-                    })]
-                  }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                      className: "flex items-center justify-between mb-2",
-                      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                        className: "text-sm",
-                        children: "磨皮强度"
-                      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
-                        className: "text-xs text-gray-500",
-                        children: [Math.round(beautySettings.smoothIntensity * 100), "%"]
-                      })]
-                    }), /* @__PURE__ */ jsxRuntimeExports.jsx(Slider2, {
-                      min: 0,
-                      max: 1,
-                      step: 0.1,
-                      value: beautySettings.smoothIntensity,
-                      onChange: (value) => handleBeautyIntensityChange("smooth", value),
-                      tooltip: {
-                        formatter: (value) => `${Math.round((value || 0) * 100)}%`
-                      }
-                    })]
-                  }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                      className: "flex items-center justify-between mb-2",
-                      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                        className: "text-sm",
-                        children: "锐化强度"
-                      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
-                        className: "text-xs text-gray-500",
-                        children: [Math.round(beautySettings.sharpenIntensity * 100), "%"]
-                      })]
-                    }), /* @__PURE__ */ jsxRuntimeExports.jsx(Slider2, {
-                      min: 0,
-                      max: 1,
-                      step: 0.1,
-                      value: beautySettings.sharpenIntensity,
-                      onChange: (value) => handleBeautyIntensityChange("sharpen", value),
-                      tooltip: {
-                        formatter: (value) => `${Math.round((value || 0) * 100)}%`
-                      }
-                    })]
-                  })]
-                }), !beautyCompatible && /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, {
-                  message: "美颜功能不可用",
-                  description: "您的浏览器不支持美颜功能，请使用 Chrome 78+ 或其他兼容浏览器",
-                  type: "warning",
-                  showIcon: true,
-                  icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon, {}),
-                  className: "mt-4"
-                })]
-              })
-            })]
-          })
-        })
-      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-        children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(MediaErrorBoundary, {
-            children: isModalVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(CallUserVideo, {
-              video_id: (callCurrentUser == null ? void 0 : callCurrentUser.rtc_userid) + "preview",
-              user: callCurrentUser,
-              className: " h-60",
-              selectable: false
-            })
-          })
-        }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-          className: "mt-4 flex items-center justify-center",
-          children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
-            className: "text-sm",
-            children: [(callCurrentUser == null ? void 0 : callCurrentUser.isVideoEnabled) ? "开启" : "关闭", "摄像头"]
-          }), /* @__PURE__ */ jsxRuntimeExports.jsx(Switch, {
-            checked: callCurrentUser == null ? void 0 : callCurrentUser.isVideoEnabled,
-            onChange: toggleVideo,
-            size: "small"
-          })]
-        })]
-      })]
-    })
-  });
-};
 const CallHome$1 = () => {
   const audioContextRef = reactExports.useRef(null);
   const audioDestinationRef = reactExports.useRef(null);
@@ -292827,9 +292830,6 @@ const CallHome$1 = () => {
   const [canvasSetting, setCanvasSetting] = reactExports.useState("horizontal");
   const rtmpRef = reactExports.useRef(null);
   const audioSourcesRef = reactExports.useRef([]);
-  reactExports.useEffect(() => {
-    document.title = "菲耀直播";
-  }, []);
   reactExports.useEffect(() => {
     const timer = setTimeout(() => {
       if (!(callConfig == null ? void 0 : callConfig.rtc_userid)) {
@@ -292877,7 +292877,7 @@ const CallHome$1 = () => {
           rule: "sub"
         }), /* @__PURE__ */ jsxRuntimeExports.jsx(RightSidebar, {
           canvasSetting
-        }), (callConfig == null ? void 0 : callConfig.isCall) && /* @__PURE__ */ jsxRuntimeExports.jsx(MediaSettings, {})]
+        })]
       })]
     }), (callCurrentUser == null ? void 0 : callCurrentUser.waiting_mode_state) === WaitingModeState.WAITING && /* @__PURE__ */ jsxRuntimeExports.jsx(LiveWaitingRoom, {
       hostName: callConfig.title
@@ -292906,7 +292906,6 @@ const {
 } = Typography;
 const WebLiveLogin = () => {
   const [form] = Form2.useForm();
-  new URLSearchParams(window.location.search);
   const {
     setStatus,
     setDeviceType
@@ -293230,9 +293229,6 @@ const WebLiveLogin = () => {
       handleLogin.cancel();
     };
   }, [handleLogin]);
-  reactExports.useEffect(() => {
-    document.title = "菲耀直播";
-  }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
     className: "web-live-login-container",
     children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
@@ -294897,6 +294893,7 @@ const MobileLive = reactExports.memo(({ className = "" }) => {
   const { setStatus } = useGuestStore((state) => ({
     setStatus: state.setStatus
   }));
+  useSdkStore((state) => state.callConfig.title);
   const [isBackCamera, setIsBackCamera] = reactExports.useState(false);
   const [showDeviceSettings, setShowDeviceSettings] = reactExports.useState(false);
   const [isDeviceSelected, setIsDeviceSelected] = reactExports.useState({
@@ -294986,9 +294983,6 @@ const MobileLive = reactExports.memo(({ className = "" }) => {
   reactExports.useEffect(() => {
     document.body.style.minWidth = "100vw";
   }, [callConfig]);
-  reactExports.useEffect(() => {
-    document.title = "菲耀直播";
-  }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-screen h-screen bg-black relative overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(RtcJoomRoom, { access: setupVideoPlayer }),
     (callCurrentUser == null ? void 0 : callCurrentUser.waiting_mode_state) !== WaitingModeState.WAITING && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-screen h-screen bg-black relative overflow-hidden", children: [
@@ -296185,13 +296179,13 @@ const CanvasUploadVideo = ({
       children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Dragger$1, {
         ...props,
         children: videoUrl ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-          className: "relative  aspect-video flex items-center justify-center videoUploadWrap",
+          className: "relative w-full aspect-video flex items-center justify-center videoUploadWrap",
           children: [/* @__PURE__ */ jsxRuntimeExports.jsx("video", {
             src: videoUrl,
             autoPlay: !isVideoAutoPlay,
-            className: " aspect-video"
+            className: "w-full"
           }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-            className: " h-full absolute top-0 left-0 text-#fff bg-#0009 items-center justify-center uploadContent flex-col",
+            className: "w-full h-full absolute top-0 left-0 text-#fff bg-#0009 items-center justify-center uploadContent flex-col",
             style: {
               display: "none"
             },
@@ -296211,10 +296205,10 @@ const CanvasUploadVideo = ({
                 className: "text-60px text-#6672fc"
               })
             }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-              className: "text-14px text-black/50",
+              className: `text-14px`,
               children: "将文件拖到此处，或点击上传"
             }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-              className: "text-12px text-black/50 mt-2 mb-10",
+              className: `text-12px mt-2 mb-10`,
               children: "支持mp4格式文件，大小不超过5GB"
             })]
           })
@@ -296335,7 +296329,7 @@ const CanvasUploadAudio = ({
             className: "mt-2",
             children: fileData.current.name
           }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-            className: " h-full absolute top-0 left-0 text-#fff bg-#0009 items-center justify-center uploadContent flex-col",
+            className: "w-full h-full absolute top-0 left-0 text-#fff bg-#0009 items-center justify-center uploadContent flex-col",
             style: {
               display: "none"
             },
@@ -296355,10 +296349,10 @@ const CanvasUploadAudio = ({
                 className: "text-60px text-#6672fc"
               })
             }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-              className: "text-14px text-black/50",
+              className: `text-14px ${theme.useToken().token.colorTextTertiary}`,
               children: "将文件拖到此处，或点击上传"
             }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-              className: "text-12px text-black/50 mt-2 mb-10",
+              className: `text-12px mt-2 mb-10 ${theme.useToken().token.colorTextTertiary}`,
               children: "支持mp3格式文件，大小不超过5GB"
             })]
           })
@@ -304390,7 +304384,8 @@ const MetaItem = ({
   const isMutedRef = reactExports.useRef(true);
   const [isMuted, setIsMuted] = reactExports.useState(true);
   const [isLoop, setIsLoop] = reactExports.useState(false);
-  const [selectedValue, setSelectedValue] = reactExports.useState("");
+  const fenge = '-":}{_+';
+  const [selectedValue, setSelectedValue] = reactExports.useState(item.objectType === "videoSlot" && item.userId && item.streamIndex ? `${item.userId}${fenge}${item.streamIndex}` : "");
   const [currentTime, setCurrentTime] = reactExports.useState(0);
   const [isPlay, setIsPlay] = reactExports.useState(false);
   const [duration, setDuration] = reactExports.useState(0);
@@ -304579,7 +304574,6 @@ const MetaItem = ({
   const {
     token: token2
   } = useToken2();
-  const fenge = '-":}{_+';
   const contentStyle = {
     backgroundColor: token2.colorBgElevated,
     borderRadius: token2.borderRadiusLG,
@@ -304634,6 +304628,9 @@ const MetaItem = ({
     }
   }, [callConfig.isCall]);
   const targetUser = reactExports.useMemo(() => availableStreams.find((user) => user.rtc_userid === (selectedValue == null ? void 0 : selectedValue.split(fenge)[0])), [selectedValue, availableStreams]);
+  console.log("selectedValue?.split(fenge)[0]", selectedValue == null ? void 0 : selectedValue.split(fenge)[0]);
+  console.log("availableStreams", availableStreams);
+  console.log("targetUser", targetUser);
   reactExports.useEffect(() => {
     var _a3;
     if (item.objectType !== "videoSlot" || !livePlayerRef.current)
@@ -304691,11 +304688,6 @@ const MetaItem = ({
       console.error("监听嘉宾视频状态变化时发生错误:", error2);
     }
   }, [targetUser, targetUser == null ? void 0 : targetUser.isVideoEnabled, item.userId, item.id, selectedValue]);
-  reactExports.useEffect(() => {
-    if (item.objectType === "videoSlot" && item.userId && item.streamIndex) {
-      setSelectedValue(`${item.userId}${fenge}${item.streamIndex}`);
-    }
-  }, [item.objectType, item.id]);
   reactExports.useEffect(() => {
     setItems(item);
   }, [item]);
@@ -305608,7 +305600,6 @@ const CallHome = () => {
     fabricInstance,
     updateCallConfig
   } = useCallStore();
-  console.log("重新渲染推流端");
   const pcRef = reactExports.useRef(null);
   const audioContextRef = reactExports.useRef(null);
   const audioDestinationRef = reactExports.useRef(null);
@@ -305620,7 +305611,6 @@ const CallHome = () => {
   const audioStreamRef = reactExports.useRef(/* @__PURE__ */ new Map());
   const audioSourcesRef = reactExports.useRef([]);
   reactExports.useEffect(() => {
-    document.title = "菲耀直播";
     updateCallConfig({
       rule: "main",
       live_id: Number(liveId || "")
@@ -305773,16 +305763,6 @@ const CallHome = () => {
       newBackgroundAudioStreams.set(streamId, audioStream);
       audioStreamRef.current = newBackgroundAudioStreams;
     });
-    return () => {
-      var _a3;
-      const rtmp = rtmpRef.current;
-      console.log("rtmp", rtmp);
-      if (rtmpRef.current) {
-        rtmpRef.current.stopPush();
-        (_a3 = rtmpRef.current) == null ? void 0 : _a3.destroy();
-        rtmpRef.current = null;
-      }
-    };
   }, []);
   reactExports.useEffect(() => {
     const handleBeforeUnload = (e3) => {
@@ -305835,26 +305815,54 @@ const CallHome = () => {
       return;
     (_a3 = livePlayerRef.current) == null ? void 0 : _a3.canvasRequestRenderAll();
   }, [isSelectedId, isHoveredId]);
-  const sizeEl = useSdkStore((state) => state.callConfig.el);
+  const {
+    sizeEl,
+    styleConfig
+  } = useSdkStore((state) => ({
+    sizeEl: state.callConfig.el,
+    styleConfig: state.styleConfig
+  }));
   const wapRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
-    console.log("[livePlayer.设置视频容器高度]", sizeEl);
     if (!wapRef.current)
       return;
-    let el2;
+    let el2 = null;
     if (typeof sizeEl === "string") {
       el2 = document.getElementById(sizeEl);
-    } else {
+      if (!el2) {
+        console.warn(`[ResizeObserver] 找不到 ID 为 "${sizeEl}" 的元素，`);
+      }
+    } else if (sizeEl instanceof HTMLElement) {
       el2 = sizeEl;
+    } else {
+      console.warn("[ResizeObserver] sizeEl 无效，");
     }
-    if (!el2)
+    if (!el2) {
+      console.error("[ResizeObserver] 无法获取要观察的元素");
       return;
+    }
+    console.log("[ResizeObserver] 开始观察元素:", el2);
+    const updateHeight = () => {
+      if (wapRef.current) {
+        const newHeight = el2.clientHeight - 60;
+        wapRef.current.style.height = newHeight + "px";
+        wapRef.current.style.minHeight = "770px";
+        console.log("[ResizeObserver] 更新高度:", newHeight);
+      }
+    };
     const resizeObserver2 = new ResizeObserver(() => {
-      wapRef.current.style.height = (el2 == null ? void 0 : el2.clientHeight) - 60 + "px";
+      updateHeight();
     });
     resizeObserver2.observe(el2);
+    const handleWindowResize = () => {
+      updateHeight();
+    };
+    window.addEventListener("resize", handleWindowResize);
+    updateHeight();
     return () => {
+      console.log("[ResizeObserver] 停止观察元素:", el2);
       resizeObserver2.disconnect();
+      window.removeEventListener("resize", handleWindowResize);
     };
   }, [sizeEl]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ConfigProvider$1, {
@@ -305869,7 +305877,7 @@ const CallHome = () => {
       }
     },
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx(RtcJoomRoom, {}), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-      className: "h-full bg-#0e131c min-w-[1500px] min-h-[770px] overflow-auto",
+      className: `h-full bg-#0e131c min-w-[${styleConfig.minWidth}] min-h-[${styleConfig.minHeight}] overflow-auto`,
       children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Head$1, {
         canvasSetting,
         setCanvasSetting,
@@ -305880,7 +305888,7 @@ const CallHome = () => {
         audioDestinationRef
       }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
         ref: wapRef,
-        className: "h-[calc(100vh-60px)] relative flex mt-1 gap-1 ",
+        className: "h-[calc(100%-60px)] relative flex mt-1 gap-1 ",
         children: [/* @__PURE__ */ jsxRuntimeExports.jsx(LeftSidebar, {
           onSceneClick: handleSceneClick,
           currentScene,
@@ -306050,6 +306058,7 @@ const validateParam = (config2, paramName, message2) => {
 };
 class CallLiveSdk {
   constructor(config2) {
+    var _a2;
     this.root = null;
     console.log("<<config>>", config2, useSdkStore.getState());
     if (!config2) {
@@ -306077,7 +306086,7 @@ class CallLiveSdk {
     useSdkStore.setState({
       callConfig: this.config
     });
-    saveSign(this.config.sign);
+    saveSign((_a2 = this.config) == null ? void 0 : _a2.sign);
     if (config2.apiDomain) {
       setApiDomain(config2.apiDomain);
     }
@@ -306089,7 +306098,7 @@ class CallLiveSdk {
     console.log(this.config);
     const {
       el: el2
-    } = this.config;
+    } = this.config || {};
     const container = typeof el2 === "string" ? document.querySelector(el2) : el2;
     if (!container) {
       throw new Error(`Container element not found: ${el2}`);
@@ -306101,6 +306110,7 @@ class CallLiveSdk {
    * 渲染SDK内容
    */
   render() {
+    var _a2;
     if (!this.root) {
       throw new Error("SDK not initialized");
     }
@@ -306109,7 +306119,7 @@ class CallLiveSdk {
         height: "100%"
       },
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalErrorBoundary, {
-        errorNotification: this.config.errorNotification,
+        errorNotification: (_a2 = this.config) == null ? void 0 : _a2.errorNotification,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(WebLiveIndex, {})
       })
     }));
@@ -306197,6 +306207,7 @@ class CallLiveSdk {
 }
 class GuestCallSdk {
   constructor(config2) {
+    var _a2;
     this.root = null;
     if (!config2) {
       window.dispatchEvent(new CustomEvent("paramValidationError", {
@@ -306223,7 +306234,7 @@ class GuestCallSdk {
     useSdkStore.setState({
       guestConfig: this.config
     });
-    saveSign(this.config.sign);
+    saveSign((_a2 = this.config) == null ? void 0 : _a2.sign);
     if (config2.apiDomain) {
       setApiDomain(config2.apiDomain);
     }
@@ -306234,7 +306245,7 @@ class GuestCallSdk {
   init() {
     const {
       el: el2
-    } = this.config;
+    } = this.config || {};
     const container = typeof el2 === "string" ? document.querySelector(el2) : el2;
     if (!container) {
       throw new Error(`Container element not found: ${el2}`);
@@ -306246,6 +306257,7 @@ class GuestCallSdk {
    * 渲染SDK内容
    */
   render() {
+    var _a2;
     if (!this.root) {
       throw new Error("SDK not initialized");
     }
@@ -306255,7 +306267,7 @@ class GuestCallSdk {
       },
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(App$1, {
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalErrorBoundary, {
-          errorNotification: this.config.errorNotification,
+          errorNotification: (_a2 = this.config) == null ? void 0 : _a2.errorNotification,
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(Guest, {})
         })
       })