yjz-web-sdk 1.0.2 → 1.0.3

package/lib/yjz-web-sdk.js

@@ -198,6 +198,7 @@ var MessageType = /* @__PURE__ */ ((MessageType2) => {
   MessageType2["NotAvailable"] = "NotAvailable";
   MessageType2["Ping"] = "Ping";
   MessageType2["Pong"] = "Pong";
+  MessageType2["SendScreenshot"] = "SendScreenshot";
   return MessageType2;
 })(MessageType || {});
 var SendType = /* @__PURE__ */ ((SendType2) => {
@@ -208,6 +209,7 @@ var SendType = /* @__PURE__ */ ((SendType2) => {
   SendType2["IceCandidates"] = "IceCandidates";
   SendType2["Pong"] = "Pong";
   SendType2["Identity"] = "Web";
+  SendType2["RequestScreenshot"] = "RequestScreenshot";
   return SendType2;
 })(SendType || {});
 var FailCode = /* @__PURE__ */ ((FailCode2) => {
@@ -304,6 +306,8 @@ var EmitType = /* @__PURE__ */ ((EmitType2) => {
   EmitType2["iceConnectionState"] = "iceConnectionState";
   EmitType2["cloudStatusChanged"] = "cloudStatusChanged";
   EmitType2["statisticInfo"] = "statisticInfo";
+  EmitType2["cloudClipData"] = "cloudClipData";
+  EmitType2["screenshot"] = "screenshot";
   return EmitType2;
 })(EmitType || {});
 class SignalingClient extends EventEmitter {
@@ -323,7 +327,6 @@ class SignalingClient extends EventEmitter {
   start() {
     this.webSocket = new WebSocket(this.config.signalServerUrl);
     this.webSocket.onopen = () => {
-      console.log("sendSignInMessagesendSignInMessagesendSignInMessage");
       this.sendSignInMessage();
       if (this.timeout === null) {
         this.timeout = setTimeout(() => {
@@ -379,6 +382,23 @@ class SignalingClient extends EventEmitter {
       type: SendType.SignIn,
       identity: SendType.Identity,
       turnServerUri: this.config.turnServerUri,
+      roomId: this.config.roomId,
+      isControl: this.config.isControl ? "true" : "false",
+      screenshotWidth: this.config.screenshotWidth,
+      screenshotHeight: this.config.screenshotHeight,
+      screenshotQuality: this.config.screenshotQuality
+    };
+    const jsonMessage = JSON.stringify(message);
+    this.sendMessage(jsonMessage);
+  }
+  /**
+   * 用于从控请求当前截屏
+   * @param visible 当前从控page控件是否可见
+   */
+  sendRequestScreenshot(visible) {
+    const message = {
+      type: SendType.RequestScreenshot,
+      visible,
       roomId: this.config.roomId
     };
     const jsonMessage = JSON.stringify(message);
@@ -2982,6 +3002,10 @@ class WebRTCConfig {
     __publicField(this, "turnServerUri");
     __publicField(this, "turnServerUserName");
     __publicField(this, "turnServerPassword");
+    __publicField(this, "isControl");
+    __publicField(this, "screenshotWidth");
+    __publicField(this, "screenshotHeight");
+    __publicField(this, "screenshotQuality");
     this.signalServerUrl = options.signalServerUrl || "";
     this.myId = options.myId || "";
     this.roomId = options.roomId || "";
@@ -2992,6 +3016,10 @@ class WebRTCConfig {
     this.turnServerUri = options.turnServerUri || "turn:btweb.yajuzhen.com:3478";
     this.turnServerUserName = options.turnServerUserName || "yangyj";
     this.turnServerPassword = options.turnServerPassword || "hb@2025@168";
+    this.isControl = options.isControl ?? true;
+    this.screenshotWidth = options.screenshotWidth || 144;
+    this.screenshotHeight = options.screenshotHeight || 256;
+    this.screenshotQuality = options.screenshotQuality || 20;
   }
 }
 const setRemoteDescriptionWithHandleOffer = (peerConnection, sdp2, sendAnswer, onError) => {
@@ -3006,7 +3034,6 @@ const setLocalDescriptionWithCreateAnswer = (peerConnection, answer, sendAnswer,
     sendAnswer == null ? void 0 : sendAnswer(answer.sdp ?? "");
   }).catch((error) => {
     onError == null ? void 0 : onError(createWebRtcError(FailCode.LOCAL_DES, error));
-    console.log("21321322212213");
   });
 };
 const createPeerConnection = (config) => {
@@ -3045,14 +3072,14 @@ const configPeerConnection = (peerConnection, onICEMessage, onTrack, onConnectSt
     if (!state) {
       return;
     }
-    if (state === "failed") {
+    if (state === "failed" || state === "disconnected") {
       onError == null ? void 0 : onError(createWebRtcError(FailCode.ICE_STATE, "failed"));
     }
     onConnectState == null ? void 0 : onConnectState(state);
   };
   peerConnection.ontrack = (event) => {
     const track = event.track;
-    track.contentHint = "detail";
+    track.contentHint = "motion";
     onTrack == null ? void 0 : onTrack(track);
   };
 };
@@ -3078,8 +3105,20 @@ var ChannelDataType = /* @__PURE__ */ ((ChannelDataType2) => {
   ChannelDataType2["ActionRequestCloudDeviceInfo"] = "ActionRequestCloudDeviceInfo";
   ChannelDataType2["ActionClarity"] = "ActionClarity";
   ChannelDataType2["ActionWheel"] = "ActionWheel";
+  ChannelDataType2["CloudClipData"] = "CloudClipData";
+  ChannelDataType2["ActionCommandEvent"] = "ActionCommandEvent";
+  ChannelDataType2["ActionUpdateCloudStatus"] = "ActionUpdateCloudStatus";
+  ChannelDataType2["ActionGesture"] = "ActionGesture";
   return ChannelDataType2;
 })(ChannelDataType || {});
+var ActionCommandType = /* @__PURE__ */ ((ActionCommandType2) => {
+  ActionCommandType2["ActionBack"] = "ActionBack";
+  ActionCommandType2["ActionHome"] = "ActionHome";
+  ActionCommandType2["ActionRecent"] = "ActionRecent";
+  ActionCommandType2["ActionSwitchNavButtons"] = "ActionSwitchNavButtons";
+  ActionCommandType2["ActionSwitchNavGestural"] = "ActionSwitchNavGestural";
+  return ActionCommandType2;
+})(ActionCommandType || {});
 const ActionType = {
   ACTION_DOWN: 0,
   ACTION_MOVE: 2,
@@ -3129,6 +3168,12 @@ class KeyEventData {
     this.meta = meta;
   }
 }
+class GestureData {
+  constructor(mode) {
+    __publicField(this, "mode");
+    this.mode = mode;
+  }
+}
 class ChannelData {
   constructor(type, data = null) {
     __publicField(this, "type");
@@ -3155,6 +3200,9 @@ class ChannelData {
   static click(touchData) {
     return new ChannelData("ClickData", this.formatData(touchData));
   }
+  static action(actionData) {
+    return new ChannelData("ActionCommand", this.formatData(actionData));
+  }
   /**
    * 生成剪贴板数据
    * @param data 剪贴板数据，可以是字符串或其他类型
@@ -3176,6 +3224,13 @@ class ChannelData {
   static wheel(data) {
     return new ChannelData("ActionWheel", this.formatData(data));
   }
+  /**
+   * 切换手势模式数据
+   * @param data 输入数据对象
+   */
+  static gesture(data) {
+    return new ChannelData("ActionGesture", this.formatData(data));
+  }
   /**
    * 生成中文输入数据
    * @param data 中文输入数据
@@ -3262,6 +3317,12 @@ class WebRTCClient extends EventEmitter {
         case ChannelDataType.ActionWheel:
           channelData = ChannelData.wheel(data);
           break;
+        case ChannelDataType.ActionGesture:
+          channelData = ChannelData.gesture(data);
+          break;
+        case ChannelDataType.ActionCommand:
+          channelData = ChannelData.action(data);
+          break;
       }
       if (channelData) {
         const jsonString = JSON.stringify(channelData);
@@ -3409,20 +3470,23 @@ class WebRTCClient extends EventEmitter {
   }
   handleDataChannelMessage(event) {
     const data = JSON.parse(event.data);
-    if (data.type === "ActionCommandEvent") {
+    if (data.type === ChannelDataType.ActionCommandEvent) {
       const { action, value } = JSON.parse(data.data);
       if (action === "ACTION_CONTROL_VIDEO") {
         value === "ENABLE" ? this.startPush() : this.stopPush();
       }
-    } else if (data.type === "ActionUpdateCloudStatus") {
-      const { rotation, screenWidth, screenHeight } = JSON.parse(data.data);
+    } else if (data.type === ChannelDataType.ActionUpdateCloudStatus) {
+      const { rotation, screenWidth, screenHeight, gestureMode } = JSON.parse(data.data);
       const direction = [StreamRotation.ROTATION_0, StreamRotation.ROTATION_180].includes(rotation) ? ContainerDirection.Vertical : ContainerDirection.Horizontal;
       const cloudStatus = {
         direction,
         screenWidth,
-        screenHeight
+        screenHeight,
+        gestureMode
       };
       this.emit(EmitType.cloudStatusChanged, cloudStatus);
+    } else if (data.type === ChannelDataType.CloudClipData) {
+      this.emit(EmitType.cloudClipData, data.data);
     }
   }
   checkStats() {
@@ -3441,6 +3505,7 @@ class WebRTCClient extends EventEmitter {
       let bytesReceived = 0;
       let framesDecoded = 0;
       let pliCount = 0;
+      let framesReceived = 0;
       let connectionType = "";
       const currentTime = Date.now();
       statsReport.forEach((report) => {
@@ -3452,6 +3517,7 @@ class WebRTCClient extends EventEmitter {
             videoFps = report.framesPerSecond || 0;
             totalDecodeTime = report.totalDecodeTime || 0;
             framesDecoded = report.framesDecoded || 0;
+            framesReceived = report.framesReceived || 0;
             pliCount = (report.pliCount || 0) + (report.firCount || 0);
           }
         }
@@ -3494,7 +3560,9 @@ class WebRTCClient extends EventEmitter {
         // percent
         bitrate,
         pliCount,
-        averageDecodeTime
+        averageDecodeTime,
+        framesDecoded,
+        framesReceived
       };
       this.emit(EmitType.statisticInfo, screenInfo);
     }).catch((error) => {
@@ -3523,7 +3591,6 @@ class WebRTCSdk extends EventEmitter {
           this.config.myId = message.myId;
           break;
         case MessageType.Offer:
-          console.log("handleSignaling===>", message);
           if (message.senderId && message.sdp) {
             this.config.targetId = message.senderId;
             this.webRTCClient.handleOffer(message.sdp);
@@ -3558,6 +3625,10 @@ class WebRTCSdk extends EventEmitter {
         case MessageType.Ping:
           this.sendPong();
           break;
+        case MessageType.SendScreenshot:
+          const base64Str = `data:image/png;base64,${message.screenshot}`;
+          this.emit(EmitType.screenshot, { "room_id": this.config.roomId, "base64": base64Str });
+          break;
       }
     });
     /** 发送 Offer 信令 */
@@ -3621,6 +3692,10 @@ class WebRTCSdk extends EventEmitter {
       EmitType.cloudStatusChanged,
       (info) => this.emit(EmitType.cloudStatusChanged, info)
     );
+    this.webRTCClient.on(
+      EmitType.cloudClipData,
+      (clipData) => this.emit(EmitType.cloudClipData, clipData)
+    );
     this.webRTCClient.on(EmitType.webrtcError, (err) => {
       this.emit(EmitType.webrtcError, err);
     });
@@ -3640,16 +3715,14 @@ class WebRTCSdk extends EventEmitter {
   }
   /** 开始推流：触发媒体采集与轨道添加 */
   async startPush() {
-    try {
-      await this.webRTCClient.readyCapture();
-    } catch (error) {
-      this.emit("error", { type: "camera", error });
-    }
   }
   /** 发送信道数据 */
   sendChannelData(type, data) {
     this.webRTCClient.sendChannelData(type, data);
   }
+  sendRequestScreenshot(visible) {
+    this.signalingClient.sendRequestScreenshot(visible);
+  }
   sendPong() {
     const message = {
       type: SendType.Pong
@@ -3794,10 +3867,10 @@ const KeyCodeMap = {
 };
 const getKeyEventData = (event) => {
   const keyCode = KeyCodeMap[event.code] ?? -1;
-  const metaState = computeAndroidMetaState(event);
+  const meta = computeAndroidMetaState(event);
   return {
-    androidKeyCode: keyCode,
-    metaState
+    keyCode,
+    meta
   };
 };
 function transformCoordinate(viewWidth, viewHeight, cloudWidth, cloudHeight, viewAngle, streamAngle, inputX, inputY) {
@@ -3870,6 +3943,85 @@ function rotatePoint90(width, height, inputX, inputY) {
   const yRotated = -x0 + offsetShortSide;
   return [xRotated, yRotated];
 }
+class GroupControllerManager extends EventEmitter {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "webRTCConfigList", []);
+    __publicField(this, "sdkList", []);
+    __publicField(this, "loopTimer", null);
+    __publicField(this, "visibilityMap", /* @__PURE__ */ new Map());
+    __publicField(this, "previousVisibilityMap", /* @__PURE__ */ new Map());
+  }
+  startGroupControl(configList) {
+    if (!Array.isArray(configList) || configList.length === 0) {
+      throw new Error("群控列表为空");
+    }
+    const controlCount = configList.filter((config) => config.isControl).length;
+    if (controlCount !== 1) {
+      throw new Error(`一次群控发起，有且只有一个主控，当前主控个数为 ${controlCount}。`);
+    }
+    this.webRTCConfigList = configList;
+    configList.forEach((config) => {
+      const sdk = new WebRTCSdk(config);
+      sdk.startConnection();
+      sdk.on(EmitType.screenshot, (screenshot) => {
+        this.emit(EmitType.screenshot, screenshot);
+      });
+      this.sdkList.push(sdk);
+    });
+    this.startLoop();
+  }
+  stopGroupControl() {
+    this.sdkList.forEach((sdk) => sdk.stop());
+    this.sdkList = [];
+    this.visibilityMap.clear();
+    this.previousVisibilityMap.clear();
+    this.removeAllListeners();
+    this.stopLoop();
+  }
+  getConnectionList() {
+    return this.webRTCConfigList;
+  }
+  /**
+   * 设置某个视图的可见状态
+   * @param viewId 视图 ID
+   * @param visible 是否可见
+   */
+  setViewVisibility(viewId, visible) {
+    this.visibilityMap.set(viewId, visible);
+  }
+  sendChannelData(type, data) {
+    this.sdkList.forEach((sdk) => {
+      sdk.sendChannelData(type, data);
+    });
+  }
+  startLoop() {
+    if (this.loopTimer !== null) return;
+    this.loopTimer = setInterval(() => {
+      try {
+        this.sdkList.forEach((sdk) => {
+          const viewId = sdk.config.roomId;
+          const isVisibleNow = this.visibilityMap.get(viewId) ?? false;
+          const wasVisible = this.previousVisibilityMap.get(viewId) ?? false;
+          if (isVisibleNow) {
+            sdk.sendRequestScreenshot(true);
+          } else if (wasVisible && !isVisibleNow) {
+            sdk.sendRequestScreenshot(false);
+          }
+          this.previousVisibilityMap.set(viewId, isVisibleNow);
+        });
+      } catch (err) {
+        console.error("Error during loop execution:", err);
+      }
+    }, 1e3);
+  }
+  stopLoop() {
+    if (this.loopTimer !== null) {
+      clearInterval(this.loopTimer);
+      this.loopTimer = null;
+    }
+  }
+}
 function useDeviceMode() {
   const isMobile = ref(false);
   const checkDeviceMode = () => {
@@ -3926,6 +4078,7 @@ function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle) {
   const widthRadio = ref(0);
   const heightRadio = ref(0);
   const resizeObserver = ref(null);
+  const id = ref(0);
   const videoSize = computed(() => {
     let width = 0;
     let height = 0;
@@ -3982,6 +4135,7 @@ function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle) {
     if (remoteVideoElement.value && remoteVideoElement.value.srcObject) {
       remoteVideoElement.value.srcObject.getTracks().forEach((track) => track.stop());
       remoteVideoElement.value.srcObject = null;
+      remoteVideoElement.value.cancelVideoFrameCallback(id.value);
     }
   };
   return {
@@ -4014,7 +4168,7 @@ function useMouseTouchControl(options) {
   const endY = ref(0);
   const handlePointerEvent = (event, action) => {
     if (!remoteVideoElement.value) return;
-    const offsetTime = Math.trunc((event.timeStamp - pointerDownTime.value[0]) / 2);
+    const offsetTime = Math.trunc(event.timeStamp - pointerDownTime.value[0]);
     const rect = remoteVideoElement.value.getBoundingClientRect();
     let x = event.clientX - rect.left;
     let y = event.clientY - rect.top;
@@ -4153,19 +4307,27 @@ function useMouseTouchControl(options) {
     handleWheel
   };
 }
-function useKeyboardControl(emit) {
+function useKeyboardControl(disabled, emit) {
+  const listening = ref(false);
   const handleKeyDown = (e) => {
     const data = getKeyEventData(e);
     emit("channelEvent", ChannelDataType.ActionInput, data);
   };
-  const startListening = (e) => {
-    const target = e.target;
-    target.focus();
+  const startListening = () => {
+    if (!disabled) {
+      return;
+    }
+    listening.value = true;
+    document.addEventListener("keydown", handleKeyDown);
   };
   const stopListening = () => {
+    if (!disabled) {
+      return;
+    }
+    listening.value = false;
+    document.removeEventListener("keydown", handleKeyDown);
   };
   return {
-    handleKeyDown,
     startListening,
     stopListening
   };
@@ -4173,10 +4335,10 @@ function useKeyboardControl(emit) {
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
-    streamAngle: { type: Number, default: 0 },
-    videoAngle: { type: Number, default: 0 },
-    cursorType: { type: Number, default: 0 },
-    cloudDeviceSize: { type: Object, default: () => ({ width: 0, height: 0 }) },
+    streamAngle: { default: 0 },
+    videoAngle: { default: 0 },
+    cursorType: { default: 0 },
+    cloudDeviceSize: { default: () => ({ width: 0, height: 0 }) },
     disabled: { type: Boolean, default: true }
   },
   emits: ["channelEvent"],
@@ -4221,22 +4383,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit
     });
     const {
-      handleKeyDown,
       startListening,
       stopListening
-    } = useKeyboardControl(emit);
+    } = useKeyboardControl(disabled, emit);
     useResizeObserver(videoContainer, dimensions);
+    const handleClick = () => {
+      var _a;
+      if ((_a = remoteVideoElement.value) == null ? void 0 : _a.srcObject) {
+        remoteVideoElement.value.muted = false;
+      }
+    };
     onMounted(() => {
       checkDeviceMode();
       window.addEventListener("resize", checkDeviceMode);
       window.addEventListener("pointerdown", checkTouchSupport);
       window.addEventListener("pointerup", handleUp);
+      document.addEventListener("click", handleClick);
       initVideoContainer();
     });
     onUnmounted(() => {
       window.removeEventListener("resize", checkDeviceMode);
       window.removeEventListener("pointerdown", checkTouchSupport);
       window.removeEventListener("pointerup", handleUp);
+      document.removeEventListener("click", handleClick);
     });
     __expose({ startPlay, stopPlay });
     return (_ctx, _cache) => {
@@ -4248,11 +4417,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", {
           ref: "keyboardArea",
-          onPointerenter: _cache[9] || (_cache[9] = ($event) => unref(disabled) ? null : unref(startListening)),
-          onPointerleave: _cache[10] || (_cache[10] = ($event) => unref(disabled) ? null : unref(stopListening)),
-          tabindex: "0",
+          onPointerenter: _cache[9] || (_cache[9] = //@ts-ignore
+          (...args) => unref(startListening) && unref(startListening)(...args)),
+          onPointerleave: _cache[10] || (_cache[10] = //@ts-ignore
+          (...args) => unref(stopListening) && unref(stopListening)(...args)),
           class: "vContainer",
-          onKeydown: _cache[11] || (_cache[11] = ($event) => unref(disabled) ? null : unref(handleKeyDown)),
           style: normalizeStyle([{ height: unref(videoSize).height + "px", width: unref(videoSize).width + "px", transform: `rotate(${unref(videoAngle)}deg)` }, { "position": "relative" }])
         }, [
           createElementVNode("video", {
@@ -4280,7 +4449,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             autoplay: "",
             playsinline: "",
             muted: "",
-            disablePictureInPicture: ""
+            disablePictureInPicture: true
           }, null, 34)
         ], 36)
       ], 512);
@@ -4294,12 +4463,15 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-27488d0e"]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-51dd3cb6"]]);
 export {
+  ActionCommandType,
   ActionType,
   ChannelDataType,
   ContainerDirection,
   EmitType,
+  GestureData,
+  GroupControllerManager,
   InputData,
   KeyEventData,
   index as RemotePlayer,