yjz-web-sdk 1.0.0 → 1.0.2

package/lib/yjz-web-sdk.js

@@ -1,6 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { ref, computed, onMounted, onUnmounted, defineComponent, toRefs, createElementBlock, openBlock, createElementVNode, normalizeStyle, unref, normalizeClass } from "vue";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];
@@ -322,6 +323,7 @@ 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(() => {
@@ -383,144 +385,6 @@ class SignalingClient extends EventEmitter {
     this.sendMessage(jsonMessage);
   }
 }
-var ChannelDataType = /* @__PURE__ */ ((ChannelDataType2) => {
-  ChannelDataType2["ClickData"] = "ClickData";
-  ChannelDataType2["ClipboardData"] = "ClipboardData";
-  ChannelDataType2["ActionCommand"] = "ActionCommand";
-  ChannelDataType2["ActionInput"] = "ActionInput";
-  ChannelDataType2["ActionChinese"] = "ActionChinese";
-  ChannelDataType2["ActionRequestCloudDeviceInfo"] = "ActionRequestCloudDeviceInfo";
-  ChannelDataType2["ActionClarity"] = "ActionClarity";
-  return ChannelDataType2;
-})(ChannelDataType || {});
-const ActionType = Object.freeze({
-  ACTION_DOWN: 0,
-  ACTION_MOVE: 2,
-  ACTION_UP: 1
-});
-const StreamRotation = {
-  ROTATION_0: 0,
-  ROTATION_180: 2
-};
-const ContainerDirection = {
-  Vertical: 0,
-  Horizontal: 1
-};
-class TouchData {
-  constructor(action, p, x, y, offsetTime, type = "adb") {
-    __publicField(this, "action");
-    __publicField(this, "p");
-    __publicField(this, "x");
-    __publicField(this, "y");
-    __publicField(this, "offsetTime");
-    __publicField(this, "type");
-    this.action = action;
-    this.p = p;
-    this.x = x;
-    this.y = y;
-    this.offsetTime = offsetTime;
-    this.type = type;
-  }
-}
-class InputData {
-  constructor(text) {
-    __publicField(this, "text");
-    this.text = text;
-  }
-}
-class KeyEventData {
-  constructor(keyCode, meta) {
-    __publicField(this, "keyCode");
-    __publicField(this, "meta");
-    this.keyCode = keyCode;
-    this.meta = meta;
-  }
-}
-class ChannelData {
-  constructor(type, data = null) {
-    __publicField(this, "type");
-    __publicField(this, "data");
-    this.type = type;
-    this.data = data;
-  }
-  toString() {
-    return JSON.stringify({ type: this.type, data: this.data });
-  }
-  /**
-   * 格式化数据
-   * 如果数据已经是字符串，则直接返回；否则使用 JSON.stringify() 转换为字符串
-   * @param data 待转换数据
-   * @returns 格式化后的字符串
-   */
-  static formatData(data) {
-    return typeof data === "string" ? data : JSON.stringify(data);
-  }
-  /**
-   * 生成点击数据
-   * @param touchData 触摸数据，可以是任意类型
-   */
-  static click(touchData) {
-    return new ChannelData("ClickData", this.formatData(touchData));
-  }
-  /**
-   * 生成剪贴板数据
-   * @param data 剪贴板数据，可以是字符串或其他类型
-   */
-  static clipboard(data) {
-    return new ChannelData("ClipboardData", this.formatData(data));
-  }
-  /**
-   * 生成输入数据
-   * @param data 输入数据对象
-   */
-  static input(data) {
-    return new ChannelData("ActionInput", this.formatData(data));
-  }
-  /**
-   * 生成中文输入数据
-   * @param data 中文输入数据
-   */
-  static chinese(data) {
-    return new ChannelData("ActionChinese", this.formatData(data));
-  }
-  /**
-   * 生成请求云设备信息数据
-   */
-  static requestCloudDeviceInfo() {
-    return new ChannelData("ActionRequestCloudDeviceInfo", "");
-  }
-  /**
-   * 生成清晰度数据（clarity）
-   * @param data 清晰度数据
-   */
-  static clarity(data) {
-    return new ChannelData("ActionClarity", this.formatData(data));
-  }
-}
-class WebRTCConfig {
-  constructor(options = {}) {
-    __publicField(this, "signalServerUrl");
-    __publicField(this, "myId");
-    __publicField(this, "roomId");
-    __publicField(this, "targetId");
-    __publicField(this, "stunServerUri");
-    __publicField(this, "stunServerUriAli");
-    __publicField(this, "stunServerUriTel");
-    __publicField(this, "turnServerUri");
-    __publicField(this, "turnServerUserName");
-    __publicField(this, "turnServerPassword");
-    this.signalServerUrl = options.signalServerUrl || "";
-    this.myId = options.myId || "";
-    this.roomId = options.roomId || "";
-    this.targetId = options.targetId || "";
-    this.stunServerUri = options.stunServerUri || "stun:stun.l.google.com:19302";
-    this.stunServerUriAli = options.stunServerUriAli || "stun:stun.middle.aliyun.com:3478";
-    this.stunServerUriTel = options.stunServerUriTel || "stun:stun.qq.com:3478";
-    this.turnServerUri = options.turnServerUri || "turn:btweb.yajuzhen.com:3478";
-    this.turnServerUserName = options.turnServerUserName || "yangyj";
-    this.turnServerPassword = options.turnServerPassword || "hb@2025@168";
-  }
-}
 let logDisabled_ = true;
 let deprecationWarnings_ = true;
 function extractVersion(uastring, expr, pos) {
@@ -1783,11 +1647,11 @@ function shimLocalStreamsAPI(window2) {
       if (!this._localStreams) {
         this._localStreams = [];
       }
-      const index = this._localStreams.indexOf(stream);
-      if (index === -1) {
+      const index2 = this._localStreams.indexOf(stream);
+      if (index2 === -1) {
         return;
       }
-      this._localStreams.splice(index, 1);
+      this._localStreams.splice(index2, 1);
       const tracks = stream.getTracks();
       this.getSenders().forEach((sender) => {
         if (tracks.includes(sender.track)) {
@@ -1942,7 +1806,7 @@ function shimRTCIceServerUrls(window2) {
     return;
   }
   const OrigPeerConnection = window2.RTCPeerConnection;
-  window2.RTCPeerConnection = function RTCPeerConnection(pcConfig, pcConstraints) {
+  window2.RTCPeerConnection = function RTCPeerConnection2(pcConfig, pcConstraints) {
     if (pcConfig && pcConfig.iceServers) {
       const newIceServers = [];
       for (let i = 0; i < pcConfig.iceServers.length; i++) {
@@ -2063,7 +1927,7 @@ function requireSdp() {
     };
     SDPUtils2.splitSections = function(blob) {
       const parts = blob.split("\nm=");
-      return parts.map((part, index) => (index > 0 ? "m=" + part : part).trim() + "\r\n");
+      return parts.map((part, index2) => (index2 > 0 ? "m=" + part : part).trim() + "\r\n");
     };
     SDPUtils2.getDescription = function(blob) {
       const sections = SDPUtils2.splitSections(blob);
@@ -3013,7 +2877,7 @@ function adapterFactory({ window: window2 } = {}, options = {
 }) {
   const logging2 = log;
   const browserDetails = detectBrowser(window2);
-  const adapter2 = {
+  const adapter = {
     browserDetails,
     commonShim,
     extractVersion,
@@ -3026,14 +2890,14 @@ function adapterFactory({ window: window2 } = {}, options = {
     case "chrome":
       if (!chromeShim || !shimPeerConnection$1 || !options.shimChrome) {
         logging2("Chrome shim is not included in this adapter release.");
-        return adapter2;
+        return adapter;
       }
       if (browserDetails.version === null) {
         logging2("Chrome shim can not determine version, not shimming.");
-        return adapter2;
+        return adapter;
       }
       logging2("adapter.js shimming chrome.");
-      adapter2.browserShim = chromeShim;
+      adapter.browserShim = chromeShim;
       shimAddIceCandidateNullOrEmpty(window2, browserDetails);
       shimParameterlessSetLocalDescription(window2);
       shimGetUserMedia$2(window2, browserDetails);
@@ -3054,10 +2918,10 @@ function adapterFactory({ window: window2 } = {}, options = {
     case "firefox":
       if (!firefoxShim || !shimPeerConnection || !options.shimFirefox) {
         logging2("Firefox shim is not included in this adapter release.");
-        return adapter2;
+        return adapter;
       }
       logging2("adapter.js shimming firefox.");
-      adapter2.browserShim = firefoxShim;
+      adapter.browserShim = firefoxShim;
       shimAddIceCandidateNullOrEmpty(window2, browserDetails);
       shimParameterlessSetLocalDescription(window2);
       shimGetUserMedia$1(window2, browserDetails);
@@ -3079,10 +2943,10 @@ function adapterFactory({ window: window2 } = {}, options = {
     case "safari":
       if (!safariShim || !options.shimSafari) {
         logging2("Safari shim is not included in this adapter release.");
-        return adapter2;
+        return adapter;
       }
       logging2("adapter.js shimming safari.");
-      adapter2.browserShim = safariShim;
+      adapter.browserShim = safariShim;
       shimAddIceCandidateNullOrEmpty(window2, browserDetails);
       shimParameterlessSetLocalDescription(window2);
       shimRTCIceServerUrls(window2);
@@ -3103,9 +2967,33 @@ function adapterFactory({ window: window2 } = {}, options = {
       logging2("Unsupported browser!");
       break;
   }
-  return adapter2;
+  return adapter;
+}
+adapterFactory({ window: typeof window === "undefined" ? void 0 : window });
+class WebRTCConfig {
+  constructor(options = {}) {
+    __publicField(this, "signalServerUrl");
+    __publicField(this, "myId");
+    __publicField(this, "roomId");
+    __publicField(this, "targetId");
+    __publicField(this, "stunServerUri");
+    __publicField(this, "stunServerUriAli");
+    __publicField(this, "stunServerUriTel");
+    __publicField(this, "turnServerUri");
+    __publicField(this, "turnServerUserName");
+    __publicField(this, "turnServerPassword");
+    this.signalServerUrl = options.signalServerUrl || "";
+    this.myId = options.myId || "";
+    this.roomId = options.roomId || "";
+    this.targetId = options.targetId || "";
+    this.stunServerUri = options.stunServerUri || "stun:stun.l.google.com:19302";
+    this.stunServerUriAli = options.stunServerUriAli || "stun:stun.middle.aliyun.com:3478";
+    this.stunServerUriTel = options.stunServerUriTel || "stun:stun.qq.com:3478";
+    this.turnServerUri = options.turnServerUri || "turn:btweb.yajuzhen.com:3478";
+    this.turnServerUserName = options.turnServerUserName || "yangyj";
+    this.turnServerPassword = options.turnServerPassword || "hb@2025@168";
+  }
 }
-const adapter = adapterFactory({ window: typeof window === "undefined" ? void 0 : window });
 const setRemoteDescriptionWithHandleOffer = (peerConnection, sdp2, sendAnswer, onError) => {
   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)));
@@ -3116,7 +3004,10 @@ const createAnswer = (peerConnection, sendAnswer, onError) => {
 const setLocalDescriptionWithCreateAnswer = (peerConnection, answer, sendAnswer, onError) => {
   peerConnection.setLocalDescription(answer).then(() => {
     sendAnswer == null ? void 0 : sendAnswer(answer.sdp ?? "");
-  }).catch((error) => onError == null ? void 0 : onError(createWebRtcError(FailCode.LOCAL_DES, error)));
+  }).catch((error) => {
+    onError == null ? void 0 : onError(createWebRtcError(FailCode.LOCAL_DES, error));
+    console.log("21321322212213");
+  });
 };
 const createPeerConnection = (config) => {
   const iceServers = [
@@ -3131,23 +3022,15 @@ const createPeerConnection = (config) => {
   const peerConnectionConfig = {
     iceServers,
     iceTransportPolicy: "all",
-    sdpSemantics: "unified-plan",
+    bundlePolicy: "max-bundle",
     rtcpMuxPolicy: "require",
-    bundlePolicy: "max-bundle"
-  };
-  if (adapter.browserDetails.browser === "chrome") {
-    peerConnectionConfig.sdpSemantics = adapter.browserDetails.version && adapter.browserDetails.version < 72 ? "plan-b" : "unified-plan";
-  }
-  const constraints = {
-    optional: [{ DtlsSrtpKeyAgreement: true }, { googIPv6: true }]
+    iceCandidatePoolSize: 10
   };
-  const RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
-  return new RTCPeerConnection(peerConnectionConfig, constraints);
+  return new RTCPeerConnection(peerConnectionConfig);
 };
 const configPeerConnection = (peerConnection, onICEMessage, onTrack, onConnectState, onError) => {
   peerConnection.onicecandidate = (event) => {
     if (!event.candidate) {
-      console.log("ICE candidate collection completed");
       return;
     }
     const candidateObj = {
@@ -3186,6 +3069,134 @@ const setLocalDescriptionWithCreateOffer = (peerConnection, offer, sendOfferMess
 const addIceCandidate = (peerConnection, candidate, onError) => {
   peerConnection.addIceCandidate(candidate).catch((err) => onError == null ? void 0 : onError(createWebRtcError(FailCode.HANDLE_ICE, err)));
 };
+var ChannelDataType = /* @__PURE__ */ ((ChannelDataType2) => {
+  ChannelDataType2["ClickData"] = "ClickData";
+  ChannelDataType2["ClipboardData"] = "ClipboardData";
+  ChannelDataType2["ActionCommand"] = "ActionCommand";
+  ChannelDataType2["ActionInput"] = "ActionInput";
+  ChannelDataType2["ActionChinese"] = "ActionChinese";
+  ChannelDataType2["ActionRequestCloudDeviceInfo"] = "ActionRequestCloudDeviceInfo";
+  ChannelDataType2["ActionClarity"] = "ActionClarity";
+  ChannelDataType2["ActionWheel"] = "ActionWheel";
+  return ChannelDataType2;
+})(ChannelDataType || {});
+const ActionType = {
+  ACTION_DOWN: 0,
+  ACTION_MOVE: 2,
+  ACTION_UP: 1
+};
+const StreamRotation = {
+  ROTATION_0: 0,
+  ROTATION_180: 2
+};
+const ContainerDirection = {
+  Vertical: 0,
+  Horizontal: 1
+};
+class TouchData {
+  constructor(action, p, x, y, offsetTime, type = "adb") {
+    __publicField(this, "action");
+    __publicField(this, "p");
+    __publicField(this, "x");
+    __publicField(this, "y");
+    __publicField(this, "offsetTime");
+    __publicField(this, "type");
+    this.action = action;
+    this.p = p;
+    this.x = x;
+    this.y = y;
+    this.offsetTime = offsetTime;
+    this.type = type;
+  }
+}
+class InputData {
+  constructor(text) {
+    __publicField(this, "text");
+    this.text = text;
+  }
+}
+class WheelData {
+  constructor(axis) {
+    __publicField(this, "axis");
+    this.axis = axis;
+  }
+}
+class KeyEventData {
+  constructor(keyCode, meta) {
+    __publicField(this, "keyCode");
+    __publicField(this, "meta");
+    this.keyCode = keyCode;
+    this.meta = meta;
+  }
+}
+class ChannelData {
+  constructor(type, data = null) {
+    __publicField(this, "type");
+    __publicField(this, "data");
+    this.type = type;
+    this.data = data;
+  }
+  toString() {
+    return JSON.stringify({ type: this.type, data: this.data });
+  }
+  /**
+   * 格式化数据
+   * 如果数据已经是字符串，则直接返回；否则使用 JSON.stringify() 转换为字符串
+   * @param data 待转换数据
+   * @returns 格式化后的字符串
+   */
+  static formatData(data) {
+    return typeof data === "string" ? data : JSON.stringify(data);
+  }
+  /**
+   * 生成点击数据
+   * @param touchData 触摸数据，可以是任意类型
+   */
+  static click(touchData) {
+    return new ChannelData("ClickData", this.formatData(touchData));
+  }
+  /**
+   * 生成剪贴板数据
+   * @param data 剪贴板数据，可以是字符串或其他类型
+   */
+  static clipboard(data) {
+    return new ChannelData("ClipboardData", this.formatData(data));
+  }
+  /**
+   * 生成输入数据
+   * @param data 输入数据对象
+   */
+  static input(data) {
+    return new ChannelData("ActionInput", this.formatData(data));
+  }
+  /**
+   * 生成鼠标滚动数据
+   * @param data 输入数据对象
+   */
+  static wheel(data) {
+    return new ChannelData("ActionWheel", this.formatData(data));
+  }
+  /**
+   * 生成中文输入数据
+   * @param data 中文输入数据
+   */
+  static chinese(data) {
+    return new ChannelData("ActionChinese", this.formatData(data));
+  }
+  /**
+   * 生成请求云设备信息数据
+   */
+  static requestCloudDeviceInfo() {
+    return new ChannelData("ActionRequestCloudDeviceInfo", "");
+  }
+  /**
+   * 生成清晰度数据（clarity）
+   * @param data 清晰度数据
+   */
+  static clarity(data) {
+    return new ChannelData("ActionClarity", this.formatData(data));
+  }
+}
 class WebRTCClient extends EventEmitter {
   constructor(config) {
     super();
@@ -3194,14 +3205,13 @@ class WebRTCClient extends EventEmitter {
     __publicField(this, "localStream", null);
     __publicField(this, "isPushingStream", false);
     __publicField(this, "dataChannel", null);
-    __publicField(this, "statsTimer", null);
+    __publicField(this, "statsTimer");
     __publicField(this, "lastReportTime", 0);
     __publicField(this, "lastBytesReceived", 0);
     __publicField(this, "lastPacketsLost", 0);
     __publicField(this, "lastPacketsReceived", 0);
     __publicField(this, "lostPacketCount", 0);
     __publicField(this, "maxLostRate", 0);
-    __publicField(this, "decodedCount", 0);
     __publicField(this, "lastSecondDecodedCount", 0);
     this.config = config;
   }
@@ -3221,14 +3231,15 @@ class WebRTCClient extends EventEmitter {
     }, (err) => this.emit(EmitType.webrtcError, err));
   }
   handleAnswer(answerSdp) {
-    setRemoteDescriptionWithHandleAnswer(this.peerConnection, answerSdp, (err) => this.emit(EmitType.webrtcError, err));
+    setRemoteDescriptionWithHandleAnswer(this.peerConnection, answerSdp ?? "", (err) => this.emit(EmitType.webrtcError, err));
   }
   handleIceCandidate(candidate) {
     addIceCandidate(this.peerConnection, candidate, (err) => this.emit(EmitType.webrtcError, err));
   }
   sendChannelData(type, data) {
+    var _a;
     try {
-      let channelData = "";
+      let channelData = null;
       switch (type) {
         case ChannelDataType.ClickData:
           channelData = ChannelData.click(data);
@@ -3248,9 +3259,16 @@ class WebRTCClient extends EventEmitter {
         case ChannelDataType.ActionClarity:
           channelData = ChannelData.clarity(data);
           break;
+        case ChannelDataType.ActionWheel:
+          channelData = ChannelData.wheel(data);
+          break;
+      }
+      if (channelData) {
+        const jsonString = JSON.stringify(channelData);
+        const buffer = new TextEncoder().encode(jsonString).buffer;
+        (_a = this.dataChannel) == null ? void 0 : _a.send(buffer);
+        channelData = null;
       }
-      const buffer = new TextEncoder().encode(channelData).buffer;
-      this.dataChannel.send(buffer);
     } catch (err) {
       this.emit(EmitType.webrtcError, createWebRtcError(FailCode.DATACHANNEL_ERR, err));
     }
@@ -3258,20 +3276,22 @@ class WebRTCClient extends EventEmitter {
   closeConnection() {
     if (this.statsTimer) {
       clearInterval(this.statsTimer);
-      this.statsTimer = null;
+      this.statsTimer = void 0;
     }
-    if (!this.peerConnection) {
-      if (this.peerConnection.getSenders) {
+    if (this.peerConnection) {
+      if (typeof this.peerConnection.getSenders === "function" && this.peerConnection.getSenders) {
         this.peerConnection.getSenders().forEach((sender) => {
+          var _a, _b;
           if (sender.track) {
-            sender.track.stop();
+            (_b = (_a = sender.track).stop) == null ? void 0 : _b.call(_a);
           }
         });
       }
-      if (this.peerConnection.getReceivers) {
+      if (typeof this.peerConnection.getReceivers === "function" && this.peerConnection.getReceivers) {
         this.peerConnection.getReceivers().forEach((receiver) => {
+          var _a, _b;
           if (receiver.track) {
-            receiver.track.stop();
+            (_b = (_a = receiver.track).stop) == null ? void 0 : _b.call(_a);
           }
         });
       }
@@ -3281,7 +3301,6 @@ class WebRTCClient extends EventEmitter {
           (_a = transceiver.stop) == null ? void 0 : _a.call(transceiver);
         });
       }
-      this.peerConnection.close();
       this.removeAllListeners();
       this.dataChannel = null;
       this.peerConnection.onicecandidate = null;
@@ -3292,6 +3311,7 @@ class WebRTCClient extends EventEmitter {
       this.peerConnection.onsignalingstatechange = null;
       this.peerConnection.onnegotiationneeded = null;
       this.peerConnection.onicegatheringstatechange = null;
+      this.peerConnection.close();
       this.peerConnection = null;
     }
   }
@@ -3371,7 +3391,6 @@ class WebRTCClient extends EventEmitter {
       configPeerConnection(this.peerConnection, (candidate) => {
         this.emit(EmitType.sendICEMessage, candidate);
       }, (track) => {
-        console.error("send track====>", track, Date.now());
         this.emit(EmitType.streamTrack, track);
       }, (state) => {
         this.emit(EmitType.iceConnectionState, state);
@@ -3433,7 +3452,6 @@ class WebRTCClient extends EventEmitter {
             videoFps = report.framesPerSecond || 0;
             totalDecodeTime = report.totalDecodeTime || 0;
             framesDecoded = report.framesDecoded || 0;
-            report.framesReceived || 0;
             pliCount = (report.pliCount || 0) + (report.firCount || 0);
           }
         }
@@ -3505,6 +3523,7 @@ 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);
@@ -3797,9 +3816,6 @@ function transformCoordinate(viewWidth, viewHeight, cloudWidth, cloudHeight, vie
   const end = short - invalidValue;
   const len = mid - invalidValue;
   if (viewAngle === -90) {
-    if (inputY < invalidValue || inputY > viewHeight - invalidValue) {
-      return null;
-    }
     const resultY = linearTransform(invalidValue, mid, start, end, len, inputY);
     if (streamAngle === -90) {
       return [inputX, resultY];
@@ -3807,12 +3823,9 @@ function transformCoordinate(viewWidth, viewHeight, cloudWidth, cloudHeight, vie
       return [viewHeight - resultY, inputX];
     }
   } else {
-    if (inputX < invalidValue || inputX > viewWidth - invalidValue) {
-      return null;
-    }
     const resultX = linearTransform(invalidValue, mid, start, end, len, inputX);
     if (streamAngle === -90) {
-      const [rotX, rotY] = rotatePoint90(viewWidth, viewHeight, cloudWidth, cloudHeight, resultX, inputY);
+      const [rotX, rotY] = rotatePoint90(viewWidth, viewHeight, resultX, inputY);
       return [rotX, rotY];
     } else {
       return [resultX, inputY];
@@ -3848,7 +3861,7 @@ function linearTransform(invalidValue, mid, start, end, len, input) {
     return input;
   }
 }
-function rotatePoint90(width, height, cloudWidth, cloudHeight, inputX, inputY) {
+function rotatePoint90(width, height, inputX, inputY) {
   const offsetLongSide = height / 2;
   const offsetShortSide = width / 2;
   const x0 = inputX - offsetShortSide;
@@ -3857,6 +3870,431 @@ function rotatePoint90(width, height, cloudWidth, cloudHeight, inputX, inputY) {
   const yRotated = -x0 + offsetShortSide;
   return [xRotated, yRotated];
 }
+function useDeviceMode() {
+  const isMobile = ref(false);
+  const checkDeviceMode = () => {
+    isMobile.value = /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent);
+  };
+  const checkTouchSupport = () => {
+    if (navigator.maxTouchPoints > 0) {
+      isMobile.value = true;
+    }
+  };
+  const handleUp = () => {
+  };
+  return {
+    isMobile,
+    checkDeviceMode,
+    checkTouchSupport,
+    handleUp
+  };
+}
+function useCursorStyle(cursorType) {
+  return computed(() => {
+    switch (cursorType.value) {
+      case 1:
+        return "circle-cursor";
+      case 2:
+        return "triangle-cursor";
+      default:
+        return "default-cursor";
+    }
+  });
+}
+function useResizeObserver(target, dimension) {
+  let observer = null;
+  const init = () => {
+    if (!target.value) return;
+    observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        dimension.value = { width, height };
+      }
+    });
+    observer.observe(target.value);
+  };
+  const destroy = () => {
+    observer == null ? void 0 : observer.disconnect();
+  };
+  onMounted(init);
+  onUnmounted(destroy);
+}
+function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle) {
+  const screenStatus = ref(false);
+  const remoteVideo = ref({});
+  const dimensions = ref({ width: 0, height: 0 });
+  const widthRadio = ref(0);
+  const heightRadio = ref(0);
+  const resizeObserver = ref(null);
+  const videoSize = computed(() => {
+    let width = 0;
+    let height = 0;
+    const isRotated = videoAngle.value % 180 !== 0;
+    const containerWidth = isRotated ? dimensions.value.height : dimensions.value.width;
+    const containerHeight = isRotated ? dimensions.value.width : dimensions.value.height;
+    if (remoteVideo.value.width && remoteVideo.value.height) {
+      const aspect = remoteVideo.value.width / remoteVideo.value.height;
+      const videoHeight = containerWidth / aspect;
+      if (videoHeight > containerHeight) {
+        height = containerHeight;
+        width = height * aspect;
+      } else {
+        width = containerWidth;
+        height = videoHeight;
+      }
+      widthRadio.value = remoteVideo.value.width / width;
+      heightRadio.value = remoteVideo.value.height / height;
+    }
+    return { width, height };
+  });
+  const initVideoContainer = () => {
+    resizeObserver.value = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        dimensions.value = { width, height };
+      }
+    });
+    if (videoContainer.value) {
+      resizeObserver.value.observe(videoContainer.value);
+    }
+    if (remoteVideoElement.value) {
+      remoteVideoElement.value.addEventListener("resize", () => {
+        if (!remoteVideoElement.value) return;
+        remoteVideo.value = {
+          width: remoteVideoElement.value.videoWidth,
+          height: remoteVideoElement.value.videoHeight
+        };
+        screenStatus.value = true;
+      });
+    }
+  };
+  const startPlay = (track) => {
+    if (!remoteVideoElement.value) return;
+    if (!remoteVideoElement.value.srcObject) {
+      remoteVideoElement.value.srcObject = new MediaStream();
+    }
+    remoteVideoElement.value.playsInline = true;
+    remoteVideoElement.value.setAttribute("webkit-playsinline", "true");
+    remoteVideoElement.value.srcObject.addTrack(track);
+  };
+  const stopPlay = () => {
+    screenStatus.value = false;
+    if (remoteVideoElement.value && remoteVideoElement.value.srcObject) {
+      remoteVideoElement.value.srcObject.getTracks().forEach((track) => track.stop());
+      remoteVideoElement.value.srcObject = null;
+    }
+  };
+  return {
+    videoSize,
+    remoteVideo,
+    dimensions,
+    widthRadio,
+    heightRadio,
+    screenStatus,
+    initVideoContainer,
+    startPlay,
+    stopPlay
+  };
+}
+function useMouseTouchControl(options) {
+  const {
+    isMobile,
+    remoteVideoElement,
+    cloudDeviceSize,
+    streamAngle,
+    videoAngle,
+    widthRadio,
+    emit
+  } = options;
+  const isPointerDown = ref(false);
+  const bound = ref(0);
+  const pointerList = ref(new Array(20).fill(0));
+  const pointerDownTime = ref(new Array(10).fill(0));
+  const endX = ref(0);
+  const endY = ref(0);
+  const handlePointerEvent = (event, action) => {
+    if (!remoteVideoElement.value) return;
+    const offsetTime = Math.trunc((event.timeStamp - pointerDownTime.value[0]) / 2);
+    const rect = remoteVideoElement.value.getBoundingClientRect();
+    let x = event.clientX - rect.left;
+    let y = event.clientY - rect.top;
+    const cloudWidth = cloudDeviceSize.value.width;
+    const cloudHeight = cloudDeviceSize.value.height;
+    const result = transformCoordinate(
+      rect.width,
+      rect.height,
+      cloudWidth,
+      cloudHeight,
+      videoAngle.value,
+      streamAngle.value,
+      x,
+      y
+    );
+    if (!result || result.length < 2) return;
+    x = result[0];
+    y = result[1];
+    if (action === ActionType.ACTION_MOVE) {
+      const flipY = pointerList.value[10] - y;
+      const flipX = pointerList.value[0] - x;
+      if (Math.abs(flipY) < bound.value && Math.abs(flipX) < bound.value) return;
+    }
+    pointerList.value[0] = x;
+    pointerList.value[10] = y;
+    const percentResult = valueToPercentage(
+      rect.width,
+      rect.height,
+      cloudWidth,
+      cloudHeight,
+      videoAngle.value,
+      streamAngle.value,
+      x,
+      y
+    );
+    const touchData = new TouchData(action, 0, percentResult[0], percentResult[1], offsetTime);
+    emit("channelEvent", ChannelDataType.ClickData, touchData);
+  };
+  const onTouchStart = (e) => {
+    if (!isMobile.value) return;
+    const touches = Array.from(e.touches);
+    if (touches.length > 0) {
+      pointerDownTime.value[0] = e.timeStamp;
+      bound.value = Math.trunc(4 / widthRadio.value);
+      endX.value = touches[0].clientX;
+      endY.value = touches[0].clientY;
+      const event = {
+        clientX: endX.value,
+        clientY: endY.value,
+        timeStamp: e.timeStamp
+      };
+      handlePointerEvent(event, ActionType.ACTION_DOWN);
+    }
+  };
+  const onTouchMove = (e) => {
+    if (!isMobile.value) return;
+    const touches = Array.from(e.touches);
+    if (touches.length > 0) {
+      endX.value = touches[0].clientX;
+      endY.value = touches[0].clientY;
+      const event = {
+        clientX: endX.value,
+        clientY: endY.value,
+        timeStamp: e.timeStamp
+      };
+      handlePointerEvent(event, ActionType.ACTION_MOVE);
+    }
+  };
+  const onTouchEnd = (e) => {
+    if (!isMobile.value) return;
+    const event = {
+      clientX: endX.value,
+      clientY: endY.value,
+      timeStamp: e.timeStamp
+    };
+    handlePointerEvent(event, ActionType.ACTION_UP);
+  };
+  const handleMouseDown = (event) => {
+    if (isMobile.value) return;
+    isPointerDown.value = true;
+    if (remoteVideoElement.value) {
+      remoteVideoElement.value.setPointerCapture(event.pointerId);
+    }
+    pointerDownTime.value[0] = event.timeStamp;
+    bound.value = Math.trunc(4 / widthRadio.value);
+    handlePointerEvent(event, ActionType.ACTION_DOWN);
+  };
+  const handleMouseMove = (event) => {
+    if (isMobile.value || !isPointerDown.value) return;
+    handlePointerEvent(event, ActionType.ACTION_MOVE);
+  };
+  const handleMouseUp = (event) => {
+    if (isMobile.value || !isPointerDown.value) return;
+    isPointerDown.value = false;
+    handlePointerEvent(event, ActionType.ACTION_UP);
+    if (remoteVideoElement.value) {
+      remoteVideoElement.value.releasePointerCapture(event.pointerId);
+    }
+  };
+  const handleMouseEnter = (event) => {
+    if (isMobile.value) return;
+    if (event.buttons === 1 && !isPointerDown.value) {
+      isPointerDown.value = true;
+      if (remoteVideoElement.value) {
+        remoteVideoElement.value.setPointerCapture(event.pointerId);
+      }
+      pointerDownTime.value[0] = event.timeStamp;
+      bound.value = Math.trunc(4 / widthRadio.value);
+      handlePointerEvent(event, ActionType.ACTION_DOWN);
+    }
+  };
+  const handleMouseLeave = (event) => {
+    if (isPointerDown.value) {
+      handlePointerEvent(event, ActionType.ACTION_UP);
+      isPointerDown.value = false;
+      if (remoteVideoElement.value) {
+        remoteVideoElement.value.releasePointerCapture(event.pointerId);
+      }
+    }
+  };
+  const handleWheel = (e) => {
+    const delta = Math.sign(e.deltaY) * -1;
+    const wheelData = new WheelData(delta);
+    emit("channelEvent", ChannelDataType.ActionWheel, wheelData);
+  };
+  return {
+    isPointerDown,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseEnter,
+    handleMouseUp,
+    handleMouseLeave,
+    handleWheel
+  };
+}
+function useKeyboardControl(emit) {
+  const handleKeyDown = (e) => {
+    const data = getKeyEventData(e);
+    emit("channelEvent", ChannelDataType.ActionInput, data);
+  };
+  const startListening = (e) => {
+    const target = e.target;
+    target.focus();
+  };
+  const stopListening = () => {
+  };
+  return {
+    handleKeyDown,
+    startListening,
+    stopListening
+  };
+}
+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 }) },
+    disabled: { type: Boolean, default: true }
+  },
+  emits: ["channelEvent"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const { streamAngle, videoAngle, cursorType, cloudDeviceSize, disabled } = toRefs(props);
+    const videoContainer = ref(null);
+    const remoteVideoElement = ref(null);
+    const {
+      isMobile,
+      checkDeviceMode,
+      checkTouchSupport,
+      handleUp
+    } = useDeviceMode();
+    const cursorClass = useCursorStyle(cursorType);
+    const {
+      videoSize,
+      dimensions,
+      widthRadio,
+      initVideoContainer,
+      startPlay,
+      stopPlay
+    } = useRemoteVideo(videoContainer, remoteVideoElement, videoAngle);
+    const {
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      handleMouseDown,
+      handleMouseMove,
+      handleMouseEnter,
+      handleMouseUp,
+      handleMouseLeave,
+      handleWheel
+    } = useMouseTouchControl({
+      isMobile,
+      remoteVideoElement,
+      cloudDeviceSize,
+      streamAngle,
+      videoAngle,
+      widthRadio,
+      emit
+    });
+    const {
+      handleKeyDown,
+      startListening,
+      stopListening
+    } = useKeyboardControl(emit);
+    useResizeObserver(videoContainer, dimensions);
+    onMounted(() => {
+      checkDeviceMode();
+      window.addEventListener("resize", checkDeviceMode);
+      window.addEventListener("pointerdown", checkTouchSupport);
+      window.addEventListener("pointerup", handleUp);
+      initVideoContainer();
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", checkDeviceMode);
+      window.removeEventListener("pointerdown", checkTouchSupport);
+      window.removeEventListener("pointerup", handleUp);
+    });
+    __expose({ startPlay, stopPlay });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "videoContainer",
+        ref: videoContainer,
+        class: "flex flex-1 items-center justify-center",
+        style: { "width": "100%", "height": "100%", "background": "black", "position": "relative", "overflow": "hidden" }
+      }, [
+        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",
+          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", {
+            ref_key: "remoteVideoElement",
+            ref: remoteVideoElement,
+            class: normalizeClass(["video-control", [unref(cursorClass), { "no-events": unref(disabled) }]]),
+            onTouchstart: _cache[0] || (_cache[0] = //@ts-ignore
+            (...args) => unref(onTouchStart) && unref(onTouchStart)(...args)),
+            onTouchmove: _cache[1] || (_cache[1] = //@ts-ignore
+            (...args) => unref(onTouchMove) && unref(onTouchMove)(...args)),
+            onTouchend: _cache[2] || (_cache[2] = //@ts-ignore
+            (...args) => unref(onTouchEnd) && unref(onTouchEnd)(...args)),
+            onPointerenter: _cache[3] || (_cache[3] = //@ts-ignore
+            (...args) => unref(handleMouseEnter) && unref(handleMouseEnter)(...args)),
+            onPointerdown: _cache[4] || (_cache[4] = //@ts-ignore
+            (...args) => unref(handleMouseDown) && unref(handleMouseDown)(...args)),
+            onPointermove: _cache[5] || (_cache[5] = //@ts-ignore
+            (...args) => unref(handleMouseMove) && unref(handleMouseMove)(...args)),
+            onPointerup: _cache[6] || (_cache[6] = //@ts-ignore
+            (...args) => unref(handleMouseUp) && unref(handleMouseUp)(...args)),
+            onPointerleave: _cache[7] || (_cache[7] = //@ts-ignore
+            (...args) => unref(handleMouseLeave) && unref(handleMouseLeave)(...args)),
+            onWheel: _cache[8] || (_cache[8] = //@ts-ignore
+            (...args) => unref(handleWheel) && unref(handleWheel)(...args)),
+            autoplay: "",
+            playsinline: "",
+            muted: "",
+            disablePictureInPicture: ""
+          }, null, 34)
+        ], 36)
+      ], 512);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-27488d0e"]]);
 export {
   ActionType,
   ChannelDataType,
@@ -3864,8 +4302,10 @@ export {
   EmitType,
   InputData,
   KeyEventData,
+  index as RemotePlayer,
   TouchData,
   WebRTCSdk,
+  WheelData,
   getKeyEventData,
   transformCoordinate,
   valueToPercentage