yjz-web-sdk 1.0.8-beta.11 → 1.0.8-beta.13

package/lib/core/WebRTCSdk.d.ts

@@ -1,8 +1,8 @@
 import { EventEmitter } from 'eventemitter3';
 import { SignalingClient } from './signal/SignalingClient';
 import { WebRTCClient } from './rtc/WebRTCClient';
-import { WebRTCConfig } from './rtc/WebRTCConfig';
 import type { WebRTCConfigOptions } from './rtc/WebRTCConfig';
+import { WebRTCConfig } from './rtc/WebRTCConfig';
 import { ConnectorType } from './data/MessageType';
 import { ChannelDataType } from './data/WebrtcDataType';
 export declare class WebRTCSdk extends EventEmitter {

package/lib/core/rtc/WebRTCClient.d.ts

@@ -25,13 +25,13 @@ export declare class WebRTCClient extends EventEmitter {
     private fileImage?;
     private ua;
     constructor(config: WebRTCConfig);
-    startPush(): Promise<void>;
+    startPush(useBackCamera?: boolean): Promise<void>;
     handleOffer(offerSdp: string): void;
     handleAnswer(answerSdp: string): void;
     handleIceCandidate(candidate: RTCIceCandidateInit): void;
     sendChannelData(type: ChannelDataType, data: any): void;
     closeConnection(): void;
-    readyCapture(): Promise<void>;
+    readyCapture(useBackCamera: boolean): Promise<void>;
     private getRotatedStream;
     private setVideoParams;
     stopPush(): void;

package/lib/core/rtc/WebRTCConfig.d.ts

@@ -1,4 +1,5 @@
 import { ConnectorType } from '../data/MessageType';
+import { LogLevel } from "../util/Logger.ts";
 export interface WebRTCConfigOptions {
     signalServerUrl: string;
     myId?: string;
@@ -30,6 +31,8 @@ export interface WebRTCConfigOptions {
     connectorAndRoomId?: Map<string, string>;
     groupId?: string;
     cacheTimeout?: number;
+    enableLogger?: boolean;
+    loggerLevel?: LogLevel;
 }
 export declare class WebRTCConfig {
     signalServerUrl: string;

package/lib/core/util/Logger.d.ts

@@ -0,0 +1,20 @@
+export declare enum LogLevel {
+    DEBUG = 10,
+    INFO = 20,
+    WARN = 30,
+    ERROR = 40,
+    OFF = 100
+}
+export declare function setLogLevel(level: LogLevel): void;
+export declare function enableLog(enable: boolean): void;
+export declare function setNamespace(ns: string): void;
+declare class LoggerCore {
+    private canLog;
+    private log;
+    debug(...args: any[]): void;
+    info(...args: any[]): void;
+    warn(...args: any[]): void;
+    error(...args: any[]): void;
+}
+export declare const Logger: LoggerCore;
+export {};

package/lib/yjz-web-sdk.js

@@ -359,6 +359,83 @@ var EmitType = /* @__PURE__ */ ((EmitType2) => {
   EmitType2["groupError"] = "groupError";
   return EmitType2;
 })(EmitType || {});
+var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
+  LogLevel2[LogLevel2["DEBUG"] = 10] = "DEBUG";
+  LogLevel2[LogLevel2["INFO"] = 20] = "INFO";
+  LogLevel2[LogLevel2["WARN"] = 30] = "WARN";
+  LogLevel2[LogLevel2["ERROR"] = 40] = "ERROR";
+  LogLevel2[LogLevel2["OFF"] = 100] = "OFF";
+  return LogLevel2;
+})(LogLevel || {});
+let globalLogLevel = 10;
+let globalEnable = true;
+let globalNamespace = "SDK";
+function setLogLevel(level) {
+  globalLogLevel = level;
+}
+function enableLog(enable) {
+  globalEnable = enable;
+}
+const levelStyle = {
+  [
+    10
+    /* DEBUG */
+  ]: "color: #999",
+  [
+    20
+    /* INFO */
+  ]: "color: #2b90d9",
+  [
+    30
+    /* WARN */
+  ]: "color: #e6a23c",
+  [
+    40
+    /* ERROR */
+  ]: "color: #f56c6c",
+  [
+    100
+    /* OFF */
+  ]: "color: inherit"
+};
+class LoggerCore {
+  canLog(level) {
+    return globalEnable && level >= globalLogLevel;
+  }
+  log(level, ...args) {
+    if (!this.canLog(level)) return;
+    const levelName = LogLevel[level];
+    const prefix = `%c[${globalNamespace}] [${levelName}]`;
+    const style = levelStyle[level];
+    switch (level) {
+      case 10:
+        console.log(prefix, style, ...args);
+        break;
+      case 20:
+        console.info(prefix, style, ...args);
+        break;
+      case 30:
+        console.warn(prefix, style, ...args);
+        break;
+      case 40:
+        console.error(prefix, style, ...args);
+        break;
+    }
+  }
+  debug(...args) {
+    this.log(10, ...args);
+  }
+  info(...args) {
+    this.log(20, ...args);
+  }
+  warn(...args) {
+    this.log(30, ...args);
+  }
+  error(...args) {
+    this.log(40, ...args);
+  }
+}
+const Logger = new LoggerCore();
 class SignalingClient extends EventEmitter {
   constructor(config) {
     super();
@@ -388,6 +465,7 @@ class SignalingClient extends EventEmitter {
       this.webSocket = null;
     };
     this.webSocket.onerror = (event) => {
+      Logger.error("错误日志：", `信令服务器连接失败或者已断开=======>${this.config.signalServerUrl}`);
       this.emit(EmitType.webrtcError, createWebRtcError(FailCode.SOCKET, event));
     };
     this.webSocket.onmessage = (event) => {
@@ -402,6 +480,7 @@ class SignalingClient extends EventEmitter {
     this.clearTime();
     if (this.timeout === null) {
       this.timeout = setTimeout(() => {
+        Logger.error("错误日志：", `远端云机未响应=======>${this.config.roomId}`);
         this.emit(EmitType.webrtcError, createWebRtcError(FailCode.STATE_ERR, ""));
         this.timeout = null;
       }, 6e3);
@@ -452,6 +531,7 @@ class SignalingClient extends EventEmitter {
       connectorType: this.config.connectorType
     };
     const jsonMessage = JSON.stringify(message);
+    Logger.debug("调试日志：", `屏控登录信息====>${jsonMessage}`);
     this.sendMessage(jsonMessage);
   }
   sendSwitchControlMessage(roomId, connectorType) {
@@ -463,7 +543,7 @@ class SignalingClient extends EventEmitter {
       targetId: this.config.myId
     };
     const jsonMessage = JSON.stringify(message);
-    console.log(`===> sendSwitchControlMessage: ${jsonMessage}`);
+    Logger.debug("调试日志：", `切换主控信令消息====>${jsonMessage}`);
     this.sendMessage(jsonMessage);
   }
   sendSwitchControlToMainMessage(roomId) {
@@ -474,6 +554,7 @@ class SignalingClient extends EventEmitter {
       roomId
     };
     const jsonMessage = JSON.stringify(message);
+    Logger.debug("调试日志：", `切换主控信令消息====>${jsonMessage}`);
     this.sendMessage(jsonMessage);
   }
   sendGroupAcceptControl(roomIds, acceptControl) {
@@ -485,6 +566,7 @@ class SignalingClient extends EventEmitter {
       isAccept: acceptControl
     };
     const jsonMessage = JSON.stringify(message);
+    Logger.debug("调试日志：", `修改控制状态====>${jsonMessage}`);
     this.sendMessage(jsonMessage);
   }
   sendGroupAction(action) {
@@ -499,6 +581,7 @@ class SignalingClient extends EventEmitter {
       traceId: tid
     };
     const jsonMessage = JSON.stringify(message);
+    Logger.debug("调试日志：", `发送群控事件====>${jsonMessage}`);
     this.sendMessage(jsonMessage);
   }
   sendGroupSignInMessage() {
@@ -513,8 +596,8 @@ class SignalingClient extends EventEmitter {
       groupId: "group_0001",
       token: this.config.token
     };
-    console.log("sendGroupSignInMessage==>", message);
     const jsonMessage = JSON.stringify(message);
+    Logger.debug("调试日志：", `群控登录信息====>${jsonMessage}`);
     this.sendMessage(jsonMessage);
   }
 }
@@ -3165,20 +3248,29 @@ class WebRTCConfig {
   }
 }
 const setRemoteDescriptionWithHandleOffer = (peerConnection, sdp2, sendAnswer, onError) => {
+  Logger.info("信息日志：", "设置远程offer Description=======>");
   const description = new RTCSessionDescription({ type: "offer", sdp: sdp2 });
   peerConnection.setRemoteDescription(description).then(() => createAnswer(peerConnection, sendAnswer, onError)).catch((error) => onError == null ? void 0 : onError(createWebRtcError(FailCode.HANDLE_OFFER, error)));
 };
 const createAnswer = (peerConnection, sendAnswer, onError) => {
+  Logger.info("信息日志：", "创建webrtcAnswer=======>");
   peerConnection.createAnswer().then((answer) => setLocalDescriptionWithCreateAnswer(peerConnection, answer, sendAnswer, onError)).catch((error) => onError == null ? void 0 : onError(createWebRtcError(FailCode.CREATE_ANSWER, error)));
 };
 const setLocalDescriptionWithCreateAnswer = (peerConnection, answer, sendAnswer, onError) => {
-  peerConnection.setLocalDescription(answer).then(() => {
-    sendAnswer == null ? void 0 : sendAnswer(answer.sdp ?? "");
+  var _a;
+  Logger.info("信息日志：", "设置本地answer Description=======>");
+  let sdp2 = (_a = answer.sdp) == null ? void 0 : _a.replace(
+    /a=rtpmap:\d+ opus\/48000\/2\r\n/g,
+    "$&a=ptime:0\r\na=maxptime:10\r\n"
+  );
+  peerConnection.setLocalDescription({ type: answer.type, sdp: sdp2 }).then(() => {
+    sendAnswer == null ? void 0 : sendAnswer(sdp2 ?? "");
   }).catch((error) => {
     onError == null ? void 0 : onError(createWebRtcError(FailCode.LOCAL_DES, error));
   });
 };
 const createPeerConnection = (config) => {
+  Logger.info("信息日志：", "初始化 Webrtc PeerConnection=======>");
   const iceServers = [
     { urls: config.stunServerUri },
     {
@@ -3189,7 +3281,7 @@ const createPeerConnection = (config) => {
   ];
   const peerConnectionConfig = {
     iceServers,
-    iceTransportPolicy: "relay",
+    iceTransportPolicy: "all",
     bundlePolicy: "max-bundle"
   };
   return new RTCPeerConnection(peerConnectionConfig);
@@ -3204,6 +3296,7 @@ const configPeerConnection = (peerConnection, onICEMessage, onTrack, onConnectSt
       sdpMid: event.candidate.sdpMid,
       sdpMLineIndex: event.candidate.sdpMLineIndex
     };
+    Logger.debug("信息日志：", `webrtc 生成的icecandidate===>${JSON.stringify(candidateObj)}`);
     onICEMessage(JSON.stringify(candidateObj));
   };
   peerConnection.onconnectionstatechange = () => {
@@ -3211,12 +3304,14 @@ const configPeerConnection = (peerConnection, onICEMessage, onTrack, onConnectSt
     if (!state) {
       return;
     }
+    Logger.debug("信息日志：", `webrtc p2p连接状态===>`, state);
     if (state === "failed" || state === "disconnected" || state === "closed") {
       onError == null ? void 0 : onError(createWebRtcError(FailCode.ICE_STATE, "failed"));
     }
     onConnectState == null ? void 0 : onConnectState(state);
   };
   peerConnection.ontrack = (event) => {
+    Logger.debug("信息日志：", "webrtc p2p连接后获取的音视频track");
     const track = event.track;
     track.contentHint = "motion";
     onTrack == null ? void 0 : onTrack(track);
@@ -3235,14 +3330,21 @@ const createOffer = async (peerConnection, sendOfferMessage) => {
   }
 };
 const setLocalDescriptionWithCreateOffer = async (peerConnection, offer, sendOfferMessage) => {
+  var _a;
+  Logger.info("信息日志：", "设置本地offer Description=======>");
   try {
-    await peerConnection.setLocalDescription(offer);
-    sendOfferMessage(offer.sdp ?? "");
+    const sdp2 = (_a = offer.sdp) == null ? void 0 : _a.replace(
+      /a=rtpmap:\d+ opus\/48000\/2\r\n/g,
+      "$&a=ptime:0\r\na=maxptime:10\r\n"
+    );
+    await peerConnection.setLocalDescription({ type: offer.type, sdp: sdp2 });
+    sendOfferMessage(sdp2 ?? "");
   } catch (err) {
     throw new Error("摄像头视频流添加失败");
   }
 };
 const addIceCandidate = (peerConnection, candidate, onError) => {
+  Logger.info("信息日志：", "接收远程ice 并设置=======>");
   peerConnection.addIceCandidate(candidate).catch((err) => onError == null ? void 0 : onError(createWebRtcError(FailCode.HANDLE_ICE, err)));
 };
 var ChannelDataType = /* @__PURE__ */ ((ChannelDataType2) => {
@@ -3522,14 +3624,14 @@ class WebRTCClient extends EventEmitter {
     this.config = config;
     this.ua = navigator.userAgent;
   }
-  async startPush() {
+  async startPush(useBackCamera = true) {
     if (this.isPushingStream) return;
     if (this.isPushingLocalStream) {
       this.stopLocal();
     }
     try {
       this.isPushingStream = true;
-      await this.readyCapture();
+      await this.readyCapture(useBackCamera);
     } catch (err) {
       this.isPushingStream = false;
       let errorMessage;
@@ -3606,6 +3708,7 @@ class WebRTCClient extends EventEmitter {
     }
   }
   closeConnection() {
+    Logger.info("信息日志：", "关闭webrtc连接=======>");
     if (this.statsTimer) {
       clearInterval(this.statsTimer);
       this.statsTimer = void 0;
@@ -3649,11 +3752,17 @@ class WebRTCClient extends EventEmitter {
       this.peerConnection = null;
     }
   }
-  async readyCapture() {
+  async readyCapture(useBackCamera) {
     this.resetPeerConnection();
+    Logger.info("信息日志：", "启用摄像头推流到云机=======>", useBackCamera);
     try {
       this.localStream = await navigator.mediaDevices.getUserMedia({
-        video: { width: { ideal: 640 }, height: { ideal: 480 } },
+        video: {
+          width: { ideal: 720 },
+          height: { ideal: 540 },
+          facingMode: useBackCamera ? { ideal: "environment" } : { ideal: "user" },
+          frameRate: { ideal: 20, max: 30 }
+        },
         audio: true
       });
       const senders = [];
@@ -3664,11 +3773,12 @@ class WebRTCClient extends EventEmitter {
         const sender = this.peerConnection.addTrack(track, rotatedStream);
         senders.push(sender);
       });
-      senders.forEach((sender) => this.setVideoParams(sender));
       await createOffer(this.peerConnection, (sdp2) => {
         this.emit(EmitType.sendOffer, sdp2);
       });
+      senders.forEach((sender) => this.setVideoParams(sender));
     } catch (err) {
+      console.log("err===>", err);
       if (err instanceof DOMException) {
         switch (err.name) {
           case "NotAllowedError":
@@ -3701,11 +3811,11 @@ class WebRTCClient extends EventEmitter {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.save();
       ctx.translate(canvas.width / 2, canvas.height / 2);
-      ctx.rotate(Math.PI / 2);
+      ctx.rotate(-Math.PI / 2);
       ctx.drawImage(video, -width / 2, -height / 2, width, height);
       ctx.restore();
     };
-    const fps = 30;
+    const fps = 25;
     const frameInterval = 1e3 / fps;
     let lastTime = 0;
     let rafId;
@@ -3725,21 +3835,46 @@ class WebRTCClient extends EventEmitter {
     });
     return stream;
   }
+  // private async setVideoParams(sender: RTCRtpSender) {
+  //   Logger.info('信息日志：', '设置推流视频参数=======>')
+  //   const params = sender.getParameters();
+  //   params.degradationPreference = 'balanced';
+  //   const isMobile = /Android|iPhone|iPad/i.test(navigator.userAgent);
+  //   params.encodings.forEach(encoding => {
+  //     encoding.maxBitrate = isMobile ? 800000 : 1000000;
+  //     encoding.priority = 'high';
+  //     encoding.scaleResolutionDownBy = 1.0;
+  //   });
+  //   await sender.setParameters(params);
+  // }
   async setVideoParams(sender) {
     const params = sender.getParameters();
+    const isMobile = /Android|iPhone|iPad/i.test(navigator.userAgent);
+    const targetBitrate = isMobile ? 6e5 : 18e5;
+    const targetFramerate = 30;
     params.degradationPreference = "maintain-resolution";
+    if (!params.encodings || params.encodings.length === 0) {
+      params.encodings = [{}];
+    }
+    console.log("params.codecs===>", params.codecs);
     params.encodings.forEach((encoding) => {
-      encoding.maxBitrate = 1e6;
-      encoding.priority = "high";
+      encoding.maxBitrate = targetBitrate;
+      encoding.maxFramerate = targetFramerate;
       encoding.scaleResolutionDownBy = 1;
+      encoding.priority = "high";
     });
-    await sender.setParameters(params);
+    try {
+      await sender.setParameters(params);
+      Logger.info("信息日志：", `设置推流视频参数成功：${targetBitrate / 1e3}kbps / ${targetFramerate}fps`);
+    } catch (e) {
+      Logger.error("设置推流参数失败：", e);
+    }
   }
   stopPush() {
     var _a, _b, _c;
     if (!this.isPushingStream) return;
     this.isPushingStream = false;
-    console.log("dsanduashdsuad");
+    Logger.info("信息日志：", "停止推流到云机=======>");
     (_a = this.localStream) == null ? void 0 : _a.getTracks().forEach((track) => track.stop());
     this.localStream = null;
     (_b = this.rotatedStream) == null ? void 0 : _b.getTracks().forEach((track) => track.stop());
@@ -3780,10 +3915,11 @@ class WebRTCClient extends EventEmitter {
   handleDataChannelMessage(event) {
     const data = JSON.parse(event.data);
     if (data.type === ChannelDataType.ActionCommandEvent) {
-      const { action, value } = JSON.parse(data.data);
+      const { action, value, cameraId } = JSON.parse(data.data);
       if (action === "ACTION_CONTROL_VIDEO") {
+        console.log("cameraId===>", cameraId, cameraId !== 0);
         if (value === "ENABLE") {
-          this.startPush();
+          this.startPush(Number(cameraId) === 0);
         } else {
           this.stopPush();
           this.stopLocal();
@@ -3949,6 +4085,7 @@ class WebRTCClient extends EventEmitter {
     }
   }
   startCanvasStream(fps = 30) {
+    Logger.info("信息日志：", "初始化，使用本地文件推流到云机=======>");
     const canvas = this.getCanvas();
     const ctx = canvas.getContext("2d");
     const media = this.currentMedia;
@@ -4015,7 +4152,7 @@ class WebRTCClient extends EventEmitter {
       try {
         (_a2 = this.peerConnection) == null ? void 0 : _a2.removeTrack(sender);
       } catch (e) {
-        console.warn("removeTrack error:", e);
+        Logger.error("错误日志：", `移除音视频轨道失败=====>`, e);
       }
     });
     if (this.fileVideo) {
@@ -4072,12 +4209,12 @@ const testMultipleTurnServers = async (servers, timeoutMs = 600) => {
   }));
   const testPromises = turnServers.map(
     (cfg) => testTurnServer(cfg, timeoutMs).then((res) => res).catch((err) => {
-      console.warn(`Test failed for ${cfg.urls}:`, err);
+      Logger.warn("警告日志：", `中继计算超时=====>`, err);
       return { ...cfg, rtt: Infinity };
     })
   );
   const results = await Promise.all(testPromises);
-  console.log("results===>", results);
+  Logger.debug("调试日志：", `信令计算结果======>`, results);
   const available = results.filter((r) => r.rtt !== Infinity);
   if (available.length === 0) {
     throw new Error("All TURN servers are unreachable or slow (RTT = Infinity).");
@@ -4240,6 +4377,7 @@ class WebRTCSdk extends EventEmitter {
     __publicField(this, "handleSignaling", (message) => {
       var _a, _b, _c, _d, _e, _f, _g;
       if (!this.config) return;
+      Logger.debug("调试信息:", `信令消息=========>`, message);
       switch (message.type) {
         case MessageType.Peers:
           this.config.myId = message.myId;
@@ -4267,7 +4405,6 @@ class WebRTCSdk extends EventEmitter {
           }
           break;
         case MessageType.SignOut:
-          console.log("SignOutSignOutSignOutSignOutSignOutSignOutSignOutSignOut");
           if (message.myId === this.config.myId) {
             (_d = this.webRTCClient) == null ? void 0 : _d.closeConnection();
             (_e = this.signalingClient) == null ? void 0 : _e.close();
@@ -4395,6 +4532,14 @@ class WebRTCSdk extends EventEmitter {
     } else {
       this.cache = new MapCache("screenCache", 100);
     }
+    if (this.options.connectorType !== ConnectorType.LanForwarding) {
+      enableLog(!!this.options.enableLogger);
+      if (this.options.enableLogger !== void 0 && this.options.enableLogger) {
+        if (this.options.loggerLevel !== void 0) {
+          setLogLevel(this.options.loggerLevel);
+        }
+      }
+    }
     if (this.options.maxRecount) {
       this.MAX_COUNT = this.options.maxRecount;
     }
@@ -4451,6 +4596,7 @@ class WebRTCSdk extends EventEmitter {
   /** 开始连接 signal 服务 */
   startConnection() {
     this.prepareConnection().catch((err) => {
+      Logger.error("错误信息：", `sdk调试错误日志======>`, err);
       this.emit(EmitType.webrtcError, err);
     });
   }
@@ -4461,6 +4607,7 @@ class WebRTCSdk extends EventEmitter {
     try {
       if (areTurnListsEmpty(this.options)) {
         if (!this.options.turnServerUri) {
+          Logger.error("错误信息：", `sdk调试错误日志======> 暂无可用TURN服务器`);
           this.emit(EmitType.webrtcError, createWebRtcError(FailCode.OPTION_ERR, "暂无可用TURN服务器"));
           return;
         }
@@ -4489,6 +4636,7 @@ class WebRTCSdk extends EventEmitter {
     try {
       await this.prepareConnection();
     } catch (e) {
+      Logger.error("错误信息：", `sdk调试错误日志======>`, e);
       this.emit(EmitType.webrtcError, e);
     }
   }
@@ -4504,7 +4652,7 @@ class WebRTCSdk extends EventEmitter {
     (_b = this.webRTCClient) == null ? void 0 : _b.on(EmitType.sendAnswer, (sdp2) => this.sendAnswer(sdp2));
     (_c = this.webRTCClient) == null ? void 0 : _c.on(EmitType.sendICEMessage, (candidate) => this.sendICEMessage(candidate));
     (_d = this.webRTCClient) == null ? void 0 : _d.on(EmitType.streamTrack, (track) => {
-      console.log("=========> ON EmitType.streamTrack WebRTCSdk");
+      Logger.debug("调试信息:", "=========> EmitType.streamTrack callback");
       this.emit(EmitType.streamTrack, track);
     });
     (_e = this.webRTCClient) == null ? void 0 : _e.on(EmitType.iceConnectionState, (state) => {
@@ -4527,6 +4675,7 @@ class WebRTCSdk extends EventEmitter {
         this.emit(EmitType.reconnect);
         this.reconnect();
       } else {
+        Logger.error("错误信息：", `sdk调试错误日志======>`, err);
         this.emit(EmitType.webrtcError, err);
       }
     });
@@ -4542,6 +4691,7 @@ class WebRTCSdk extends EventEmitter {
       this.signalingClient = new SignalingClient(this.config);
       this.signalingClient.on(EmitType.signalMessage, (message) => this.handleSignaling(message));
       this.signalingClient.on(EmitType.webrtcError, (err) => {
+        Logger.error("错误信息：", `sdk 信令调试错误日志======>`, err);
         this.emit(EmitType.webrtcError, err);
       });
     }
@@ -4960,8 +5110,8 @@ function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle, emit) {
   const widthRadio = ref(0);
   const heightRadio = ref(0);
   const resizeObserver = ref(null);
-  const frameCallbackId = ref(0);
   const isRotated = computed(() => videoAngle.value % 180 !== 0);
+  const frameCallbackId = ref(0);
   const videoSize = computed(() => {
     let width = 0;
     let height = 0;
@@ -5000,10 +5150,15 @@ function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle, emit) {
       };
       screenStatus.value = true;
       emit("loadedSuccess");
+      const isMobile = /Android|iPhone|iPad/i.test(navigator.userAgent);
+      if (isMobile) {
+        startVideoFrameCallback(video);
+      }
     };
     video.addEventListener("loadedmetadata", handleMetadata);
     onBeforeUnmount(() => {
       video.removeEventListener("loadedmetadata", handleMetadata);
+      if (frameCallbackId.value) video.cancelVideoFrameCallback(frameCallbackId.value);
     });
   };
   const initVideoContainer = () => {
@@ -5021,8 +5176,15 @@ function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle, emit) {
     }
     const mediaStream = videoEl.srcObject;
     updateTrack(mediaStream, newTrack);
+    videoEl.playbackRate = 1;
     videoEl.playsInline = true;
+    videoEl.disablePictureInPicture = true;
+    videoEl.setAttribute("playsinline", "true");
     videoEl.setAttribute("webkit-playsinline", "true");
+    videoEl.setAttribute("x5-video-player-type", "h5");
+    videoEl.setAttribute("x5-video-player-fullscreen", "false");
+    videoEl.setAttribute("x5-video-orientation", "portraint");
+    videoEl.preload = "auto";
   };
   const updateTrack = (stream, newTrack) => {
     if (newTrack.kind === "video") {
@@ -5035,8 +5197,6 @@ function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle, emit) {
       if (!stream.getAudioTracks().some((t) => t.id === newTrack.id)) {
         stream.addTrack(newTrack);
       }
-    } else {
-      console.warn("不支持的 track 类型:", newTrack.kind);
     }
   };
   const stopPlay = () => {
@@ -5045,29 +5205,17 @@ function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle, emit) {
     if (video && video.srcObject) {
       video.srcObject.getTracks().forEach((track) => track.stop());
       video.srcObject = null;
-      video.cancelVideoFrameCallback(frameCallbackId.value);
+      if (frameCallbackId.value) video.cancelVideoFrameCallback(frameCallbackId.value);
     }
   };
   const handleVisibilityChange = () => {
-    if (document.visibilityState === "visible") {
-      const video = remoteVideoElement.value;
-      if (video && video.srcObject) {
-        video.srcObject.getTracks().forEach((track) => {
-          if (track.kind === "audio" && !track.enabled) {
-            track.enabled = true;
-          }
-        });
-      }
-    } else {
-      const video = remoteVideoElement.value;
-      if (video && video.srcObject) {
-        video.srcObject.getTracks().forEach((track) => {
-          if (track.kind === "audio" && track.enabled) {
-            track.enabled = false;
-          }
-        });
+    const video = remoteVideoElement.value;
+    if (!video || !video.srcObject) return;
+    video.srcObject.getTracks().forEach((track) => {
+      if (track.kind === "audio") {
+        track.enabled = document.visibilityState === "visible";
       }
-    }
+    });
   };
   onMounted(() => {
     document.addEventListener("visibilitychange", handleVisibilityChange);
@@ -5079,6 +5227,16 @@ function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle, emit) {
     }
     stopPlay();
   });
+  const startVideoFrameCallback = (video) => {
+    const handleFrame = (_now, _metadata) => {
+      video.playbackRate = 1.1;
+      setTimeout(() => {
+        video.playbackRate = 1;
+      }, 600);
+      frameCallbackId.value = video.requestVideoFrameCallback(handleFrame);
+    };
+    frameCallbackId.value = video.requestVideoFrameCallback(handleFrame);
+  };
   return {
     videoSize,
     remoteVideo,
@@ -5358,7 +5516,6 @@ class SdkController extends EventEmitter {
     const id = this.config.roomId;
     this.sdk.removeAllListeners();
     this.sdk.on(EmitType.streamTrack, (track) => {
-      console.log("=========> ON EmitType.streamTrack SdkController");
       const isVideo = track.kind === "video";
       this.emit(EmitType.streamTrack, isVideo, track);
     });
@@ -5425,6 +5582,12 @@ class GroupCtrlSocketManager {
     __publicField(this, "websocketModeSdkController");
     __publicField(this, "isSynchronous", true);
     this.config = config;
+    enableLog(!!this.config.enableLogger);
+    if (this.config.enableLogger !== void 0 && this.config.enableLogger) {
+      if (this.config.loggerLevel !== void 0) {
+        setLogLevel(this.config.loggerLevel);
+      }
+    }
     this.websocketModeSdkController = new SdkController(config);
   }
   getRTCSdk() {