yjz-web-sdk 1.0.1 → 1.0.2-beta.1

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];
@@ -303,6 +304,7 @@ var EmitType = /* @__PURE__ */ ((EmitType2) => {
   EmitType2["iceConnectionState"] = "iceConnectionState";
   EmitType2["cloudStatusChanged"] = "cloudStatusChanged";
   EmitType2["statisticInfo"] = "statisticInfo";
+  EmitType2["cloudClipData"] = "cloudClipData";
   return EmitType2;
 })(EmitType || {});
 class SignalingClient extends EventEmitter {
@@ -322,6 +324,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 +386,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 +1648,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 +1807,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 +1928,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 +2878,7 @@ function adapterFactory({ window: window2 } = {}, options = {
 }) {
   const logging2 = log;
   const browserDetails = detectBrowser(window2);
-  const adapter2 = {
+  const adapter = {
     browserDetails,
     commonShim,
     extractVersion,
@@ -3026,14 +2891,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 +2919,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 +2944,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 +2968,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 +3005,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,18 +3023,11 @@ const createPeerConnection = (config) => {
   const peerConnectionConfig = {
     iceServers,
     iceTransportPolicy: "all",
-    sdpSemantics: "unified-plan",
+    bundlePolicy: "max-bundle",
     rtcpMuxPolicy: "require",
-    bundlePolicy: "max-bundle"
+    iceCandidatePoolSize: 10
   };
-  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 }]
-  };
-  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) => {
@@ -3161,14 +3046,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);
   };
 };
@@ -3185,6 +3070,162 @@ 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";
+  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,
+  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 GestureData {
+  constructor(mode) {
+    __publicField(this, "mode");
+    this.mode = mode;
+  }
+}
+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));
+  }
+  static action(actionData) {
+    return new ChannelData("ActionCommand", this.formatData(actionData));
+  }
+  /**
+   * 生成剪贴板数据
+   * @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 gesture(data) {
+    return new ChannelData("ActionGesture", 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();
@@ -3193,14 +3234,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;
   }
@@ -3220,14 +3260,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);
@@ -3247,9 +3288,22 @@ class WebRTCClient extends EventEmitter {
         case ChannelDataType.ActionClarity:
           channelData = ChannelData.clarity(data);
           break;
+        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);
+        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));
     }
@@ -3257,7 +3311,7 @@ class WebRTCClient extends EventEmitter {
   closeConnection() {
     if (this.statsTimer) {
       clearInterval(this.statsTimer);
-      this.statsTimer = null;
+      this.statsTimer = void 0;
     }
     if (this.peerConnection) {
       if (typeof this.peerConnection.getSenders === "function" && this.peerConnection.getSenders) {
@@ -3390,20 +3444,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() {
@@ -3433,7 +3490,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 +3561,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);
@@ -3602,6 +3659,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);
     });
@@ -3775,10 +3836,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) {
@@ -3797,9 +3858,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 +3865,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 +3903,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,15 +3912,472 @@ 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 id = ref(0);
+  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
+        };
+        console.log("remoteVideo.value====>", remoteVideo.value);
+        screenStatus.value = true;
+      });
+      remoteVideoElement.value.addEventListener("loadedmetadata", () => {
+        scheduleFrame();
+      });
+    }
+  };
+  const scheduleFrame = () => {
+    if (!remoteVideoElement.value) return;
+    id.value = remoteVideoElement.value.requestVideoFrameCallback((now, metadata) => {
+      console.log("now", now, "Frame at", metadata.presentationTime.toFixed(2), "ms");
+      scheduleFrame();
+    });
+  };
+  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;
+      remoteVideoElement.value.cancelVideoFrameCallback(id.value);
+    }
+  };
+  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]);
+    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(disabled, emit) {
+  const listening = ref(false);
+  const handleKeyDown = (e) => {
+    const data = getKeyEventData(e);
+    emit("channelEvent", ChannelDataType.ActionInput, data);
+  };
+  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 {
+    startListening,
+    stopListening
+  };
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    streamAngle: { default: 0 },
+    videoAngle: { default: 0 },
+    cursorType: { default: 0 },
+    cloudDeviceSize: { 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 {
+      startListening,
+      stopListening
+    } = 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) => {
+      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] = //@ts-ignore
+          (...args) => unref(startListening) && unref(startListening)(...args)),
+          onPointerleave: _cache[10] || (_cache[10] = //@ts-ignore
+          (...args) => unref(stopListening) && unref(stopListening)(...args)),
+          class: "vContainer",
+          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: true
+          }, 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-51dd3cb6"]]);
 export {
+  ActionCommandType,
   ActionType,
   ChannelDataType,
   ContainerDirection,
   EmitType,
+  GestureData,
   InputData,
   KeyEventData,
+  index as RemotePlayer,
   TouchData,
   WebRTCSdk,
+  WheelData,
   getKeyEventData,
   transformCoordinate,
   valueToPercentage