call-live-sdk1 0.0.3 → 0.0.4

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

@@ -25612,23 +25612,23 @@ 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: {
@@ -82401,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";
@@ -83265,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);
@@ -83548,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 = {
@@ -83754,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) => {
@@ -85385,9 +85380,9 @@ function useLiveInfo() {
       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();
@@ -85584,6 +85579,7 @@ const Head = ({
   const {
     livePushCode
   } = useLivePushCodeStore();
+  const title = useSdkStore((state) => state.callConfig.title);
   const {
     data: liveInfoData,
     run: runLiveInfo
@@ -86044,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", {
@@ -86059,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", {
@@ -196121,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"
       },
@@ -196315,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) {
@@ -196334,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);
@@ -268928,6 +268924,7 @@ const LivePlayer = ({
       console.log("loadCanvasState", newObj);
       setFabricObjects(newObj);
     },
+    getRtmpRef: () => rtmpRef,
     getActiveVideoStreams: () => activeVideoStreamsRef.current,
     getMicrophoneStreams: () => microphoneStreamsRef.current,
     getBackgroundAudioStreams: () => backgroundAudioStreamsRef.current,
@@ -269172,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",
@@ -280242,7 +280239,6 @@ const MediaSettings = () => {
   });
   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 {
@@ -292343,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);
       }
@@ -292831,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)) {
@@ -292910,7 +292906,6 @@ const {
 } = Typography;
 const WebLiveLogin = () => {
   const [form] = Form2.useForm();
-  new URLSearchParams(window.location.search);
   const {
     setStatus,
     setDeviceType
@@ -293234,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", {
@@ -294901,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({
@@ -294990,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: [
@@ -296215,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"
             })]
           })
@@ -296359,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"
             })]
           })
@@ -304394,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);
@@ -304583,7 +304574,6 @@ const MetaItem = ({
   const {
     token: token2
   } = useToken2();
-  const fenge = '-":}{_+';
   const contentStyle = {
     backgroundColor: token2.colorBgElevated,
     borderRadius: token2.borderRadiusLG,
@@ -304638,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)
@@ -304695,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]);
@@ -305623,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 || "")
@@ -306071,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) {
@@ -306098,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);
     }
@@ -306110,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}`);
@@ -306122,6 +306110,7 @@ class CallLiveSdk {
    * 渲染SDK内容
    */
   render() {
+    var _a2;
     if (!this.root) {
       throw new Error("SDK not initialized");
     }
@@ -306130,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, {})
       })
     }));
@@ -306218,6 +306207,7 @@ class CallLiveSdk {
 }
 class GuestCallSdk {
   constructor(config2) {
+    var _a2;
     this.root = null;
     if (!config2) {
       window.dispatchEvent(new CustomEvent("paramValidationError", {
@@ -306244,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);
     }
@@ -306255,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}`);
@@ -306267,6 +306257,7 @@ class GuestCallSdk {
    * 渲染SDK内容
    */
   render() {
+    var _a2;
     if (!this.root) {
       throw new Error("SDK not initialized");
     }
@@ -306276,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, {})
         })
       })