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

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/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-9ec809c2]{transition:transform .2s linear;transform-origin:center center;margin:0;overflow:hidden;transform:translateZ(0);will-change:transform}.flex[data-v-9ec809c2]{display:flex}.flex-1[data-v-9ec809c2]{flex:1 1 0}.items-center[data-v-9ec809c2]{align-items:center}.justify-center[data-v-9ec809c2]{justify-content:center}.video-control[data-v-9ec809c2]{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-9ec809c2]{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-9ec809c2]{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-9ec809c2]{cursor:default}.no-events[data-v-9ec809c2]{pointer-events:none!important}.ime-input[data-v-9ec809c2]{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];
@@ -4945,6 +4945,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 +5234,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 +5249,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 +5270,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 +5312,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 +5353,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 +5380,93 @@ 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);
+    console.log("handleKeyDown===>handleKeyDown");
     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) {
+      console.log(`onCompositionEnd===>${text}`);
+      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));
+      console.log("onInput===>", 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 +5478,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 +5513,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 +5548,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" }])
@@ -5432,7 +5576,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             playsinline: "",
             muted: "",
             disablePictureInPicture: true
-          }, null, 38)
+          }, null, 38),
+          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 +5606,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-9ec809c2"]]);
 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.2",
   "type": "module",
   "description": "针对于亚矩阵项目的云手机投屏和屏幕控制",
   "license": "Apache-2.0",