virtual-human-cf 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,255 @@
+# Virtual Human Component Framework (virtual-human-cf)
+
+一个基于 Vue 3 的虚拟数字人组件库，用于展示和控制数字人视频，并处理相关音频和交互事件。
+
+## 特性
+
+- 支持数字人视频播放控制
+- WebSocket 实时通信
+- 音频播放处理
+- 事件监听和响应
+- 暗黑模式支持
+- 响应式设计
+
+## 安装
+
+```bash
+npm install virtual-human-cf
+```
+
+## 使用方法
+
+### 全局注册
+
+```javascript
+import { createApp } from 'vue';
+import App from './App.vue';
+import VirtualHumanCF from 'virtual-human-cf';
+
+const app = createApp(App);
+app.use(VirtualHumanCF);
+```
+
+### 按需导入
+
+```javascript
+import { VirtualHumanPersona, VirtualHumanEventAdapter } from 'virtual-human-cf';
+```
+
+## 组件说明
+
+### VirtualHumanPersona
+
+数字人视频展示组件，负责视频播放和状态控制。
+
+#### Props
+
+| 属性 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| videoSrc | String | - | 是 | 视频源 URL |
+| visible | Boolean | true | 否 | 是否可见 |
+| isPlaying | Boolean | false | 否 | 是否正在播放 |
+| muted | Boolean | true | 否 | 是否静音 |
+| isDark | Boolean | false | 否 | 是否暗黑模式 |
+| screenClientId | String | - | 否 | 屏幕客户端 ID |
+| wsUrl | String | - | 否 | WebSocket 连接地址 |
+
+#### Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| update:isPlaying | 播放状态变更 | 播放状态(Boolean) |
+| update:visible | 可见性变更 | 可见状态(Boolean) |
+| ended | 播放结束 | - |
+
+#### 示例
+
+```vue
+<template>
+  <VirtualHumanPersona
+    :video-src="videoUrl"
+    :is-playing="playing"
+    :muted="true"
+    :is-dark="false"
+    :screen-client-id="clientId"
+    :ws-url="websocketUrl"
+    @update:isPlaying="onPlayingChange"
+    @ended="onEnded"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { VirtualHumanPersona } from 'virtual-human-cf';
+
+const videoUrl = ref('https://example.com/video.mp4');
+const playing = ref(false);
+const clientId = ref('screen-123');
+const websocketUrl = ref('ws://localhost:8080/ws');
+
+const onPlayingChange = (isPlaying) => {
+  console.log('播放状态改变:', isPlaying);
+};
+
+const onEnded = () => {
+  console.log('播放结束');
+};
+</script>
+```
+
+### VirtualHumanEventAdapter
+
+数字人事件适配器组件，负责处理 WebSocket 消息、音频播放和各种交互事件。
+
+#### Props
+
+| 属性 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| screenClientId | String | - | 是 | 屏幕客户端 ID |
+| wsUrl | String | - | 是 | WebSocket 连接地址 |
+
+#### Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| connected | WebSocket 连接成功 | - |
+| highlight | 高亮大屏某区域 | 载荷数据 |
+| showDialog | 显示弹窗 | 载荷数据 |
+| end | 数字人对话结束 | 载荷数据 |
+| pause | 暂停播放 | 载荷数据 |
+| error | 错误事件 | 错误信息 |
+
+#### 示例
+
+```vue
+<template>
+  <VirtualHumanEventAdapter
+    :screen-client-id="clientId"
+    :ws-url="websocketUrl"
+    @connected="onConnected"
+    @highlight="onHighlight"
+    @showDialog="onShowDialog"
+    @end="onEnd"
+    @error="onError"
+  >
+    <div>其他内容</div>
+  </VirtualHumanEventAdapter>
+</template>
+
+<script setup>
+import { VirtualHumanEventAdapter } from 'virtual-human-cf';
+
+const clientId = 'screen-123';
+const websocketUrl = 'ws://localhost:8080/ws';
+
+const onConnected = () => {
+  console.log('WebSocket 连接成功');
+};
+
+const onHighlight = (payload) => {
+  console.log('高亮事件:', payload);
+};
+
+const onShowDialog = (payload) => {
+  console.log('显示弹窗:', payload);
+};
+
+const onEnd = (payload) => {
+  console.log('对话结束:', payload);
+};
+
+const onError = (error) => {
+  console.error('错误:', error);
+};
+</script>
+```
+
+## 完整示例
+
+以下是一个结合两个组件使用的完整示例：
+
+```vue
+<template>
+  <div class="container">
+    <VirtualHumanPersona
+      :video-src="videoUrl"
+      :is-playing="isPlaying"
+      :muted="true"
+      :is-dark="isDarkMode"
+      :screen-client-id="clientId"
+      :ws-url="websocketUrl"
+      @update:isPlaying="(val) => isPlaying = val"
+      @ended="onVideoEnded"
+    />
+    
+    <VirtualHumanEventAdapter
+      :screen-client-id="clientId"
+      :ws-url="websocketUrl"
+      @connected="onConnected"
+      @highlight="onHighlight"
+      @showDialog="onShowDialog"
+      @end="onEnd"
+      @error="onError"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { VirtualHumanPersona, VirtualHumanEventAdapter } from 'virtual-human-cf';
+
+const videoUrl = ref('/path/to/digital-human-video.mp4');
+const isPlaying = ref(false);
+const isDarkMode = ref(false);
+const clientId = ref('screen-123');
+const websocketUrl = ref('ws://localhost:8080/ws');
+
+const onConnected = () => {
+  console.log('连接到 WebSocket 服务器');
+};
+
+const onVideoEnded = () => {
+  console.log('视频播放结束');
+};
+
+const onHighlight = (payload) => {
+  console.log('收到高亮指令:', payload);
+};
+
+const onShowDialog = (payload) => {
+  console.log('显示对话框:', payload);
+};
+
+const onEnd = (payload) => {
+  console.log('数字人交互结束:', payload);
+  isPlaying.value = false;
+};
+
+const onError = (error) => {
+  console.error('发生错误:', error);
+};
+</script>
+```
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 构建项目
+npm run build
+```
+
+## 发布
+
+在发布之前，请确保按照 npm 包发布安全与流程规范操作：
+
+1. 确保项目已通过 `npm run build` 成功构建
+2. 检查 package.json 中版本号是否更新
+3. 登录 npm 账户并使用令牌认证
+4. 确保 registry 指向官方源
+
+## 许可证
+
+MIT

package/dist/style.css

@@ -1 +1 @@
-.fade-enter-active[data-v-288a71c0],.fade-leave-active[data-v-288a71c0]{transition:opacity .5s ease,transform .5s ease}.fade-enter-from[data-v-288a71c0],.fade-leave-to[data-v-288a71c0]{opacity:0;transform:translateY(10px)}.virtual-human-container[data-v-288a71c0]{position:relative;width:100%;max-width:400px;border-radius:1rem;overflow:hidden;box-shadow:0 10px 25px #0000001a;background:#fff;transition:background-color .3s ease}.virtual-human-container.is-dark[data-v-288a71c0]{background:#1f2937;box-shadow:0 10px 25px #00000080}.video-wrapper[data-v-288a71c0]{position:relative;width:100%;aspect-ratio:9 / 16;background:#000}.persona-video[data-v-288a71c0]{width:100%;height:100%;object-fit:cover}.overlay[data-v-288a71c0]{position:absolute;top:1rem;right:1rem;z-index:10}.status-badge[data-v-288a71c0]{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.status-badge.paused[data-v-288a71c0]{background:#ef4444cc}.status-badge.playing[data-v-288a71c0]{background:#22c55ecc}.dot[data-v-288a71c0]{width:6px;height:6px;border-radius:50%;background-color:#fff}@keyframes pulse-288a71c0{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse[data-v-288a71c0]{animation:pulse-288a71c0 2s cubic-bezier(.4,0,.6,1) infinite}
+.fade-enter-active[data-v-2fb9caca],.fade-leave-active[data-v-2fb9caca]{transition:opacity .5s ease,transform .5s ease}.fade-enter-from[data-v-2fb9caca],.fade-leave-to[data-v-2fb9caca]{opacity:0;transform:translateY(10px)}.virtual-human-container[data-v-2fb9caca]{position:relative;width:100%;max-width:400px;border-radius:1rem;overflow:hidden;box-shadow:0 10px 25px #0000001a;background:#fff;transition:background-color .3s ease}.virtual-human-container.is-dark[data-v-2fb9caca]{background:#1f2937;box-shadow:0 10px 25px #00000080}.video-wrapper[data-v-2fb9caca]{position:relative;width:100%;aspect-ratio:9 / 16;background:#000;overflow:visible}.persona-video[data-v-2fb9caca]{width:100%;height:100%;object-fit:cover;transform-origin:center;transition:transform .1s ease-out}.resize-handle[data-v-2fb9caca]{position:absolute;width:20px;height:20px;background:#00000080;border:2px solid rgba(255,255,255,.8);border-radius:4px;cursor:pointer;z-index:20;transition:background .2s,border-color .2s}.resize-handle[data-v-2fb9caca]:hover{background:#000000b3;border-color:#fff}.resize-handle.top-left[data-v-2fb9caca]{top:-10px;left:-10px;cursor:nwse-resize}.resize-handle.top-right[data-v-2fb9caca]{top:-10px;right:-10px;cursor:nesw-resize}.resize-handle.bottom-left[data-v-2fb9caca]{bottom:-10px;left:-10px;cursor:nesw-resize}.resize-handle.bottom-right[data-v-2fb9caca]{bottom:-10px;right:-10px;cursor:nwse-resize}.overlay[data-v-2fb9caca]{position:absolute;top:1rem;right:1rem;z-index:10}.status-badge[data-v-2fb9caca]{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.status-badge.paused[data-v-2fb9caca]{background:#ef4444cc}.status-badge.playing[data-v-2fb9caca]{background:#22c55ecc}.dot[data-v-2fb9caca]{width:6px;height:6px;border-radius:50%;background-color:#fff}@keyframes pulse-2fb9caca{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse[data-v-2fb9caca]{animation:pulse-2fb9caca 2s cubic-bezier(.4,0,.6,1) infinite}

package/dist/virtual-human-cf.es.js

@@ -1,166 +1,216 @@
-import { defineComponent as H, ref as g, watch as w, onMounted as I, onUnmounted as _, openBlock as h, createBlock as E, Transition as x, withCtx as B, createElementBlock as A, normalizeClass as W, createElementVNode as y, createTextVNode as U, createCommentVNode as $, renderSlot as D } from "vue";
-const F = { class: "video-wrapper" }, T = ["src", "muted"], q = { class: "overlay" }, M = {
+import { defineComponent as T, ref as v, watch as z, onMounted as W, onUnmounted as X, openBlock as h, createBlock as D, Transition as F, withCtx as q, createElementBlock as b, normalizeClass as N, createElementVNode as H, normalizeStyle as O, createCommentVNode as I, createTextVNode as L, renderSlot as J } from "vue";
+const j = ["src", "muted"], G = { class: "overlay" }, K = {
   key: 0,
   class: "status-badge paused"
-}, N = {
+}, Q = {
   key: 1,
   class: "status-badge playing"
-}, R = /* @__PURE__ */ H({
+}, Z = /* @__PURE__ */ T({
   __name: "VirtualHumanPersona",
   props: {
+    // 视频源URL
     videoSrc: {
       type: String,
       required: !0
     },
+    // 是否可见
     visible: {
       type: Boolean,
-      default: !0
+      default: !1
     },
+    // 是否自动播放
     isPlaying: {
       type: Boolean,
       default: !1
     },
+    // 是否静音
     muted: {
       type: Boolean,
       default: !0
       // Auto-play policies usually require muted
     },
+    // 是否暗黑模式
     isDark: {
       type: Boolean,
       default: !1
     },
+    // 屏幕客户端ID
     screenClientId: {
       type: String,
       required: !1
     },
+    // WebSocket URL
     wsUrl: {
       type: String,
       required: !1
     }
   },
   emits: ["update:isPlaying", "ended", "update:visible"],
-  setup(r, { emit: p }) {
-    const e = r, s = p, o = g(null), c = g(null), n = g(!1), u = () => {
-      if (c.value && c.value.close(), !(!e.wsUrl || !e.screenClientId))
+  setup(i, { emit: P }) {
+    const t = i, s = P, l = v(null), k = v(null), n = v(null), m = v(!1), V = v(1), E = v(!1), p = v(null), C = v(0), x = v(0), o = v(1), u = () => {
+      if (n.value && n.value.close(), !(!t.wsUrl || !t.screenClientId))
         try {
-          const i = new URL(e.wsUrl);
-          i.searchParams.append("sessionId", e.screenClientId + "-persona"), c.value = new WebSocket(i.toString()), c.value.onopen = () => {
-            n.value = !0, console.log(`[VirtualHumanPersona] Connected to ${e.wsUrl} for session ${e.screenClientId}-persona`);
-          }, c.value.onmessage = (t) => {
+          const r = new URL(t.wsUrl);
+          r.searchParams.append("sessionId", t.screenClientId + "-persona"), n.value = new WebSocket(r.toString()), n.value.onopen = () => {
+            m.value = !0, console.log(`[VirtualHumanPersona] Connected to ${t.wsUrl} for session ${t.screenClientId}-persona`);
+          }, n.value.onmessage = (e) => {
             try {
-              const a = JSON.parse(t.data);
-              b(a);
+              const a = JSON.parse(e.data);
+              c(a);
             } catch (a) {
-              console.error("[VirtualHumanPersona] Failed to parse message:", t.data, a);
+              console.error("[VirtualHumanPersona] Failed to parse message:", e.data, a);
             }
-          }, c.value.onerror = (t) => {
-            console.error("[VirtualHumanPersona] WebSocket error:", t);
-          }, c.value.onclose = () => {
-            n.value = !1, console.log("[VirtualHumanPersona] WebSocket disconnected");
+          }, n.value.onerror = (e) => {
+            console.error("[VirtualHumanPersona] WebSocket error:", e);
+          }, n.value.onclose = () => {
+            m.value = !1, console.log("[VirtualHumanPersona] WebSocket disconnected");
           };
-        } catch (i) {
-          console.error("[VirtualHumanPersona] Failed to initialize WebSocket:", i);
+        } catch (r) {
+          console.error("[VirtualHumanPersona] Failed to initialize WebSocket:", r);
         }
-    }, b = (i) => {
-      const { type: t, action: a } = i;
-      t === "control" && (a === "play" ? (s("update:isPlaying", !0), s("update:visible", !0)) : a === "pause" ? (s("update:isPlaying", !1), s("update:visible", !1)) : a === "stop" && (s("update:isPlaying", !1), s("update:visible", !1), o.value && (o.value.currentTime = 0)));
+    }, c = (r) => {
+      const { type: e, action: a } = r;
+      e === "control" && (a === "play" ? (s("update:isPlaying", !0), s("update:visible", !0)) : a === "pause" ? s("update:isPlaying", !1) : a === "stop" && (s("update:isPlaying", !1), s("update:visible", !1), l.value && (l.value.currentTime = 0)));
     };
-    w(() => e.screenClientId, () => {
-      e.screenClientId && e.wsUrl && u();
-    }), w(() => e.wsUrl, () => {
-      e.screenClientId && e.wsUrl && u();
-    }), w(() => e.isPlaying, (i) => {
-      o.value && (i ? o.value.play().catch((t) => console.error("Video play failed:", t)) : o.value.pause());
+    z(() => t.screenClientId, () => {
+      t.screenClientId && t.wsUrl && u();
+    }), z(() => t.wsUrl, () => {
+      t.screenClientId && t.wsUrl && u();
+    }), z(() => t.isPlaying, (r) => {
+      l.value && (r ? l.value.play().catch((e) => console.error("Video play failed:", e)) : l.value.pause());
     });
-    const k = () => {
-      e.isPlaying || s("update:isPlaying", !0);
-    }, C = () => {
-      e.isPlaying && s("update:isPlaying", !1);
-    }, v = () => {
+    const w = () => {
+      t.isPlaying || s("update:isPlaying", !0);
+    }, g = () => {
+      t.isPlaying && s("update:isPlaying", !1);
+    }, A = () => {
       s("update:isPlaying", !1), s("ended");
+    }, f = (r, e) => {
+      E.value = !0, p.value = r, o.value = V.value;
+      const a = "clientX" in e ? e.clientX : e.touches[0].clientX, S = "clientY" in e ? e.clientY : e.touches[0].clientY;
+      C.value = a, x.value = S, document.addEventListener("mousemove", y), document.addEventListener("mouseup", d), document.addEventListener("touchmove", y), document.addEventListener("touchend", d);
+    }, y = (r) => {
+      if (!E.value || !k.value) return;
+      const e = "clientX" in r ? r.clientX : r.touches[0].clientX, a = "clientY" in r ? r.clientY : r.touches[0].clientY, S = e - C.value, M = a - x.value, B = k.value.getBoundingClientRect(), Y = 0.5, $ = 2;
+      let U = o.value;
+      const R = Math.min(B.width, B.height);
+      p.value === "bottom-right" ? U = o.value + (S + M) / R : p.value === "bottom-left" ? U = o.value + (-S + M) / R : p.value === "top-right" ? U = o.value + (S - M) / R : p.value === "top-left" && (U = o.value + (-S - M) / R), V.value = Math.max(Y, Math.min($, U));
+    }, d = () => {
+      E.value = !1, p.value = null, document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", d), document.removeEventListener("touchmove", y), document.removeEventListener("touchend", d);
     };
-    return I(() => {
-      e.isPlaying && o.value && o.value.play().catch((i) => console.error("Video play failed:", i)), e.screenClientId && e.wsUrl && u();
-    }), _(() => {
-      c.value && c.value.close();
-    }), (i, t) => (h(), E(x, { name: "fade" }, {
-      default: B(() => [
-        r.visible ? (h(), A("div", {
+    return W(() => {
+      t.isPlaying && l.value && l.value.play().catch((r) => console.error("Video play failed:", r)), t.screenClientId && t.wsUrl && u();
+    }), X(() => {
+      n.value && n.value.close();
+    }), (r, e) => (h(), D(F, { name: "fade" }, {
+      default: q(() => [
+        i.visible ? (h(), b("div", {
           key: 0,
-          class: W(["virtual-human-container", { "is-dark": r.isDark }])
+          class: N(["virtual-human-container", { "is-dark": i.isDark }])
         }, [
-          y("div", F, [
-            y("video", {
+          H("div", {
+            class: "video-wrapper",
+            ref_key: "wrapperRef",
+            ref: k
+          }, [
+            H("video", {
               ref_key: "videoRef",
-              ref: o,
-              src: r.videoSrc,
+              ref: l,
+              src: i.videoSrc,
               class: "persona-video",
-              muted: r.muted,
+              muted: i.muted,
               playsinline: "",
               loop: "",
-              onPlay: k,
-              onPause: C,
-              onEnded: v
-            }, null, 40, T),
-            y("div", q, [
-              r.isPlaying ? (h(), A("div", N, [...t[1] || (t[1] = [
-                y("span", { class: "dot animate-pulse" }, null, -1),
-                U(" 播放中 ", -1)
-              ])])) : (h(), A("div", M, [...t[0] || (t[0] = [
-                y("span", { class: "dot" }, null, -1),
-                U(" 暂停中 ", -1)
+              onPlay: w,
+              onPause: g,
+              onEnded: A,
+              style: O({ transform: `scale(${V.value})` })
+            }, null, 44, j),
+            i.visible ? (h(), b("div", {
+              key: 0,
+              class: "resize-handle top-left",
+              onMousedown: e[0] || (e[0] = (a) => f("top-left", a)),
+              onTouchstart: e[1] || (e[1] = (a) => f("top-left", a))
+            }, null, 32)) : I("", !0),
+            i.visible ? (h(), b("div", {
+              key: 1,
+              class: "resize-handle top-right",
+              onMousedown: e[2] || (e[2] = (a) => f("top-right", a)),
+              onTouchstart: e[3] || (e[3] = (a) => f("top-right", a))
+            }, null, 32)) : I("", !0),
+            i.visible ? (h(), b("div", {
+              key: 2,
+              class: "resize-handle bottom-left",
+              onMousedown: e[4] || (e[4] = (a) => f("bottom-left", a)),
+              onTouchstart: e[5] || (e[5] = (a) => f("bottom-left", a))
+            }, null, 32)) : I("", !0),
+            i.visible ? (h(), b("div", {
+              key: 3,
+              class: "resize-handle bottom-right",
+              onMousedown: e[6] || (e[6] = (a) => f("bottom-right", a)),
+              onTouchstart: e[7] || (e[7] = (a) => f("bottom-right", a))
+            }, null, 32)) : I("", !0),
+            H("div", G, [
+              i.isPlaying ? (h(), b("div", Q, [...e[9] || (e[9] = [
+                H("span", { class: "dot animate-pulse" }, null, -1),
+                L(" 播放中 ", -1)
+              ])])) : (h(), b("div", K, [...e[8] || (e[8] = [
+                H("span", { class: "dot" }, null, -1),
+                L(" 暂停中 ", -1)
               ])]))
             ])
-          ])
-        ], 2)) : $("", !0)
+          ], 512)
+        ], 2)) : I("", !0)
       ]),
       _: 1
     }));
   }
-}), z = (r, p) => {
-  const e = r.__vccOpts || r;
-  for (const [s, o] of p)
-    e[s] = o;
-  return e;
-}, O = /* @__PURE__ */ z(R, [["__scopeId", "data-v-288a71c0"]]), J = /* @__PURE__ */ H({
+}), _ = (i, P) => {
+  const t = i.__vccOpts || i;
+  for (const [s, l] of P)
+    t[s] = l;
+  return t;
+}, ee = /* @__PURE__ */ _(Z, [["__scopeId", "data-v-2fb9caca"]]), te = /* @__PURE__ */ T({
   __name: "VirtualHumanEventAdapter",
   props: {
+    // 屏幕客户端ID
     screenClientId: {
       type: String,
       required: !0
     },
+    // WebSocket URL
     wsUrl: {
       type: String,
       required: !0
     }
   },
   emits: ["highlight", "showDialog", "end", "pause", "connected", "error"],
-  setup(r, { emit: p }) {
-    const e = r, s = p, o = g(null), c = g(!1);
-    let n = null, u = 0;
-    const b = () => {
+  setup(i, { emit: P }) {
+    const t = i, s = P, l = v(null), k = v(!1);
+    let n = null, m = 0;
+    const V = () => {
       n || (n = new (window.AudioContext || window.webkitAudioContext)({
         sampleRate: 24e3
       })), n.state === "suspended" && n.resume();
-    }, k = (t) => {
-      if (b(), !!n)
+    }, E = (o) => {
+      if (V(), !!n)
         try {
-          const a = window.atob(t), l = a.length, m = new Uint8Array(l);
-          for (let d = 0; d < l; d++)
-            m[d] = a.charCodeAt(d);
-          const f = new Int16Array(m.buffer), P = new Float32Array(f.length);
-          for (let d = 0; d < f.length; d++)
-            P[d] = f[d] / 32768;
-          const S = n.createBuffer(1, P.length, 24e3);
-          S.getChannelData(0).set(P);
-          const V = n.createBufferSource();
-          V.buffer = S, V.connect(n.destination), u < n.currentTime && (u = n.currentTime), V.start(u), u += S.duration;
-        } catch (a) {
-          console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:", a);
+          const u = window.atob(o), c = u.length, w = new Uint8Array(c);
+          for (let d = 0; d < c; d++)
+            w[d] = u.charCodeAt(d);
+          const g = new Int16Array(w.buffer), A = new Float32Array(g.length);
+          for (let d = 0; d < g.length; d++)
+            A[d] = g[d] / 32768;
+          const f = n.createBuffer(1, A.length, 24e3);
+          f.getChannelData(0).set(A);
+          const y = n.createBufferSource();
+          y.buffer = f, y.connect(n.destination), m < n.currentTime && (m = n.currentTime), y.start(m), m += f.duration;
+        } catch (u) {
+          console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:", u);
         }
-    }, C = (t) => {
+    }, p = (o) => {
       if (n)
-        switch (t) {
+        switch (o) {
           case "play":
             n.state === "suspended" && n.resume();
             break;
@@ -168,78 +218,78 @@ const F = { class: "video-wrapper" }, T = ["src", "muted"], q = { class: "overla
             n.state === "running" && n.suspend();
             break;
           case "stop":
-            n.close(), n = null, u = 0;
+            n.close(), n = null, m = 0;
             break;
           default:
-            console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${t}`);
+            console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${o}`);
         }
-    }, v = () => {
-      o.value && o.value.close();
+    }, C = () => {
+      l.value && l.value.close();
       try {
-        const t = new URL(e.wsUrl);
-        t.searchParams.append("sessionId", e.screenClientId + "-event"), o.value = new WebSocket(t.toString()), o.value.onopen = () => {
-          c.value = !0, s("connected"), console.log(`[VirtualHumanEventAdapter] Connected to ${e.wsUrl} for session ${e.screenClientId}-event`);
-        }, o.value.onmessage = (a) => {
+        const o = new URL(t.wsUrl);
+        o.searchParams.append("sessionId", t.screenClientId + "-event"), l.value = new WebSocket(o.toString()), l.value.onopen = () => {
+          k.value = !0, s("connected"), console.log(`[VirtualHumanEventAdapter] Connected to ${t.wsUrl} for session ${t.screenClientId}-event`);
+        }, l.value.onmessage = (u) => {
           try {
-            const l = JSON.parse(a.data);
-            i(l);
-          } catch (l) {
-            console.error("[VirtualHumanEventAdapter] Failed to parse message:", a.data, l);
+            const c = JSON.parse(u.data);
+            x(c);
+          } catch (c) {
+            console.error("[VirtualHumanEventAdapter] Failed to parse message:", u.data, c);
           }
-        }, o.value.onerror = (a) => {
-          console.error("[VirtualHumanEventAdapter] WebSocket error:", a), s("error", a);
-        }, o.value.onclose = () => {
-          c.value = !1, console.log("[VirtualHumanEventAdapter] WebSocket disconnected");
+        }, l.value.onerror = (u) => {
+          console.error("[VirtualHumanEventAdapter] WebSocket error:", u), s("error", u);
+        }, l.value.onclose = () => {
+          k.value = !1, console.log("[VirtualHumanEventAdapter] WebSocket disconnected");
         };
-      } catch (t) {
-        console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:", t), s("error", t);
+      } catch (o) {
+        console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:", o), s("error", o);
       }
-    }, i = (t) => {
-      const { type: a, payload: l, action: m } = t;
-      switch (a) {
+    }, x = (o) => {
+      const { type: u, payload: c, action: w } = o;
+      switch (console.log("msgmsg", o), u) {
         case "audio":
-          const f = (l == null ? void 0 : l.data) || t.data;
-          f && k(f);
+          const g = (c == null ? void 0 : c.data) || o.data;
+          g && E(g);
           break;
         case "dialog_event":
-          t.event && s(t.event, t.params);
+          o.event && s(o.event, o.params);
           break;
         case "control":
-          m && C(m);
+          w && p(w);
           break;
         case "highlight":
-          s("highlight", l);
+          s("highlight", c);
           break;
         case "showDialog":
-          s("showDialog", l);
+          s("showDialog", c);
           break;
         case "end":
-          s("end", l);
+          s("end", c);
           break;
         case "pause":
-          s("pause", l);
+          s("pause", c);
           break;
         default:
-          console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${a}`);
+          console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${u}`);
       }
     };
-    return w(() => e.screenClientId, () => {
-      e.screenClientId && e.wsUrl && v();
-    }), w(() => e.wsUrl, () => {
-      e.screenClientId && e.wsUrl && v();
-    }), I(() => {
-      e.screenClientId && e.wsUrl && v();
-    }), _(() => {
-      o.value && o.value.close(), n && n.close();
-    }), (t, a) => D(t.$slots, "default");
+    return z(() => t.screenClientId, () => {
+      t.screenClientId && t.wsUrl && C();
+    }), z(() => t.wsUrl, () => {
+      t.screenClientId && t.wsUrl && C();
+    }), W(() => {
+      t.screenClientId && t.wsUrl && C();
+    }), X(() => {
+      l.value && l.value.close(), n && n.close();
+    }), (o, u) => J(o.$slots, "default");
   }
-}), L = (r) => {
-  r.component("VirtualHumanPersona", O), r.component("VirtualHumanEventAdapter", J);
-}, G = {
-  install: L
+}), ne = (i) => {
+  i.component("VirtualHumanPersona", ee), i.component("VirtualHumanEventAdapter", te);
+}, oe = {
+  install: ne
 };
 export {
-  J as VirtualHumanEventAdapter,
-  O as VirtualHumanPersona,
-  G as default
+  te as VirtualHumanEventAdapter,
+  ee as VirtualHumanPersona,
+  oe as default
 };

package/dist/virtual-human-cf.umd.js

@@ -1 +1 @@
-(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.VirtualHumanCf={},u.Vue))})(this,function(u,e){"use strict";const U={class:"video-wrapper"},_=["src","muted"],A={class:"overlay"},E={key:0,class:"status-badge paused"},H={key:1,class:"status-badge playing"},P=((l,y)=>{const t=l.__vccOpts||l;for(const[s,r]of y)t[s]=r;return t})(e.defineComponent({__name:"VirtualHumanPersona",props:{videoSrc:{type:String,required:!0},visible:{type:Boolean,default:!0},isPlaying:{type:Boolean,default:!1},muted:{type:Boolean,default:!0},isDark:{type:Boolean,default:!1},screenClientId:{type:String,required:!1},wsUrl:{type:String,required:!1}},emits:["update:isPlaying","ended","update:visible"],setup(l,{emit:y}){const t=l,s=y,r=e.ref(null),d=e.ref(null),a=e.ref(!1),f=()=>{if(d.value&&d.value.close(),!(!t.wsUrl||!t.screenClientId))try{const c=new URL(t.wsUrl);c.searchParams.append("sessionId",t.screenClientId+"-persona"),d.value=new WebSocket(c.toString()),d.value.onopen=()=>{a.value=!0,console.log(`[VirtualHumanPersona] Connected to ${t.wsUrl} for session ${t.screenClientId}-persona`)},d.value.onmessage=n=>{try{const o=JSON.parse(n.data);w(o)}catch(o){console.error("[VirtualHumanPersona] Failed to parse message:",n.data,o)}},d.value.onerror=n=>{console.error("[VirtualHumanPersona] WebSocket error:",n)},d.value.onclose=()=>{a.value=!1,console.log("[VirtualHumanPersona] WebSocket disconnected")}}catch(c){console.error("[VirtualHumanPersona] Failed to initialize WebSocket:",c)}},w=c=>{const{type:n,action:o}=c;n==="control"&&(o==="play"?(s("update:isPlaying",!0),s("update:visible",!0)):o==="pause"?(s("update:isPlaying",!1),s("update:visible",!1)):o==="stop"&&(s("update:isPlaying",!1),s("update:visible",!1),r.value&&(r.value.currentTime=0)))};e.watch(()=>t.screenClientId,()=>{t.screenClientId&&t.wsUrl&&f()}),e.watch(()=>t.wsUrl,()=>{t.screenClientId&&t.wsUrl&&f()}),e.watch(()=>t.isPlaying,c=>{r.value&&(c?r.value.play().catch(n=>console.error("Video play failed:",n)):r.value.pause())});const k=()=>{t.isPlaying||s("update:isPlaying",!0)},b=()=>{t.isPlaying&&s("update:isPlaying",!1)},g=()=>{s("update:isPlaying",!1),s("ended")};return e.onMounted(()=>{t.isPlaying&&r.value&&r.value.play().catch(c=>console.error("Video play failed:",c)),t.screenClientId&&t.wsUrl&&f()}),e.onUnmounted(()=>{d.value&&d.value.close()}),(c,n)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[l.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["virtual-human-container",{"is-dark":l.isDark}])},[e.createElementVNode("div",U,[e.createElementVNode("video",{ref_key:"videoRef",ref:r,src:l.videoSrc,class:"persona-video",muted:l.muted,playsinline:"",loop:"",onPlay:k,onPause:b,onEnded:g},null,40,_),e.createElementVNode("div",A,[l.isPlaying?(e.openBlock(),e.createElementBlock("div",H,[...n[1]||(n[1]=[e.createElementVNode("span",{class:"dot animate-pulse"},null,-1),e.createTextVNode(" 播放中 ",-1)])])):(e.openBlock(),e.createElementBlock("div",E,[...n[0]||(n[0]=[e.createElementVNode("span",{class:"dot"},null,-1),e.createTextVNode(" 暂停中 ",-1)])]))])])],2)):e.createCommentVNode("",!0)]),_:1}))}}),[["__scopeId","data-v-288a71c0"]]),S=e.defineComponent({__name:"VirtualHumanEventAdapter",props:{screenClientId:{type:String,required:!0},wsUrl:{type:String,required:!0}},emits:["highlight","showDialog","end","pause","connected","error"],setup(l,{emit:y}){const t=l,s=y,r=e.ref(null),d=e.ref(!1);let a=null,f=0;const w=()=>{a||(a=new(window.AudioContext||window.webkitAudioContext)({sampleRate:24e3})),a.state==="suspended"&&a.resume()},k=n=>{if(w(),!!a)try{const o=window.atob(n),i=o.length,h=new Uint8Array(i);for(let p=0;p<i;p++)h[p]=o.charCodeAt(p);const m=new Int16Array(h.buffer),v=new Float32Array(m.length);for(let p=0;p<m.length;p++)v[p]=m[p]/32768;const C=a.createBuffer(1,v.length,24e3);C.getChannelData(0).set(v);const V=a.createBufferSource();V.buffer=C,V.connect(a.destination),f<a.currentTime&&(f=a.currentTime),V.start(f),f+=C.duration}catch(o){console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:",o)}},b=n=>{if(a)switch(n){case"play":a.state==="suspended"&&a.resume();break;case"pause":a.state==="running"&&a.suspend();break;case"stop":a.close(),a=null,f=0;break;default:console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${n}`)}},g=()=>{r.value&&r.value.close();try{const n=new URL(t.wsUrl);n.searchParams.append("sessionId",t.screenClientId+"-event"),r.value=new WebSocket(n.toString()),r.value.onopen=()=>{d.value=!0,s("connected"),console.log(`[VirtualHumanEventAdapter] Connected to ${t.wsUrl} for session ${t.screenClientId}-event`)},r.value.onmessage=o=>{try{const i=JSON.parse(o.data);c(i)}catch(i){console.error("[VirtualHumanEventAdapter] Failed to parse message:",o.data,i)}},r.value.onerror=o=>{console.error("[VirtualHumanEventAdapter] WebSocket error:",o),s("error",o)},r.value.onclose=()=>{d.value=!1,console.log("[VirtualHumanEventAdapter] WebSocket disconnected")}}catch(n){console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:",n),s("error",n)}},c=n=>{const{type:o,payload:i,action:h}=n;switch(o){case"audio":const m=(i==null?void 0:i.data)||n.data;m&&k(m);break;case"dialog_event":n.event&&s(n.event,n.params);break;case"control":h&&b(h);break;case"highlight":s("highlight",i);break;case"showDialog":s("showDialog",i);break;case"end":s("end",i);break;case"pause":s("pause",i);break;default:console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${o}`)}};return e.watch(()=>t.screenClientId,()=>{t.screenClientId&&t.wsUrl&&g()}),e.watch(()=>t.wsUrl,()=>{t.screenClientId&&t.wsUrl&&g()}),e.onMounted(()=>{t.screenClientId&&t.wsUrl&&g()}),e.onUnmounted(()=>{r.value&&r.value.close(),a&&a.close()}),(n,o)=>e.renderSlot(n.$slots,"default")}}),I={install:l=>{l.component("VirtualHumanPersona",P),l.component("VirtualHumanEventAdapter",S)}};u.VirtualHumanEventAdapter=S,u.VirtualHumanPersona=P,u.default=I,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.VirtualHumanCf={},p.Vue))})(this,function(p,e){"use strict";const z=["src","muted"],N={class:"overlay"},T={key:0,class:"status-badge paused"},R={key:1,class:"status-badge playing"},I=((c,V)=>{const n=c.__vccOpts||c;for(const[s,r]of V)n[s]=r;return n})(e.defineComponent({__name:"VirtualHumanPersona",props:{videoSrc:{type:String,required:!0},visible:{type:Boolean,default:!1},isPlaying:{type:Boolean,default:!1},muted:{type:Boolean,default:!0},isDark:{type:Boolean,default:!1},screenClientId:{type:String,required:!1},wsUrl:{type:String,required:!1}},emits:["update:isPlaying","ended","update:visible"],setup(c,{emit:V}){const n=c,s=V,r=e.ref(null),v=e.ref(null),o=e.ref(null),g=e.ref(!1),E=e.ref(1),S=e.ref(!1),h=e.ref(null),b=e.ref(0),H=e.ref(0),l=e.ref(1),d=()=>{if(o.value&&o.value.close(),!(!n.wsUrl||!n.screenClientId))try{const i=new URL(n.wsUrl);i.searchParams.append("sessionId",n.screenClientId+"-persona"),o.value=new WebSocket(i.toString()),o.value.onopen=()=>{g.value=!0,console.log(`[VirtualHumanPersona] Connected to ${n.wsUrl} for session ${n.screenClientId}-persona`)},o.value.onmessage=t=>{try{const a=JSON.parse(t.data);u(a)}catch(a){console.error("[VirtualHumanPersona] Failed to parse message:",t.data,a)}},o.value.onerror=t=>{console.error("[VirtualHumanPersona] WebSocket error:",t)},o.value.onclose=()=>{g.value=!1,console.log("[VirtualHumanPersona] WebSocket disconnected")}}catch(i){console.error("[VirtualHumanPersona] Failed to initialize WebSocket:",i)}},u=i=>{const{type:t,action:a}=i;t==="control"&&(a==="play"?(s("update:isPlaying",!0),s("update:visible",!0)):a==="pause"?s("update:isPlaying",!1):a==="stop"&&(s("update:isPlaying",!1),s("update:visible",!1),r.value&&(r.value.currentTime=0)))};e.watch(()=>n.screenClientId,()=>{n.screenClientId&&n.wsUrl&&d()}),e.watch(()=>n.wsUrl,()=>{n.screenClientId&&n.wsUrl&&d()}),e.watch(()=>n.isPlaying,i=>{r.value&&(i?r.value.play().catch(t=>console.error("Video play failed:",t)):r.value.pause())});const k=()=>{n.isPlaying||s("update:isPlaying",!0)},y=()=>{n.isPlaying&&s("update:isPlaying",!1)},P=()=>{s("update:isPlaying",!1),s("ended")},m=(i,t)=>{S.value=!0,h.value=i,l.value=E.value;const a="clientX"in t?t.clientX:t.touches[0].clientX,C="clientY"in t?t.clientY:t.touches[0].clientY;b.value=a,H.value=C,document.addEventListener("mousemove",w),document.addEventListener("mouseup",f),document.addEventListener("touchmove",w),document.addEventListener("touchend",f)},w=i=>{if(!S.value||!v.value)return;const t="clientX"in i?i.clientX:i.touches[0].clientX,a="clientY"in i?i.clientY:i.touches[0].clientY,C=t-b.value,U=a-H.value,x=v.value.getBoundingClientRect(),W=.5,X=2;let B=l.value;const A=Math.min(x.width,x.height);h.value==="bottom-right"?B=l.value+(C+U)/A:h.value==="bottom-left"?B=l.value+(-C+U)/A:h.value==="top-right"?B=l.value+(C-U)/A:h.value==="top-left"&&(B=l.value+(-C-U)/A),E.value=Math.max(W,Math.min(X,B))},f=()=>{S.value=!1,h.value=null,document.removeEventListener("mousemove",w),document.removeEventListener("mouseup",f),document.removeEventListener("touchmove",w),document.removeEventListener("touchend",f)};return e.onMounted(()=>{n.isPlaying&&r.value&&r.value.play().catch(i=>console.error("Video play failed:",i)),n.screenClientId&&n.wsUrl&&d()}),e.onUnmounted(()=>{o.value&&o.value.close()}),(i,t)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[c.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["virtual-human-container",{"is-dark":c.isDark}])},[e.createElementVNode("div",{class:"video-wrapper",ref_key:"wrapperRef",ref:v},[e.createElementVNode("video",{ref_key:"videoRef",ref:r,src:c.videoSrc,class:"persona-video",muted:c.muted,playsinline:"",loop:"",onPlay:k,onPause:y,onEnded:P,style:e.normalizeStyle({transform:`scale(${E.value})`})},null,44,z),c.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"resize-handle top-left",onMousedown:t[0]||(t[0]=a=>m("top-left",a)),onTouchstart:t[1]||(t[1]=a=>m("top-left",a))},null,32)):e.createCommentVNode("",!0),c.visible?(e.openBlock(),e.createElementBlock("div",{key:1,class:"resize-handle top-right",onMousedown:t[2]||(t[2]=a=>m("top-right",a)),onTouchstart:t[3]||(t[3]=a=>m("top-right",a))},null,32)):e.createCommentVNode("",!0),c.visible?(e.openBlock(),e.createElementBlock("div",{key:2,class:"resize-handle bottom-left",onMousedown:t[4]||(t[4]=a=>m("bottom-left",a)),onTouchstart:t[5]||(t[5]=a=>m("bottom-left",a))},null,32)):e.createCommentVNode("",!0),c.visible?(e.openBlock(),e.createElementBlock("div",{key:3,class:"resize-handle bottom-right",onMousedown:t[6]||(t[6]=a=>m("bottom-right",a)),onTouchstart:t[7]||(t[7]=a=>m("bottom-right",a))},null,32)):e.createCommentVNode("",!0),e.createElementVNode("div",N,[c.isPlaying?(e.openBlock(),e.createElementBlock("div",R,[...t[9]||(t[9]=[e.createElementVNode("span",{class:"dot animate-pulse"},null,-1),e.createTextVNode(" 播放中 ",-1)])])):(e.openBlock(),e.createElementBlock("div",T,[...t[8]||(t[8]=[e.createElementVNode("span",{class:"dot"},null,-1),e.createTextVNode(" 暂停中 ",-1)])]))])],512)],2)):e.createCommentVNode("",!0)]),_:1}))}}),[["__scopeId","data-v-2fb9caca"]]),M=e.defineComponent({__name:"VirtualHumanEventAdapter",props:{screenClientId:{type:String,required:!0},wsUrl:{type:String,required:!0}},emits:["highlight","showDialog","end","pause","connected","error"],setup(c,{emit:V}){const n=c,s=V,r=e.ref(null),v=e.ref(!1);let o=null,g=0;const E=()=>{o||(o=new(window.AudioContext||window.webkitAudioContext)({sampleRate:24e3})),o.state==="suspended"&&o.resume()},S=l=>{if(E(),!!o)try{const d=window.atob(l),u=d.length,k=new Uint8Array(u);for(let f=0;f<u;f++)k[f]=d.charCodeAt(f);const y=new Int16Array(k.buffer),P=new Float32Array(y.length);for(let f=0;f<y.length;f++)P[f]=y[f]/32768;const m=o.createBuffer(1,P.length,24e3);m.getChannelData(0).set(P);const w=o.createBufferSource();w.buffer=m,w.connect(o.destination),g<o.currentTime&&(g=o.currentTime),w.start(g),g+=m.duration}catch(d){console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:",d)}},h=l=>{if(o)switch(l){case"play":o.state==="suspended"&&o.resume();break;case"pause":o.state==="running"&&o.suspend();break;case"stop":o.close(),o=null,g=0;break;default:console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${l}`)}},b=()=>{r.value&&r.value.close();try{const l=new URL(n.wsUrl);l.searchParams.append("sessionId",n.screenClientId+"-event"),r.value=new WebSocket(l.toString()),r.value.onopen=()=>{v.value=!0,s("connected"),console.log(`[VirtualHumanEventAdapter] Connected to ${n.wsUrl} for session ${n.screenClientId}-event`)},r.value.onmessage=d=>{try{const u=JSON.parse(d.data);H(u)}catch(u){console.error("[VirtualHumanEventAdapter] Failed to parse message:",d.data,u)}},r.value.onerror=d=>{console.error("[VirtualHumanEventAdapter] WebSocket error:",d),s("error",d)},r.value.onclose=()=>{v.value=!1,console.log("[VirtualHumanEventAdapter] WebSocket disconnected")}}catch(l){console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:",l),s("error",l)}},H=l=>{const{type:d,payload:u,action:k}=l;switch(console.log("msgmsg",l),d){case"audio":const y=(u==null?void 0:u.data)||l.data;y&&S(y);break;case"dialog_event":l.event&&s(l.event,l.params);break;case"control":k&&h(k);break;case"highlight":s("highlight",u);break;case"showDialog":s("showDialog",u);break;case"end":s("end",u);break;case"pause":s("pause",u);break;default:console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${d}`)}};return e.watch(()=>n.screenClientId,()=>{n.screenClientId&&n.wsUrl&&b()}),e.watch(()=>n.wsUrl,()=>{n.screenClientId&&n.wsUrl&&b()}),e.onMounted(()=>{n.screenClientId&&n.wsUrl&&b()}),e.onUnmounted(()=>{r.value&&r.value.close(),o&&o.close()}),(l,d)=>e.renderSlot(l.$slots,"default")}}),L={install:c=>{c.component("VirtualHumanPersona",I),c.component("VirtualHumanEventAdapter",M)}};p.VirtualHumanEventAdapter=M,p.VirtualHumanPersona=I,p.default=L,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-human-cf",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Vue3 Digital Human Component Package by cf ",
   "main": "dist/virtual-human-cf.umd.js",
   "module": "dist/virtual-human-cf.es.js",

package/src/components/VirtualHumanEventAdapter.vue

@@ -6,10 +6,12 @@
 import { ref, watch, onMounted, onUnmounted } from 'vue';
 
 const props = defineProps({
+  // 屏幕客户端ID
   screenClientId: {
     type: String,
     required: true,
   },
+  // WebSocket URL
   wsUrl: {
     type: String,
     required: true,
@@ -138,6 +140,7 @@ const connectWebSocket = () => {
 
 const handleMessage = (msg: any) => {
   const { type, payload, action } = msg;
+  console.log("msgmsg",msg)
   switch (type) {
     case 'audio':
       const base64Data = payload?.data || msg.data;

package/src/components/VirtualHumanPersona.vue

@@ -5,7 +5,7 @@
       class="virtual-human-container"
       :class="{ 'is-dark': isDark }"
     >
-      <div class="video-wrapper">
+      <div class="video-wrapper" ref="wrapperRef">
         <video
           ref="videoRef"
           :src="videoSrc"
@@ -16,8 +16,35 @@
           @play="handlePlay"
           @pause="handlePause"
           @ended="handleEnded"
+          :style="{ transform: `scale(${scale})` }"
         ></video>
-        
+
+        <!-- 缩放控制点 - 四个角 -->
+        <div
+          v-if="visible"
+          class="resize-handle top-left"
+          @mousedown="startResize('top-left', $event)"
+          @touchstart="startResize('top-left', $event)"
+        ></div>
+        <div
+          v-if="visible"
+          class="resize-handle top-right"
+          @mousedown="startResize('top-right', $event)"
+          @touchstart="startResize('top-right', $event)"
+        ></div>
+        <div
+          v-if="visible"
+          class="resize-handle bottom-left"
+          @mousedown="startResize('bottom-left', $event)"
+          @touchstart="startResize('bottom-left', $event)"
+        ></div>
+        <div
+          v-if="visible"
+          class="resize-handle bottom-right"
+          @mousedown="startResize('bottom-right', $event)"
+          @touchstart="startResize('bottom-right', $event)"
+        ></div>
+
         <!-- UI Overlay for controls or status -->
         <div class="overlay">
           <div v-if="!isPlaying" class="status-badge paused">
@@ -38,30 +65,37 @@
 import { ref, watch, onMounted, onUnmounted } from 'vue';
 
 const props = defineProps({
+  // 视频源URL
   videoSrc: {
     type: String,
     required: true,
   },
+  // 是否可见
   visible: {
     type: Boolean,
-    default: true,
+    default: false,
   },
+  // 是否自动播放
   isPlaying: {
     type: Boolean,
     default: false,
   },
+  // 是否静音
   muted: {
     type: Boolean,
     default: true, // Auto-play policies usually require muted
   },
+  // 是否暗黑模式
   isDark: {
     type: Boolean,
     default: false,
   },
+  // 屏幕客户端ID
   screenClientId: {
     type: String,
     required: false,
   },
+  // WebSocket URL
   wsUrl: {
     type: String,
     required: false,
@@ -71,10 +105,19 @@ const props = defineProps({
 const emit = defineEmits(['update:isPlaying', 'ended', 'update:visible']);
 
 const videoRef = ref<HTMLVideoElement | null>(null);
+const wrapperRef = ref<HTMLDivElement | null>(null);
 
 const ws = ref<WebSocket | null>(null);
 const isConnected = ref(false);
 
+// 缩放相关状态
+const scale = ref(1);
+const isResizing = ref(false);
+const resizeHandle = ref<string | null>(null);
+const startX = ref(0);
+const startY = ref(0);
+const startScale = ref(1);
+
 const connectWebSocket = () => {
   if (ws.value) {
     ws.value.close();
@@ -122,7 +165,7 @@ const handleMessage = (msg: any) => {
       emit('update:visible', true);
     } else if (action === 'pause') {
       emit('update:isPlaying', false);
-      emit('update:visible', false);
+      // 暂停时不隐藏视频
     } else if (action === 'stop') {
       emit('update:isPlaying', false);
       emit('update:visible', false);
@@ -172,6 +215,62 @@ const handleEnded = () => {
   emit('ended');
 };
 
+// 缩放功能
+const startResize = (handle: string, event: MouseEvent | TouchEvent) => {
+  isResizing.value = true;
+  resizeHandle.value = handle;
+  startScale.value = scale.value;
+
+  const clientX = 'clientX' in event ? event.clientX : event.touches[0].clientX;
+  const clientY = 'clientY' in event ? event.clientY : event.touches[0].clientY;
+  startX.value = clientX;
+  startY.value = clientY;
+
+  document.addEventListener('mousemove', handleResize);
+  document.addEventListener('mouseup', stopResize);
+  document.addEventListener('touchmove', handleResize);
+  document.addEventListener('touchend', stopResize);
+};
+
+const handleResize = (event: MouseEvent | TouchEvent) => {
+  if (!isResizing.value || !wrapperRef.value) return;
+
+  const clientX = 'clientX' in event ? event.clientX : event.touches[0].clientX;
+  const clientY = 'clientY' in event ? event.clientY : event.touches[0].clientY;
+
+  const deltaX = clientX - startX.value;
+  const deltaY = clientY - startY.value;
+
+  const rect = wrapperRef.value.getBoundingClientRect();
+  const minScale = 0.5;
+  const maxScale = 2;
+
+  // 根据拖动的角计算缩放比例
+  let newScale = startScale.value;
+  const baseSize = Math.min(rect.width, rect.height);
+
+  if (resizeHandle.value === 'bottom-right') {
+    newScale = startScale.value + (deltaX + deltaY) / baseSize;
+  } else if (resizeHandle.value === 'bottom-left') {
+    newScale = startScale.value + (-deltaX + deltaY) / baseSize;
+  } else if (resizeHandle.value === 'top-right') {
+    newScale = startScale.value + (deltaX - deltaY) / baseSize;
+  } else if (resizeHandle.value === 'top-left') {
+    newScale = startScale.value + (-deltaX - deltaY) / baseSize;
+  }
+
+  scale.value = Math.max(minScale, Math.min(maxScale, newScale));
+};
+
+const stopResize = () => {
+  isResizing.value = false;
+  resizeHandle.value = null;
+  document.removeEventListener('mousemove', handleResize);
+  document.removeEventListener('mouseup', stopResize);
+  document.removeEventListener('touchmove', handleResize);
+  document.removeEventListener('touchend', stopResize);
+};
+
 onMounted(() => {
   if (props.isPlaying && videoRef.value) {
     videoRef.value.play().catch(e => console.error('Video play failed:', e));
@@ -221,12 +320,56 @@ onUnmounted(() => {
   width: 100%;
   aspect-ratio: 9 / 16; /* Portrait ratio for digital human */
   background: #000;
+  overflow: visible;
 }
 
 .persona-video {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  transform-origin: center;
+  transition: transform 0.1s ease-out;
+}
+
+.resize-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: rgba(0, 0, 0, 0.5);
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  cursor: pointer;
+  z-index: 20;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.resize-handle:hover {
+  background: rgba(0, 0, 0, 0.7);
+  border-color: rgba(255, 255, 255, 1);
+}
+
+.resize-handle.top-left {
+  top: -10px;
+  left: -10px;
+  cursor: nwse-resize;
+}
+
+.resize-handle.top-right {
+  top: -10px;
+  right: -10px;
+  cursor: nesw-resize;
+}
+
+.resize-handle.bottom-left {
+  bottom: -10px;
+  left: -10px;
+  cursor: nesw-resize;
+}
+
+.resize-handle.bottom-right {
+  bottom: -10px;
+  right: -10px;
+  cursor: nwse-resize;
 }
 
 .overlay {