yjz-web-sdk 1.0.11-beta.1 → 1.0.11-beta.3

package/lib/composables/useKeyboardControl.d.ts

@@ -1,6 +1,10 @@
-import { ChannelDataType } from "../core/data/WebrtcDataType.ts";
+import { ChannelDataType } from "../core/data/WebrtcDataType";
 import { type Ref } from "vue";
-export default function useKeyboardControl(disabled: Ref<boolean>, emit: (event: 'channelEvent', payload: ChannelDataType, data: any) => void): {
+export default function useKeyboardControl(imeInput: Ref<HTMLTextAreaElement | null>, disabled: Ref<boolean>, emit: (event: 'channelEvent', payload: ChannelDataType, data: any) => void): {
     startListening: () => void;
     stopListening: () => void;
+    onCompositionStart: (_e: CompositionEvent) => void;
+    onCompositionEnd: (e: CompositionEvent) => void;
+    onInput: (e: InputEvent) => void;
+    onKeyDown: (event: KeyboardEvent) => void;
 };

package/lib/composables/useMouseTouchControl.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import { ChannelDataType } from "../core/data/WebrtcDataType.ts";
+import { ChannelDataType } from "../core/data/WebrtcDataType";
 import type { Dimension } from "../components/RemotePlayer/index.ts";
 interface MouseTouchControlOptions {
     remoteVideoElement: Ref<HTMLVideoElement | null>;
@@ -8,14 +8,15 @@ interface MouseTouchControlOptions {
     videoAngle: Ref<number>;
     widthRadio: Ref<number>;
     isGroup: Ref<boolean>;
+    isMove: Ref<boolean>;
     emit: (event: 'channelEvent', payload: ChannelDataType, data: any) => void;
 }
 export default function useMouseTouchControl(options: MouseTouchControlOptions): {
-    isPointerDown: any;
+    pointers: any;
     handleMouseDown: (event: PointerEvent) => void;
     handleMouseMove: (event: PointerEvent) => void;
-    handleMouseEnter: (event: PointerEvent) => void;
     handleMouseUp: (event: PointerEvent) => void;
+    handleMouseEnter: (event: PointerEvent) => void;
     handleMouseLeave: (event: PointerEvent) => void;
     handleWheel: (e: WheelEvent) => void;
 };

package/lib/core/WebRTCSdk.d.ts

@@ -12,8 +12,6 @@ export declare class WebRTCSdk extends EventEmitter {
     options: WebRTCConfigOptions;
     isConnected: boolean;
     isConnecting: boolean;
-    private connectCount;
-    private MAX_COUNT;
     private timeout;
     constructor(options: WebRTCConfigOptions);
     initConfig(): Promise<void>;

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from 'eventemitter3';
-import type { WebRTCConfig } from "./WebRTCConfig.ts";
-import { ChannelDataType } from "../data/WebrtcDataType.ts";
+import type { WebRTCConfig } from "./WebRTCConfig";
+import { ChannelDataType } from "../data/WebrtcDataType";
 export declare class WebRTCClient extends EventEmitter {
     private readonly config;
     private peerConnection;
@@ -9,6 +9,7 @@ export declare class WebRTCClient extends EventEmitter {
     private isPushingStream;
     private isPushingLocalStream;
     private dataChannel;
+    private videoDataChannel;
     private statsTimer;
     private lastReportTime;
     private lastBytesReceived;
@@ -18,6 +19,8 @@ export declare class WebRTCClient extends EventEmitter {
     private maxLostRate;
     private lastSecondDecodedCount;
     private fileVideo?;
+    private videoTransceiver?;
+    private audioTransceiver?;
     private canvas?;
     private canvasStream;
     private rafId;
@@ -37,8 +40,9 @@ export declare class WebRTCClient extends EventEmitter {
     switchCamera(useBackCamera: boolean): Promise<void>;
     private getRotatedStream;
     private setVideoParams;
-    stopPush(): void;
+    stopPush(): Promise<void>;
     private resetPeerConnection;
+    private onConnected;
     private configDataChannel;
     private handleDataChannelMessage;
     private checkStats;

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

@@ -14,3 +14,9 @@ export interface KeyEventData {
  * @returns 包含 androidKeyCode 和 metaState 的对象
  */
 export declare const getKeyEventData: (event: KeyboardEvent) => KeyEventData;
+/**
+ * 判断当前按键是否属于功能键
+ * @param event - 浏览器 KeyboardEvent
+ * @returns true 表示是功能键
+ */
+export declare const isFunctionKey: (event: KeyboardEvent) => boolean;

package/lib/yjz-web-sdk.js

@@ -1,8 +1,8 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".vContainer[data-v-611728c2]{transition:transform .2s linear;transform-origin:center center;margin:0;overflow:hidden;transform:translateZ(0);will-change:transform}.flex[data-v-611728c2]{display:flex}.flex-1[data-v-611728c2]{flex:1 1 0}.items-center[data-v-611728c2]{align-items:center}.justify-center[data-v-611728c2]{justify-content:center}.video-control[data-v-611728c2]{width:100%;height:100%;display:block;-webkit-user-select:none;user-select:none;object-fit:cover;clip-path:inset(0 1px);-webkit-user-drag:none;touch-action:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0)}.circle-cursor[data-v-611728c2]{cursor:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%3e%3ccircle%20cx='12'%20cy='12'%20r='12'%20fill='%23fff'%20opacity='.6'/%3e%3ccircle%20cx='12'%20cy='12'%20r='10'%20fill='%23000'%20opacity='.6'/%3e%3c/svg%3e\") 12 12,auto}.triangle-cursor[data-v-611728c2]{cursor:url(\"data:image/svg+xml,%3csvg%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%3e%3cpath%20d='M143.832313%205.834982H143.686438A108.676545%20108.676545%200%200%200%205.834982%20143.686438l34.499333-11.815839-34.499333%2011.815839%200.072938%200.218812%200.145874%200.437624%200.583498%201.750494%202.333993%206.71023%208.752474%2025.528047L49.232663%20269.867929a2254749.467572%202254749.467572%200%200%201%20223.917444%20652.351017l9.335972%2027.205605%202.552804%207.585476%200.729373%202.188119a72.572592%2072.572592%200%200%200%20126.181491%2040.844876%2072.134968%2072.134968%200%200%200%2014.076895-18.963693c3.282178-6.41848%205.689108-13.639271%208.023101-20.3495l0.072937-0.291749%2072.572592-209.329989%2047.409231-136.830334%2015.53564-44.710551%200.145874-0.364687%200.510561-0.145874%2045.002301-15.900327%20137.486769-48.649165c99.340573-35.228705%20202.984445-71.989094%20209.913487-74.906584l3.355115-1.312871c8.023101-3.136303%2022.391744-8.606599%2033.915834-20.130689a72.499655%2072.499655%200%200%200%200-102.549813L999.240712%20304.877823c-1.823432-1.969307-7.293728-7.731351-13.274585-11.961714a89.056417%2089.056417%200%200%200-27.205605-12.3264h-0.145874l-2.552805-0.875247L948.184617%20277.161657l-27.86204-9.263034-94.672588-31.800653A405018.007245%20405018.007245%200%200%201%20268.919745%2048.138604L178.039896%2017.504947%20152.657723%208.752473%20145.874556%206.637292%20144.196999%205.90792%20143.832313%205.834982z'%20fill='%23000000'%20opacity='.7'%3e%3c/path%3e%3c/svg%3e\") 1 1,auto}.default-cursor[data-v-611728c2]{cursor:default}.no-events[data-v-611728c2]{pointer-events:none!important}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".vContainer[data-v-ae395fc8]{transition:transform .2s linear;transform-origin:center center;margin:0;overflow:hidden;background:transparent;transform:translateZ(0);will-change:transform}.flex[data-v-ae395fc8]{display:flex}.flex-1[data-v-ae395fc8]{flex:1 1 0}.items-center[data-v-ae395fc8]{align-items:center}.justify-center[data-v-ae395fc8]{justify-content:center}.video-control[data-v-ae395fc8]{width:100%;height:100%;display:block;-webkit-user-select:none;user-select:none;object-fit:cover;background:transparent;clip-path:inset(0 1px);-webkit-user-drag:none;touch-action:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0)}.circle-cursor[data-v-ae395fc8]{cursor:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%3e%3ccircle%20cx='12'%20cy='12'%20r='12'%20fill='%23fff'%20opacity='.6'/%3e%3ccircle%20cx='12'%20cy='12'%20r='10'%20fill='%23000'%20opacity='.6'/%3e%3c/svg%3e\") 12 12,auto}.triangle-cursor[data-v-ae395fc8]{cursor:url(\"data:image/svg+xml,%3csvg%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%3e%3cpath%20d='M143.832313%205.834982H143.686438A108.676545%20108.676545%200%200%200%205.834982%20143.686438l34.499333-11.815839-34.499333%2011.815839%200.072938%200.218812%200.145874%200.437624%200.583498%201.750494%202.333993%206.71023%208.752474%2025.528047L49.232663%20269.867929a2254749.467572%202254749.467572%200%200%201%20223.917444%20652.351017l9.335972%2027.205605%202.552804%207.585476%200.729373%202.188119a72.572592%2072.572592%200%200%200%20126.181491%2040.844876%2072.134968%2072.134968%200%200%200%2014.076895-18.963693c3.282178-6.41848%205.689108-13.639271%208.023101-20.3495l0.072937-0.291749%2072.572592-209.329989%2047.409231-136.830334%2015.53564-44.710551%200.145874-0.364687%200.510561-0.145874%2045.002301-15.900327%20137.486769-48.649165c99.340573-35.228705%20202.984445-71.989094%20209.913487-74.906584l3.355115-1.312871c8.023101-3.136303%2022.391744-8.606599%2033.915834-20.130689a72.499655%2072.499655%200%200%200%200-102.549813L999.240712%20304.877823c-1.823432-1.969307-7.293728-7.731351-13.274585-11.961714a89.056417%2089.056417%200%200%200-27.205605-12.3264h-0.145874l-2.552805-0.875247L948.184617%20277.161657l-27.86204-9.263034-94.672588-31.800653A405018.007245%20405018.007245%200%200%201%20268.919745%2048.138604L178.039896%2017.504947%20152.657723%208.752473%20145.874556%206.637292%20144.196999%205.90792%20143.832313%205.834982z'%20fill='%23000000'%20opacity='.7'%3e%3c/path%3e%3c/svg%3e\") 1 1,auto}.default-cursor[data-v-ae395fc8]{cursor:default}.no-events[data-v-ae395fc8]{pointer-events:none!important}.ime-input[data-v-ae395fc8]{position:absolute;opacity:0;right:0;bottom:0;width:1px;height:1px;border:none;outline:none;resize:none;z-index:-1}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
 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 { computed, onMounted, onUnmounted, ref, onBeforeUnmount, defineComponent, toRefs, createElementBlock, openBlock, createElementVNode, normalizeStyle, unref, normalizeClass } from "vue";
+import { computed, onMounted, onUnmounted, ref, onBeforeUnmount, defineComponent, toRefs, createElementBlock, openBlock, createElementVNode, normalizeStyle, unref, createCommentVNode, normalizeClass } from "vue";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];
@@ -3571,7 +3571,6 @@ const formattedTime = (timestamp) => {
   return `${h}:${m}:${s}.${ms}`;
 };
 class WebRTCClient extends EventEmitter {
-  // private isFireFox: boolean = false;
   constructor(config) {
     super();
     __publicField(this, "config");
@@ -3581,6 +3580,7 @@ class WebRTCClient extends EventEmitter {
     __publicField(this, "isPushingStream", false);
     __publicField(this, "isPushingLocalStream", false);
     __publicField(this, "dataChannel", null);
+    __publicField(this, "videoDataChannel", null);
     __publicField(this, "statsTimer");
     __publicField(this, "lastReportTime", 0);
     __publicField(this, "lastBytesReceived", 0);
@@ -3590,27 +3590,19 @@ class WebRTCClient extends EventEmitter {
     __publicField(this, "maxLostRate", 0);
     __publicField(this, "lastSecondDecodedCount", 0);
     __publicField(this, "fileVideo");
+    __publicField(this, "videoTransceiver");
+    __publicField(this, "audioTransceiver");
     __publicField(this, "canvas");
     __publicField(this, "canvasStream", null);
     __publicField(this, "rafId", 0);
     __publicField(this, "currentMedia", null);
     __publicField(this, "fileImage");
     __publicField(this, "startPushLocal", async (file) => {
-      var _a;
       if (this.isPushingLocalStream || !file) return;
       try {
         await this.loadMedia(file);
-        this.startCanvasStream();
-        const senders = [];
-        (_a = this.canvasStream) == null ? void 0 : _a.getTracks().forEach((track) => {
-          track.contentHint = "detail";
-          const sender = this.peerConnection.addTrack(track, this.canvasStream);
-          senders.push(sender);
-        });
-        senders.forEach((sender) => this.setVideoParams(sender));
-        await createOffer(this.peerConnection, (sdp2) => {
-          this.emit(EmitType.sendOffer, sdp2);
-        });
+        this.rotatedStream = this.startCanvasStream();
+        await this.onConnected();
         this.isPushingLocalStream = true;
       } catch (err) {
         this.isPushingLocalStream = false;
@@ -3711,6 +3703,7 @@ class WebRTCClient extends EventEmitter {
     }
   }
   closeConnection() {
+    var _a, _b;
     Logger.info("信息日志：", "关闭webrtc连接=======>");
     if (this.statsTimer) {
       clearInterval(this.statsTimer);
@@ -3721,27 +3714,30 @@ class WebRTCClient extends EventEmitter {
     if (this.peerConnection) {
       if (typeof this.peerConnection.getSenders === "function" && this.peerConnection.getSenders) {
         this.peerConnection.getSenders().forEach((sender) => {
-          var _a, _b;
+          var _a2, _b2;
           if (sender.track) {
-            (_b = (_a = sender.track).stop) == null ? void 0 : _b.call(_a);
+            (_b2 = (_a2 = sender.track).stop) == null ? void 0 : _b2.call(_a2);
           }
         });
       }
       if (typeof this.peerConnection.getReceivers === "function" && this.peerConnection.getReceivers) {
         this.peerConnection.getReceivers().forEach((receiver) => {
-          var _a, _b;
+          var _a2, _b2;
           if (receiver.track) {
-            (_b = (_a = receiver.track).stop) == null ? void 0 : _b.call(_a);
+            (_b2 = (_a2 = receiver.track).stop) == null ? void 0 : _b2.call(_a2);
           }
         });
       }
       if (this.peerConnection.getTransceivers) {
         this.peerConnection.getTransceivers().forEach((transceiver) => {
-          var _a;
-          (_a = transceiver.stop) == null ? void 0 : _a.call(transceiver);
+          var _a2;
+          (_a2 = transceiver.stop) == null ? void 0 : _a2.call(transceiver);
         });
       }
       this.removeAllListeners();
+      (_a = this.videoDataChannel) == null ? void 0 : _a.close();
+      this.videoDataChannel = null;
+      (_b = this.dataChannel) == null ? void 0 : _b.close();
       this.dataChannel = null;
       this.peerConnection.onicecandidate = null;
       this.peerConnection.ontrack = null;
@@ -3756,31 +3752,20 @@ class WebRTCClient extends EventEmitter {
     }
   }
   async readyCapture(useBackCamera) {
-    this.resetPeerConnection();
-    this.stopPush();
+    await this.resetPeerConnection();
     Logger.info("信息日志：", "启用摄像头推流到云机=======>", useBackCamera);
     try {
       this.localStream = await navigator.mediaDevices.getUserMedia({
         video: {
           width: { ideal: 960 },
-          height: { ideal: 720 },
+          height: { ideal: 540 },
           facingMode: useBackCamera ? { ideal: "environment" } : { ideal: "user" },
           frameRate: { ideal: 20, max: 30 }
         },
         audio: true
       });
-      const senders = [];
-      const rotatedStream = await this.getRotatedStream(this.localStream, useBackCamera);
-      this.rotatedStream = rotatedStream;
-      rotatedStream.getTracks().forEach((track) => {
-        track.contentHint = "motion";
-        const sender = this.peerConnection.addTrack(track, rotatedStream);
-        senders.push(sender);
-      });
-      await createOffer(this.peerConnection, (sdp2) => {
-        this.emit(EmitType.sendOffer, sdp2);
-      });
-      senders.forEach((sender) => this.setVideoParams(sender));
+      this.rotatedStream = await this.getRotatedStream(this.localStream, useBackCamera);
+      await this.onConnected();
     } catch (err) {
       if (err instanceof DOMException) {
         switch (err.name) {
@@ -3803,27 +3788,22 @@ class WebRTCClient extends EventEmitter {
    * ✅ 切换前后摄像头（无缝）
    */
   async switchCamera(useBackCamera) {
-    var _a;
     try {
       Logger.info("信息日志：", `切换摄像头 => ${useBackCamera ? "后置" : "前置"}`);
       this.isPushingStream = true;
       this.localStream = await navigator.mediaDevices.getUserMedia({
         video: {
           width: { ideal: 960 },
-          height: { ideal: 720 },
+          height: { ideal: 540 },
           facingMode: useBackCamera ? { ideal: "environment" } : { ideal: "user" },
           frameRate: { ideal: 20, max: 30 }
         },
-        audio: false
+        audio: true
         // 音频不需要重新采集
       });
       const rotatedStream = await this.getRotatedStream(this.localStream, useBackCamera);
       this.rotatedStream = rotatedStream;
-      const newTrack = this.rotatedStream.getVideoTracks()[0];
-      const sender = (_a = this.peerConnection) == null ? void 0 : _a.getSenders().find((s) => s.track && s.track.kind === "video");
-      if (sender) {
-        await sender.replaceTrack(newTrack);
-      }
+      await this.onConnected();
     } catch (err) {
       this.isPushingStream = false;
       if (err instanceof DOMException) {
@@ -3897,18 +3877,6 @@ class WebRTCClient extends EventEmitter {
     });
     return stream;
   }
-  // private async setVideoParams(sender: RTCRtpSender) {
-  //   Logger.info('信息日志：', '设置推流视频参数=======>')
-  //   const params = sender.getParameters();
-  //   params.degradationPreference = 'balanced';
-  //   const isMobile = /Android|iPhone|iPad/i.test(navigator.userAgent);
-  //   params.encodings.forEach(encoding => {
-  //     encoding.maxBitrate = isMobile ? 800000 : 1000000;
-  //     encoding.priority = 'high';
-  //     encoding.scaleResolutionDownBy = 1.0;
-  //   });
-  //   await sender.setParameters(params);
-  // }
   async setVideoParams(sender) {
     const params = sender.getParameters();
     const isMobile = /Android|iPhone|iPad/i.test(navigator.userAgent);
@@ -3931,40 +3899,60 @@ class WebRTCClient extends EventEmitter {
       Logger.error("设置推流参数失败：", e);
     }
   }
-  stopPush() {
-    var _a, _b, _c;
+  async stopPush() {
+    var _a, _b, _c, _d;
+    Logger.info("信息日志：", `停止推流到云机=======>${this.isPushingStream}`);
     if (!this.isPushingStream) return;
     this.isPushingStream = false;
-    Logger.info("信息日志：", "停止推流到云机=======>");
     (_a = this.localStream) == null ? void 0 : _a.getTracks().forEach((track) => track.stop());
     this.localStream = null;
     (_b = this.rotatedStream) == null ? void 0 : _b.getTracks().forEach((track) => track.stop());
     this.rotatedStream = null;
-    (_c = this.peerConnection) == null ? void 0 : _c.getSenders().forEach((sender) => {
-      var _a2;
-      try {
-        (_a2 = this.peerConnection) == null ? void 0 : _a2.removeTrack(sender);
-      } catch (e) {
-        console.warn("removeTrack error:", e);
-      }
-    });
+    if ((_c = this.videoTransceiver) == null ? void 0 : _c.sender) {
+      await this.videoTransceiver.sender.replaceTrack(null);
+    }
+    if ((_d = this.audioTransceiver) == null ? void 0 : _d.sender) {
+      await this.audioTransceiver.sender.replaceTrack(null);
+    }
   }
-  resetPeerConnection() {
+  async resetPeerConnection() {
     if (!this.peerConnection) {
       this.peerConnection = createPeerConnection(this.config);
+      this.videoTransceiver = this.peerConnection.addTransceiver("video", {
+        direction: "sendrecv"
+      });
+      this.audioTransceiver = this.peerConnection.addTransceiver("audio", {
+        direction: "sendrecv"
+      });
       configPeerConnection(this.peerConnection, (candidate) => {
         this.emit(EmitType.sendICEMessage, candidate);
       }, (track) => {
         this.emit(EmitType.streamTrack, track);
-      }, (state) => {
+      }, async (state) => {
         this.emit(EmitType.iceConnectionState, state);
         if (state === "connected") {
           this.checkStats();
+          await createOffer(this.peerConnection, (sdp2) => {
+            this.emit(EmitType.sendOffer, sdp2);
+          });
         }
       }, (err) => this.emit(EmitType.webrtcError, err));
       this.configDataChannel();
     }
   }
+  async onConnected() {
+    var _a, _b;
+    Logger.info("信息日志：", "WebRTC connected，启用轨道");
+    if (this.rotatedStream && ((_a = this.videoTransceiver) == null ? void 0 : _a.sender)) {
+      const videoTrack = this.rotatedStream.getVideoTracks()[0];
+      await this.videoTransceiver.sender.replaceTrack(videoTrack);
+      await this.setVideoParams(this.videoTransceiver.sender);
+    }
+    if (this.localStream && ((_b = this.audioTransceiver) == null ? void 0 : _b.sender)) {
+      const audioTrack = this.localStream.getAudioTracks()[0];
+      await this.audioTransceiver.sender.replaceTrack(audioTrack);
+    }
+  }
   configDataChannel() {
     this.peerConnection.ondatachannel = (event) => {
       this.dataChannel = event.channel;
@@ -3973,19 +3961,19 @@ class WebRTCClient extends EventEmitter {
       this.sendChannelData(ChannelDataType.ActionRequestCloudDeviceInfo, "");
     };
   }
-  handleDataChannelMessage(event) {
+  async handleDataChannelMessage(event) {
     const data = JSON.parse(event.data);
     if (data.type === ChannelDataType.ActionCommandEvent) {
       const { action, value, cameraId } = JSON.parse(data.data);
       if (action === "ACTION_CONTROL_VIDEO") {
         if (value === "ENABLE") {
           if (this.isPushingStream) {
-            this.switchCamera(Number(cameraId) === 0);
+            await this.switchCamera(Number(cameraId) === 0);
           } else {
-            this.startPush(Number(cameraId) === 0);
+            await this.startPush(Number(cameraId) === 0);
           }
         } else {
-          this.stopPush();
+          await this.stopPush();
           this.stopLocal();
         }
       }
@@ -4133,8 +4121,7 @@ class WebRTCClient extends EventEmitter {
     }
     if (kind === "video") {
       return new Promise((resolve, reject) => {
-        const url = URL.createObjectURL(file);
-        video.src = url;
+        video.src = URL.createObjectURL(file);
         video.onloadedmetadata = () => resolve();
         video.onerror = () => reject(new Error(`视频文件加载失败: ${file.name}`));
         video.play().catch((err) => reject(new Error(`视频播放失败: ${err}`)));
@@ -4142,8 +4129,7 @@ class WebRTCClient extends EventEmitter {
       });
     } else if (kind === "image") {
       return new Promise((resolve, reject) => {
-        const url = URL.createObjectURL(file);
-        img.src = url;
+        img.src = URL.createObjectURL(file);
         img.onload = () => resolve();
         img.onerror = () => reject(new Error(`图片文件加载失败: ${file.name}`));
         this.currentMedia = img;
@@ -4209,20 +4195,12 @@ class WebRTCClient extends EventEmitter {
   }
   /** 停止推流并释放资源 */
   stopLocal() {
-    var _a, _b;
+    var _a;
     if (!this.isPushingLocalStream) return;
     this.isPushingLocalStream = false;
     cancelAnimationFrame(this.rafId);
     (_a = this.canvasStream) == null ? void 0 : _a.getTracks().forEach((track) => track.stop());
     this.canvasStream = null;
-    (_b = this.peerConnection) == null ? void 0 : _b.getSenders().forEach((sender) => {
-      var _a2;
-      try {
-        (_a2 = this.peerConnection) == null ? void 0 : _a2.removeTrack(sender);
-      } catch (e) {
-        Logger.error("错误日志：", `移除音视频轨道失败=====>`, e);
-      }
-    });
     if (this.fileVideo) {
       this.fileVideo.pause();
       this.fileVideo.src = "";
@@ -4320,8 +4298,8 @@ class WebRTCSdk extends EventEmitter {
     __publicField(this, "options");
     __publicField(this, "isConnected", false);
     __publicField(this, "isConnecting", false);
-    __publicField(this, "connectCount", 0);
-    __publicField(this, "MAX_COUNT", 1);
+    // private connectCount: number = 0
+    // private MAX_COUNT: number = 1
     __publicField(this, "timeout", null);
     /**
        * 处理 signal 消息，根据不同消息类型分发到 webRTCClient 或直接触发 SDK 事件
@@ -4489,9 +4467,6 @@ class WebRTCSdk extends EventEmitter {
         }
       }
     }
-    if (this.options.maxRecount) {
-      this.MAX_COUNT = this.options.maxRecount;
-    }
   }
   async initConfig() {
     var _a, _b;
@@ -4611,14 +4586,8 @@ class WebRTCSdk extends EventEmitter {
       (clipData) => this.emit(EmitType.cloudClipData, clipData)
     );
     (_h = this.webRTCClient) == null ? void 0 : _h.on(EmitType.webrtcError, (err) => {
-      if (err.code === FailCode.ICE_STATE && this.connectCount < this.MAX_COUNT && this.isConnected) {
-        this.connectCount++;
-        this.emit(EmitType.reconnect);
-        this.reconnect();
-      } else {
-        Logger.error("错误信息：", `sdk调试错误日志======>`, err);
-        this.emit(EmitType.webrtcError, err);
-      }
+      Logger.error("错误信息：", `sdk调试错误日志======>`, err);
+      this.emit(EmitType.webrtcError, err);
     });
     (_i = this.webRTCClient) == null ? void 0 : _i.on(EmitType.cameraError, (err) => {
       this.emit(EmitType.cameraError, err);
@@ -4676,7 +4645,6 @@ class WebRTCSdk extends EventEmitter {
     this.signalingClient = null;
     this.webRTCClient = null;
     this.config = null;
-    this.connectCount = 0;
     this.isConnected = false;
     this.isConnecting = false;
   }
@@ -4945,6 +4913,61 @@ const getKeyEventData = (event) => {
     meta
   };
 };
+const FunctionKeys = /* @__PURE__ */ new Set([
+  // 方向键
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  // 编辑键
+  "Backspace",
+  "Delete",
+  "Enter",
+  "Tab",
+  "Escape",
+  "Space",
+  // 修饰键
+  "ShiftLeft",
+  "ShiftRight",
+  "ControlLeft",
+  "ControlRight",
+  "AltLeft",
+  "AltRight",
+  "MetaLeft",
+  "MetaRight",
+  // 锁定键
+  "CapsLock",
+  "NumLock",
+  "ScrollLock",
+  // 功能键
+  "F1",
+  "F2",
+  "F3",
+  "F4",
+  "F5",
+  "F6",
+  "F7",
+  "F8",
+  "F9",
+  "F10",
+  "F11",
+  "F12",
+  // 系统键
+  "Insert",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+  "PrintScreen",
+  "Pause",
+  "ContextMenu"
+]);
+const isFunctionKey = (event) => {
+  if (FunctionKeys.has(event.code)) {
+    return true;
+  }
+  return event.ctrlKey || event.altKey || event.shiftKey || event.metaKey;
+};
 function transformCoordinate(viewWidth, viewHeight, cloudWidth, cloudHeight, viewAngle, streamAngle, inputX, inputY) {
   let realShortWidth;
   let short;
@@ -5179,6 +5202,13 @@ function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle, emit) {
     stopPlay
   };
 }
+function getEventXY(event, rect) {
+  if ("clientX" in event && "clientY" in event) {
+    return [event.clientX - rect.left, event.clientY - rect.top];
+  } else {
+    return [0, 0];
+  }
+}
 function useMouseTouchControl(options) {
   const {
     remoteVideoElement,
@@ -5187,20 +5217,15 @@ function useMouseTouchControl(options) {
     videoAngle,
     widthRadio,
     isGroup,
+    isMove,
     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 index2 = ref(0);
-  const groupIndex = ref(0);
-  const handlePointerEvent = (event, action) => {
+  const pointers = ref(/* @__PURE__ */ new Map());
+  const groupIndexCounter = ref(0);
+  const handlePointerEvent = (event, action, pointerId) => {
     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;
+    let [x, y] = getEventXY(event, rect);
     const cloudWidth = cloudDeviceSize.value.width;
     const cloudHeight = cloudDeviceSize.value.height;
     const result = transformCoordinate(
@@ -5213,24 +5238,38 @@ function useMouseTouchControl(options) {
       x,
       y
     );
-    if (!result || result.length < 2) return;
+    if (!result) 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;
-    }
-    if (isGroup.value) {
-      if (action === ActionType.ACTION_DOWN) {
-        index2.value = 0;
-        groupIndex.value++;
-      } else if (action === ActionType.ACTION_UP || action === ActionType.ACTION_MOVE) {
-        index2.value++;
+    let pointerState = pointers.value.get(pointerId);
+    if (action === ActionType.ACTION_DOWN) {
+      pointerState = {
+        x,
+        y,
+        downTime: event.timeStamp,
+        isDown: true,
+        bound: Math.trunc(6 / widthRadio.value),
+        index: 0,
+        groupIndex: groupIndexCounter.value++
+      };
+      pointers.value.set(pointerId, pointerState);
+    } else {
+      if (!pointerState) return;
+      if (action === ActionType.ACTION_MOVE) {
+        let dx = x - pointerState.x;
+        let dy = y - pointerState.y;
+        if (isMove.value) {
+          dy = 0;
+          y = pointerState.y;
+        }
+        if (Math.abs(dx) < pointerState.bound && Math.abs(dy) < pointerState.bound) {
+          return;
+        }
+        pointerState.x = x;
+        pointerState.y = y;
+        pointerState.index++;
       }
     }
-    pointerList.value[0] = x;
-    pointerList.value[10] = y;
     const [px, py] = valueToPercentage(
       rect.width,
       rect.height,
@@ -5241,24 +5280,40 @@ function useMouseTouchControl(options) {
       x,
       y
     );
-    const touchData = isGroup.value ? new TouchData(action, 0, px, py, offsetTime, "web", index2.value, groupIndex.value) : new TouchData(action, 0, px, py, offsetTime, "web");
+    const offsetTime = Math.trunc(event.timeStamp - pointerState.downTime);
+    const touchData = isGroup.value ? new TouchData(
+      action,
+      pointerId,
+      px,
+      py,
+      offsetTime,
+      "web",
+      pointerState.index,
+      pointerState.groupIndex
+    ) : new TouchData(
+      action,
+      pointerId,
+      px,
+      py,
+      offsetTime,
+      "web"
+    );
     emit("channelEvent", ChannelDataType.ClickData, touchData);
+    if (action === ActionType.ACTION_UP) {
+      pointers.value.delete(pointerId);
+    }
   };
   const handleMouseDown = (event) => {
-    isPointerDown.value = true;
-    if (remoteVideoElement.value) {
-      remoteVideoElement.value.setPointerCapture(event.pointerId);
-    }
-    pointerDownTime.value[0] = event.timeStamp;
-    bound.value = Math.trunc(6 / widthRadio.value);
-    handlePointerEvent(event, ActionType.ACTION_DOWN);
+    event.preventDefault();
+    event.stopPropagation();
+    if (remoteVideoElement.value) remoteVideoElement.value.setPointerCapture(event.pointerId);
+    handlePointerEvent(event, ActionType.ACTION_DOWN, event.pointerId);
   };
   const handleMouseMove = (event) => {
-    if (!isPointerDown.value) return;
-    handlePointerEvent(event, ActionType.ACTION_MOVE);
-    if (!remoteVideoElement.value) {
-      return;
-    }
+    event.preventDefault();
+    event.stopPropagation();
+    handlePointerEvent(event, ActionType.ACTION_MOVE, event.pointerId);
+    if (!remoteVideoElement.value) return;
     const rect = remoteVideoElement.value.getBoundingClientRect();
     const { clientX: x, clientY: y } = event;
     if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
@@ -5266,31 +5321,25 @@ function useMouseTouchControl(options) {
     }
   };
   const handleMouseUp = (event) => {
-    if (!isPointerDown.value) return;
-    isPointerDown.value = false;
-    handlePointerEvent(event, ActionType.ACTION_UP);
-    if (remoteVideoElement.value) {
-      remoteVideoElement.value.releasePointerCapture(event.pointerId);
-    }
+    event.preventDefault();
+    event.stopPropagation();
+    handlePointerEvent(event, ActionType.ACTION_UP, event.pointerId);
+    if (remoteVideoElement.value) remoteVideoElement.value.releasePointerCapture(event.pointerId);
   };
   const handleMouseEnter = (event) => {
-    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(6 / widthRadio.value);
-      handlePointerEvent(event, ActionType.ACTION_DOWN);
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.buttons === 1 && !pointers.value.has(event.pointerId)) {
+      if (remoteVideoElement.value) remoteVideoElement.value.setPointerCapture(event.pointerId);
+      handlePointerEvent(event, ActionType.ACTION_DOWN, event.pointerId);
     }
   };
   const handleMouseLeave = (event) => {
-    if (isPointerDown.value) {
-      handlePointerEvent(event, ActionType.ACTION_UP);
-      isPointerDown.value = false;
-      if (remoteVideoElement.value) {
-        remoteVideoElement.value.releasePointerCapture(event.pointerId);
-      }
+    event.preventDefault();
+    event.stopPropagation();
+    if (pointers.value.has(event.pointerId)) {
+      handlePointerEvent(event, ActionType.ACTION_UP, event.pointerId);
+      if (remoteVideoElement.value) remoteVideoElement.value.releasePointerCapture(event.pointerId);
     }
   };
   const handleWheel = (e) => {
@@ -5299,38 +5348,90 @@ function useMouseTouchControl(options) {
     emit("channelEvent", ChannelDataType.ActionWheel, wheelData);
   };
   return {
-    isPointerDown,
+    pointers,
     handleMouseDown,
     handleMouseMove,
-    handleMouseEnter,
     handleMouseUp,
+    handleMouseEnter,
     handleMouseLeave,
     handleWheel
   };
 }
-function useKeyboardControl(disabled, emit) {
-  const listening = ref(false);
+function useKeyboardControl(imeInput, disabled, emit) {
+  const isComposing = ref(false);
   const handleKeyDown = (e) => {
     const data = getKeyEventData(e);
     emit("channelEvent", ChannelDataType.ActionInput, data);
   };
+  function onCompositionStart(_e) {
+    isComposing.value = true;
+  }
+  function onCompositionEnd(e) {
+    isComposing.value = false;
+    const text = e.data;
+    if (text && text.length > 0) {
+      emit("channelEvent", ChannelDataType.ActionChinese, new InputData(text));
+    }
+    clearInput();
+  }
   const startListening = () => {
     if (!disabled) {
       return;
     }
-    listening.value = true;
-    document.addEventListener("keydown", handleKeyDown);
+    if (imeInput.value) {
+      focusIME();
+    } else {
+      document.addEventListener("keydown", handleKeyDown);
+    }
   };
   const stopListening = () => {
     if (!disabled) {
       return;
     }
-    listening.value = false;
-    document.removeEventListener("keydown", handleKeyDown);
+    if (imeInput.value) {
+      blurIME();
+    } else {
+      document.removeEventListener("keydown", handleKeyDown);
+    }
+  };
+  const onInput = (e) => {
+    if (isComposing.value) return;
+    const text = e.data;
+    if (text && text.length > 0) {
+      emit("channelEvent", ChannelDataType.ActionChinese, new InputData(text));
+    }
+    clearInput();
+  };
+  function onKeyDown(event) {
+    if (isComposing.value) return;
+    if (isFunctionKey(event)) {
+      const data = getKeyEventData(event);
+      if (data.keyCode === 50 && data.meta === 4096) return;
+      emit("channelEvent", ChannelDataType.ActionInput, data);
+    }
+  }
+  const clearInput = () => {
+    if (imeInput.value) {
+      imeInput.value.value = "";
+    }
+  };
+  const focusIME = () => {
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = imeInput.value) == null ? void 0 : _a.focus();
+    });
+  };
+  const blurIME = () => {
+    var _a;
+    (_a = imeInput.value) == null ? void 0 : _a.blur();
   };
   return {
     startListening,
-    stopListening
+    stopListening,
+    onCompositionStart,
+    onCompositionEnd,
+    onInput,
+    onKeyDown
   };
 }
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -5342,15 +5443,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     cloudDeviceSize: { default: () => ({ width: 0, height: 0 }) },
     disabled: { type: Boolean, default: true },
     bgColor: { default: "transparent" },
-    isGroup: { type: Boolean, default: false }
+    isGroup: { type: Boolean, default: false },
+    isMove: { type: Boolean, default: false },
+    isKeyMapping: { type: Boolean, default: false }
   },
   emits: ["channelEvent", "groupControlEvent", "loadedSuccess"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
     const props = __props;
-    const { streamAngle, videoAngle, cursorType, cloudDeviceSize, disabled, bgColor, isGroup } = toRefs(props);
+    const { streamAngle, videoAngle, cursorType, cloudDeviceSize, disabled, bgColor, isGroup, isMove, isKeyMapping } = toRefs(props);
     const videoContainer = ref(null);
     const remoteVideoElement = ref(null);
+    const imeInput = ref(null);
     const cursorClass = useCursorStyle(cursorType);
     const {
       videoSize,
@@ -5374,12 +5478,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       videoAngle,
       widthRadio,
       isGroup,
+      isMove,
       emit
     });
     const {
       startListening,
-      stopListening
-    } = useKeyboardControl(disabled, emit);
+      stopListening,
+      onCompositionStart,
+      onCompositionEnd,
+      onInput,
+      onKeyDown
+    } = useKeyboardControl(imeInput, disabled, emit);
     useResizeObserver(videoContainer, dimensions);
     const handleClick = () => {
       var _a;
@@ -5404,9 +5513,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", {
           ref: "keyboardArea",
-          onPointerenter: _cache[6] || (_cache[6] = //@ts-ignore
+          onPointerenter: _cache[10] || (_cache[10] = //@ts-ignore
           (...args) => unref(startListening) && unref(startListening)(...args)),
-          onPointerleave: _cache[7] || (_cache[7] = //@ts-ignore
+          onPointerleave: _cache[11] || (_cache[11] = //@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", "overflow": "hidden" }])
@@ -5427,12 +5536,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             (...args) => unref(handleMouseLeave) && unref(handleMouseLeave)(...args)),
             onWheel: _cache[5] || (_cache[5] = //@ts-ignore
             (...args) => unref(handleWheel) && unref(handleWheel)(...args)),
-            style: normalizeStyle({ backgroundColor: `${unref(bgColor)}` }),
             autoplay: "",
             playsinline: "",
             muted: "",
             disablePictureInPicture: true
-          }, null, 38)
+          }, null, 34),
+          unref(isKeyMapping) ? (openBlock(), createElementBlock("textarea", {
+            key: 0,
+            ref_key: "imeInput",
+            ref: imeInput,
+            class: "ime-input",
+            autocomplete: "off",
+            autocapitalize: "off",
+            spellcheck: "false",
+            onCompositionstart: _cache[6] || (_cache[6] = //@ts-ignore
+            (...args) => unref(onCompositionStart) && unref(onCompositionStart)(...args)),
+            onCompositionend: _cache[7] || (_cache[7] = //@ts-ignore
+            (...args) => unref(onCompositionEnd) && unref(onCompositionEnd)(...args)),
+            onInput: _cache[8] || (_cache[8] = //@ts-ignore
+            (...args) => unref(onInput) && unref(onInput)(...args)),
+            onKeydown: _cache[9] || (_cache[9] = //@ts-ignore
+            (...args) => unref(onKeyDown) && unref(onKeyDown)(...args))
+          }, null, 544)) : createCommentVNode("", true)
         ], 36)
       ], 512);
     };
@@ -5445,7 +5570,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-611728c2"]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ae395fc8"]]);
 class SdkController extends EventEmitter {
   constructor(config) {
     super();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "yjz-web-sdk",
   "private": false,
-  "version": "1.0.11-beta.1",
+  "version": "1.0.11-beta.3",
   "type": "module",
   "description": "针对于亚矩阵项目的云手机投屏和屏幕控制",
   "license": "Apache-2.0",