virtual-human-cf 1.1.0 → 1.3.0

package/README.md

@@ -12,6 +12,22 @@
 - 响应式设计
 
 ## 更新日志
+  ### 1.2.0
+  - 新增VirtualHumanEventAdapter组件controlEvent事件，用于数字人播放周期控制指令通知
+  ```javascript
+    <VirtualHumanEventAdapter
+      v-if="activeScreenClientId"
+      @controlEvent="onControlEvent"
+    />
+    const onControlEvent = (event) => {
+      console.log(event);
+      // play 初次开始播放
+      // resume 恢复播放
+      // pause 暂停播放
+      // stop 停止播放
+      // tts_complete 文本转语音完成，不代表本地播放完成
+    }
+  ```
 
   ### 1.0.10
   - 新增VirtualHumanPersona组件styles属性，用于控制视频容器 宽高 绝对定位位置等
@@ -130,6 +146,7 @@ const onEnded = () => {
 | pause | 暂停播放 | 载荷数据 |
 | error | 错误事件 | 错误信息 |
 | playComplete | 播放完成，数字人对话结束，关闭数字人 | - |
+| controlEvent | 数字人控制事件 | 载荷数据 |
 
 ```js
 // eventNotifaction 载荷数据
@@ -143,6 +160,13 @@ const onEnded = () => {
         "domid": "wrap-1"
     }
 }
+// controlEvent String 载荷数据
+"play" | "resume" | "pause" | "stop" | "tts_complete"
+play 初次开始播放
+resume 恢复播放
+pause 暂停播放
+stop 停止播放
+tts_complete 文本转语音完成，不代表本地播放完成
 ```
 
 #### 示例
@@ -155,6 +179,7 @@ const onEnded = () => {
     @connected="onConnected"
     @eventNotifaction="onEventNotifaction"
     @playComplete="onPlayComplete"
+    @controlEvent="onControlEvent"
     @end="onEnd"
     @error="onError"
   >
@@ -216,6 +241,7 @@ const onError = (error) => {
       :ws-url="websocketUrl"
       @connected="onConnected"
       @eventNotifaction="onEventNotifaction"
+      @controlEvent="onControlEvent"
       @end="onEnd"
       @error="onError"
       @playComplete="onPlayComplete"
@@ -242,6 +268,10 @@ const onVideoEnded = () => {
   console.log('视频播放结束');
 };
 
+const onControlEvent = (action: string) => {
+  console.log('获取到控制指令:', action);
+};
+
 
 const onEnd = (payload) => {
   console.log('数字人交互结束:', payload);

package/dist/components/VirtualHumanEventAdapter.vue.d.ts

@@ -14,6 +14,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     error: (...args: any[]) => void;
     pause: (...args: any[]) => void;
     eventNotifaction: (...args: any[]) => void;
+    controlEvent: (...args: any[]) => void;
     end: (...args: any[]) => void;
     connected: (...args: any[]) => void;
     playComplete: (...args: any[]) => void;
@@ -30,6 +31,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     onError?: ((...args: any[]) => any) | undefined;
     onPause?: ((...args: any[]) => any) | undefined;
     onEventNotifaction?: ((...args: any[]) => any) | undefined;
+    onControlEvent?: ((...args: any[]) => any) | undefined;
     onEnd?: ((...args: any[]) => any) | undefined;
     onConnected?: ((...args: any[]) => any) | undefined;
     onPlayComplete?: ((...args: any[]) => any) | undefined;

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

@@ -1,5 +1,5 @@
-import { defineComponent as H, ref as g, watch as C, onMounted as E, onUnmounted as _, openBlock as A, createBlock as B, Transition as W, withCtx as $, createElementBlock as R, normalizeStyle as F, normalizeClass as N, createElementVNode as U, createCommentVNode as T, renderSlot as q } from "vue";
-const M = ["src", "muted"], z = /* @__PURE__ */ H({
+import { defineComponent as $, ref as b, watch as C, onMounted as M, onUnmounted as R, openBlock as W, createBlock as J, Transition as L, withCtx as j, createElementBlock as G, normalizeStyle as K, normalizeClass as Q, createElementVNode as F, createCommentVNode as X, renderSlot as Y } from "vue";
+const Z = ["src", "muted"], ee = /* @__PURE__ */ $({
   __name: "VirtualHumanPersona",
   props: {
     // 视频源URL
@@ -49,88 +49,88 @@ const M = ["src", "muted"], z = /* @__PURE__ */ H({
     }
   },
   emits: ["update:isPlaying", "ended", "update:visible"],
-  setup(r, { emit: b }) {
-    const e = r, n = b, a = g(null), h = g(null), t = g(null), d = g(!1), f = () => {
-      if (t.value && t.value.close(), !(!e.wsUrl || !e.screenClientId))
+  setup(c, { emit: S }) {
+    const n = c, a = S, s = b(null), P = b(null), e = b(null), p = b(!1), d = () => {
+      if (e.value && e.value.close(), !(!n.wsUrl || !n.screenClientId))
         try {
-          const i = new URL(e.wsUrl);
-          i.searchParams.append("sessionId", e.screenClientId + "-persona"), t.value = new WebSocket(i.toString()), t.value.onopen = () => {
-            d.value = !0, console.log(`[VirtualHumanPersona] Connected to ${e.wsUrl} for session ${e.screenClientId}-persona`);
-          }, t.value.onmessage = (u) => {
+          const l = new URL(n.wsUrl);
+          l.searchParams.append("sessionId", n.screenClientId + "-persona"), e.value = new WebSocket(l.toString()), e.value.onopen = () => {
+            p.value = !0, console.log(`[VirtualHumanPersona] Connected to ${n.wsUrl} for session ${n.screenClientId}-persona`);
+          }, e.value.onmessage = (i) => {
             try {
-              const c = JSON.parse(u.data);
-              m(c);
-            } catch (c) {
-              console.error("[VirtualHumanPersona] Failed to parse message:", u.data, c);
+              const u = JSON.parse(i.data);
+              v(u);
+            } catch (u) {
+              console.error("[VirtualHumanPersona] Failed to parse message:", i.data, u);
             }
-          }, t.value.onerror = (u) => {
-            console.error("[VirtualHumanPersona] WebSocket error:", u);
-          }, t.value.onclose = () => {
-            d.value = !1, console.log("[VirtualHumanPersona] WebSocket disconnected");
+          }, e.value.onerror = (i) => {
+            console.error("[VirtualHumanPersona] WebSocket error:", i);
+          }, e.value.onclose = () => {
+            p.value = !1, console.log("[VirtualHumanPersona] WebSocket disconnected");
           };
-        } catch (i) {
-          console.error("[VirtualHumanPersona] Failed to initialize WebSocket:", i);
+        } catch (l) {
+          console.error("[VirtualHumanPersona] Failed to initialize WebSocket:", l);
         }
-    }, m = (i) => {
-      const { type: u, action: c } = i;
-      u === "control" && (c === "play" || c === "resume" ? (n("update:isPlaying", !0), n("update:visible", !0)) : c === "pause" ? (n("update:isPlaying", !1), n("update:visible", !0)) : c === "stop" && (n("update:isPlaying", !1), n("update:visible", !1), a.value && (a.value.currentTime = 0)));
+    }, v = (l) => {
+      const { type: i, action: u } = l;
+      i === "control" && (u === "play" || u === "resume" ? (a("update:isPlaying", !0), a("update:visible", !0)) : u === "pause" ? (a("update:isPlaying", !1), a("update:visible", !0)) : u === "stop" && (a("update:isPlaying", !1), a("update:visible", !1), s.value && (s.value.currentTime = 0)));
     };
-    C(() => e.screenClientId, () => {
-      e.screenClientId && e.wsUrl && f();
-    }), C(() => e.wsUrl, () => {
-      e.screenClientId && e.wsUrl && f();
-    }), C(() => e.isPlaying, (i) => {
-      a.value && (i ? a.value.play().catch((u) => console.error("Video play failed:", u)) : a.value.pause());
+    C(() => n.screenClientId, () => {
+      n.screenClientId && n.wsUrl && d();
+    }), C(() => n.wsUrl, () => {
+      n.screenClientId && n.wsUrl && d();
+    }), C(() => n.isPlaying, (l) => {
+      s.value && (l ? s.value.play().catch((i) => console.error("Video play failed:", i)) : s.value.pause());
     });
-    const v = () => {
-      e.isPlaying || n("update:isPlaying", !0);
-    }, S = () => {
-      e.isPlaying && n("update:isPlaying", !1);
-    }, k = () => {
-      n("update:isPlaying", !1), n("ended");
+    const y = () => {
+      n.isPlaying || a("update:isPlaying", !0);
+    }, w = () => {
+      n.isPlaying && a("update:isPlaying", !1);
+    }, h = () => {
+      a("update:isPlaying", !1), a("ended");
     };
-    return E(() => {
-      e.isPlaying && a.value && a.value.play().catch((i) => console.error("Video play failed:", i)), e.screenClientId && e.wsUrl && f();
-    }), _(() => {
-      t.value && t.value.close();
-    }), (i, u) => (A(), B(W, { name: "fade" }, {
-      default: $(() => [
-        r.visible ? (A(), R("div", {
+    return M(() => {
+      n.isPlaying && s.value && s.value.play().catch((l) => console.error("Video play failed:", l)), n.screenClientId && n.wsUrl && d();
+    }), R(() => {
+      e.value && e.value.close();
+    }), (l, i) => (W(), J(L, { name: "fade" }, {
+      default: j(() => [
+        c.visible ? (W(), G("div", {
           key: 0,
-          class: N(["virtual-human-container", { "is-dark": r.isDark }]),
-          style: F(r.styles)
+          class: Q(["virtual-human-container", { "is-dark": c.isDark }]),
+          style: K(c.styles)
         }, [
-          U("div", {
+          F("div", {
             class: "video-wrapper",
             ref_key: "wrapperRef",
-            ref: h
+            ref: P
           }, [
-            U("video", {
+            F("video", {
               ref_key: "videoRef",
-              ref: a,
-              src: r.videoSrc,
+              ref: s,
+              src: c.videoSrc,
               class: "persona-video",
-              muted: r.muted,
+              muted: c.muted,
               playsinline: "",
               loop: "",
               autoPlay: "",
               disablePictureInPicture: "",
-              onPlay: v,
-              onPause: S,
-              onEnded: k
-            }, null, 40, M)
+              onPlay: y,
+              onPause: w,
+              onEnded: h
+            }, null, 40, Z)
           ], 512)
-        ], 6)) : T("", !0)
+        ], 6)) : X("", !0)
       ]),
       _: 1
     }));
   }
-}), D = (r, b) => {
-  const e = r.__vccOpts || r;
-  for (const [n, a] of b)
-    e[n] = a;
-  return e;
-}, O = /* @__PURE__ */ D(z, [["__scopeId", "data-v-bf23f155"]]), J = /* @__PURE__ */ H({
+}), te = (c, S) => {
+  const n = c.__vccOpts || c;
+  for (const [a, s] of S)
+    n[a] = s;
+  return n;
+}, ne = /* @__PURE__ */ te(ee, [["__scopeId", "data-v-bf23f155"]]), ae = /* @__PURE__ */ $({
   __name: "VirtualHumanEventAdapter",
   props: {
     // 屏幕客户端ID
@@ -144,115 +144,158 @@ const M = ["src", "muted"], z = /* @__PURE__ */ H({
       required: !0
     }
   },
-  emits: ["eventNotifaction", "end", "pause", "connected", "error", "playComplete"],
-  setup(r, { emit: b }) {
-    const e = r, n = b, a = g(null), h = g(!1);
-    let t = null, d = 0, f = !1, m = 0, v = !1;
-    const S = () => {
-      t || (t = new (window.AudioContext || window.webkitAudioContext)({
+  emits: ["eventNotifaction", "controlEvent", "end", "pause", "connected", "error", "playComplete"],
+  setup(c, { emit: S }) {
+    const n = c, a = S, s = b(null), P = b(!1);
+    let e = null, p = 0, d = !1, v = 0, y = !1;
+    const w = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Map();
+    let i = null;
+    const u = (t) => {
+      if (typeof t == "number" && Number.isFinite(t)) return t;
+      if (typeof t == "string" && t.trim() !== "") {
+        const o = Number(t);
+        if (Number.isFinite(o)) return o;
+      }
+      return null;
+    }, _ = () => {
+      i !== null && (window.clearInterval(i), i = null);
+    }, B = () => {
+      _(), w.clear(), h.clear(), l.clear();
+    }, N = () => {
+      for (const [t] of w)
+        if (!h.has(t) && l.has(t)) return !0;
+      return !1;
+    }, I = () => {
+      if (!(!e || e.state !== "running")) {
+        for (const [t, o] of l) {
+          if (h.has(t)) continue;
+          const r = w.get(t);
+          r && e.currentTime + 5e-3 >= o && (h.add(t), w.delete(t), a("eventNotifaction", r));
+        }
+        N() || _();
+      }
+    }, x = () => {
+      i === null && N() && (i = window.setInterval(() => {
+        I();
+      }, 30));
+    }, q = () => {
+      e || (e = new (window.AudioContext || window.webkitAudioContext)({
         sampleRate: 24e3
-      })), t.state === "suspended" && !v && t.resume();
-    }, k = () => {
-      f && m === 0 && (n("playComplete", e.screenClientId), f = !1);
-    }, i = (s) => {
-      if (S(), !!t)
+      })), e.state === "suspended" && !y && e.resume();
+    }, T = () => {
+      d && v === 0 && (a("playComplete", n.screenClientId), d = !1);
+    }, z = (t, o) => {
+      if (q(), !!e)
         try {
-          const o = window.atob(s), l = o.length, y = new Uint8Array(l);
-          for (let p = 0; p < l; p++)
-            y[p] = o.charCodeAt(p);
-          const w = new Int16Array(y.buffer), V = new Float32Array(w.length);
-          for (let p = 0; p < w.length; p++)
-            V[p] = w[p] / 32768;
-          const I = t.createBuffer(1, V.length, 24e3);
-          I.getChannelData(0).set(V);
-          const P = t.createBufferSource();
-          P.buffer = I, P.connect(t.destination), d < t.currentTime && (d = t.currentTime), P.start(d), d += I.duration, m++, P.onended = () => {
-            m--, k();
+          const r = window.atob(t), g = r.length, k = new Uint8Array(g);
+          for (let f = 0; f < g; f++)
+            k[f] = r.charCodeAt(f);
+          const m = new Int16Array(k.buffer), A = new Float32Array(m.length);
+          for (let f = 0; f < m.length; f++)
+            A[f] = m[f] / 32768;
+          const U = e.createBuffer(1, A.length, 24e3);
+          U.getChannelData(0).set(A);
+          const E = e.createBufferSource();
+          E.buffer = U, E.connect(e.destination);
+          const H = p < e.currentTime ? e.currentTime : p;
+          o !== null && !l.has(o) && (l.set(o, H), I(), x()), E.start(H), p = H + U.duration, v++, E.onended = () => {
+            v--, T();
           };
-        } catch (o) {
-          console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:", o);
+        } catch (r) {
+          console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:", r);
         }
-    }, u = (s) => {
-      switch (s) {
+    }, D = (t) => {
+      switch (t) {
         case "play":
-          f = !1, m = 0, d = 0, v = !1, t && t.state === "suspended" && t.resume();
+          B(), d = !1, v = 0, p = 0, y = !1, e && e.state === "suspended" && e.resume();
           break;
         case "resume":
-          v = !1, t && t.state === "suspended" && t.resume();
+          y = !1, e && e.state === "suspended" && e.resume(), I(), x();
           break;
         case "pause":
-          v = !0, t && t.state === "running" && t.suspend();
+          y = !0, e && e.state === "running" && e.suspend();
           break;
         case "stop":
-          v = !1, t && (t.close(), t = null), d = 0, f = !1, m = 0;
+          B(), y = !1, e && (e.close(), e = null), p = 0, d = !1, v = 0;
           break;
         case "tts_complete":
-          f = !0, k();
+          d = !0, T();
           break;
         default:
-          console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${s}`);
+          console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${t}`);
       }
-    }, c = () => {
-      a.value && a.value.close();
+    }, V = () => {
+      s.value && s.value.close();
       try {
-        const s = new URL(e.wsUrl);
-        s.searchParams.append("sessionId", e.screenClientId + "-event"), a.value = new WebSocket(s.toString()), a.value.onopen = () => {
-          h.value = !0, n("connected"), console.log(`[VirtualHumanEventAdapter] Connected to ${e.wsUrl} for session ${e.screenClientId}-event`);
-        }, a.value.onmessage = (o) => {
+        const t = new URL(n.wsUrl);
+        t.searchParams.append("sessionId", n.screenClientId + "-event"), s.value = new WebSocket(t.toString()), s.value.onopen = () => {
+          P.value = !0, a("connected"), console.log(`[VirtualHumanEventAdapter] Connected to ${n.wsUrl} for session ${n.screenClientId}-event`);
+        }, s.value.onmessage = (o) => {
           try {
-            const l = JSON.parse(o.data);
-            x(l);
-          } catch (l) {
-            console.error("[VirtualHumanEventAdapter] Failed to parse message:", o.data, l);
+            const r = JSON.parse(o.data);
+            O(r);
+          } catch (r) {
+            console.error("[VirtualHumanEventAdapter] Failed to parse message:", o.data, r);
           }
-        }, a.value.onerror = (o) => {
-          console.error("[VirtualHumanEventAdapter] WebSocket error:", o), n("error", o);
-        }, a.value.onclose = () => {
-          h.value = !1, console.log("[VirtualHumanEventAdapter] WebSocket disconnected");
+        }, s.value.onerror = (o) => {
+          console.error("[VirtualHumanEventAdapter] WebSocket error:", o), a("error", o);
+        }, s.value.onclose = () => {
+          P.value = !1, console.log("[VirtualHumanEventAdapter] WebSocket disconnected");
         };
-      } catch (s) {
-        console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:", s), n("error", s);
+      } catch (t) {
+        console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:", t), a("error", t);
       }
-    }, x = (s) => {
-      const { type: o, payload: l, action: y } = s;
+    }, O = (t) => {
+      const { type: o, payload: r, action: g } = t;
       switch (o) {
         case "audio":
-          const w = (l == null ? void 0 : l.data) || s.data;
-          w && i(w);
+          const k = (r == null ? void 0 : r.data) || t.data;
+          if (k) {
+            const m = u((r == null ? void 0 : r.index) ?? t.index);
+            z(k, m);
+          }
           break;
         case "send_event":
-          s.event && (console.log("adapter send_event:", s), n("eventNotifaction", s));
+          if (t.event) {
+            console.log("adapter send_event:", t);
+            const m = u(t.index);
+            if (m === null) {
+              a("eventNotifaction", t);
+              break;
+            }
+            w.set(m, t), I(), x();
+          }
           break;
         case "control":
-          y && (console.log("adapter control:", y), u(y));
+          g && (console.log("adapter control:", g), a("controlEvent", g), D(g));
           break;
         case "end":
-          console.log("adapter end:", l), n("end", l);
+          console.log("adapter end:", r), a("end", r);
           break;
         case "pause":
-          console.log("adapter pause:", l), n("pause", l);
+          console.log("adapter pause:", r), a("pause", r);
           break;
         default:
           console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${o}`);
       }
     };
-    return C(() => e.screenClientId, () => {
-      e.screenClientId && e.wsUrl && c();
-    }), C(() => e.wsUrl, () => {
-      e.screenClientId && e.wsUrl && c();
-    }), E(() => {
-      e.screenClientId && e.wsUrl && c();
-    }), _(() => {
-      a.value && a.value.close(), t && t.close();
-    }), (s, o) => q(s.$slots, "default");
+    return C(() => n.screenClientId, () => {
+      n.screenClientId && n.wsUrl && V();
+    }), C(() => n.wsUrl, () => {
+      n.screenClientId && n.wsUrl && V();
+    }), M(() => {
+      n.screenClientId && n.wsUrl && V();
+    }), R(() => {
+      s.value && s.value.close(), e && e.close();
+    }), (t, o) => Y(t.$slots, "default");
   }
-}), L = (r) => {
-  r.component("VirtualHumanPersona", O), r.component("VirtualHumanEventAdapter", J);
-}, G = {
-  install: L
+}), re = (c) => {
+  c.component("VirtualHumanPersona", ne), c.component("VirtualHumanEventAdapter", ae);
+}, oe = {
+  install: re
 };
 export {
-  J as VirtualHumanEventAdapter,
-  O as VirtualHumanPersona,
-  G as default
+  ae as VirtualHumanEventAdapter,
+  ne as VirtualHumanPersona,
+  oe as default
 };

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

@@ -1 +1 @@
-(function(f,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(f=typeof globalThis<"u"?globalThis:f||self,n(f.VirtualHumanCf={},f.Vue))})(this,function(f,n){"use strict";const H=["src","muted"],U=((r,b)=>{const e=r.__vccOpts||r;for(const[a,o]of b)e[a]=o;return e})(n.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},styles:{type:Object,default:()=>({width:"400px",height:"500px",left:"16px",bottom:"16px"})}},emits:["update:isPlaying","ended","update:visible"],setup(r,{emit:b}){const e=r,a=b,o=n.ref(null),C=n.ref(null),t=n.ref(null),p=n.ref(!1),m=()=>{if(t.value&&t.value.close(),!(!e.wsUrl||!e.screenClientId))try{const c=new URL(e.wsUrl);c.searchParams.append("sessionId",e.screenClientId+"-persona"),t.value=new WebSocket(c.toString()),t.value.onopen=()=>{p.value=!0,console.log(`[VirtualHumanPersona] Connected to ${e.wsUrl} for session ${e.screenClientId}-persona`)},t.value.onmessage=u=>{try{const d=JSON.parse(u.data);w(d)}catch(d){console.error("[VirtualHumanPersona] Failed to parse message:",u.data,d)}},t.value.onerror=u=>{console.error("[VirtualHumanPersona] WebSocket error:",u)},t.value.onclose=()=>{p.value=!1,console.log("[VirtualHumanPersona] WebSocket disconnected")}}catch(c){console.error("[VirtualHumanPersona] Failed to initialize WebSocket:",c)}},w=c=>{const{type:u,action:d}=c;u==="control"&&(d==="play"||d==="resume"?(a("update:isPlaying",!0),a("update:visible",!0)):d==="pause"?(a("update:isPlaying",!1),a("update:visible",!0)):d==="stop"&&(a("update:isPlaying",!1),a("update:visible",!1),o.value&&(o.value.currentTime=0)))};n.watch(()=>e.screenClientId,()=>{e.screenClientId&&e.wsUrl&&m()}),n.watch(()=>e.wsUrl,()=>{e.screenClientId&&e.wsUrl&&m()}),n.watch(()=>e.isPlaying,c=>{o.value&&(c?o.value.play().catch(u=>console.error("Video play failed:",u)):o.value.pause())});const g=()=>{e.isPlaying||a("update:isPlaying",!0)},S=()=>{e.isPlaying&&a("update:isPlaying",!1)},k=()=>{a("update:isPlaying",!1),a("ended")};return n.onMounted(()=>{e.isPlaying&&o.value&&o.value.play().catch(c=>console.error("Video play failed:",c)),e.screenClientId&&e.wsUrl&&m()}),n.onUnmounted(()=>{t.value&&t.value.close()}),(c,u)=>(n.openBlock(),n.createBlock(n.Transition,{name:"fade"},{default:n.withCtx(()=>[r.visible?(n.openBlock(),n.createElementBlock("div",{key:0,class:n.normalizeClass(["virtual-human-container",{"is-dark":r.isDark}]),style:n.normalizeStyle(r.styles)},[n.createElementVNode("div",{class:"video-wrapper",ref_key:"wrapperRef",ref:C},[n.createElementVNode("video",{ref_key:"videoRef",ref:o,src:r.videoSrc,class:"persona-video",muted:r.muted,playsinline:"",loop:"",autoPlay:"",disablePictureInPicture:"",onPlay:g,onPause:S,onEnded:k},null,40,H)],512)],6)):n.createCommentVNode("",!0)]),_:1}))}}),[["__scopeId","data-v-bf23f155"]]),A=n.defineComponent({__name:"VirtualHumanEventAdapter",props:{screenClientId:{type:String,required:!0},wsUrl:{type:String,required:!0}},emits:["eventNotifaction","end","pause","connected","error","playComplete"],setup(r,{emit:b}){const e=r,a=b,o=n.ref(null),C=n.ref(!1);let t=null,p=0,m=!1,w=0,g=!1;const S=()=>{t||(t=new(window.AudioContext||window.webkitAudioContext)({sampleRate:24e3})),t.state==="suspended"&&!g&&t.resume()},k=()=>{m&&w===0&&(a("playComplete",e.screenClientId),m=!1)},c=s=>{if(S(),!!t)try{const l=window.atob(s),i=l.length,h=new Uint8Array(i);for(let y=0;y<i;y++)h[y]=l.charCodeAt(y);const v=new Int16Array(h.buffer),V=new Float32Array(v.length);for(let y=0;y<v.length;y++)V[y]=v[y]/32768;const I=t.createBuffer(1,V.length,24e3);I.getChannelData(0).set(V);const P=t.createBufferSource();P.buffer=I,P.connect(t.destination),p<t.currentTime&&(p=t.currentTime),P.start(p),p+=I.duration,w++,P.onended=()=>{w--,k()}}catch(l){console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:",l)}},u=s=>{switch(s){case"play":m=!1,w=0,p=0,g=!1,t&&t.state==="suspended"&&t.resume();break;case"resume":g=!1,t&&t.state==="suspended"&&t.resume();break;case"pause":g=!0,t&&t.state==="running"&&t.suspend();break;case"stop":g=!1,t&&(t.close(),t=null),p=0,m=!1,w=0;break;case"tts_complete":m=!0,k();break;default:console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${s}`)}},d=()=>{o.value&&o.value.close();try{const s=new URL(e.wsUrl);s.searchParams.append("sessionId",e.screenClientId+"-event"),o.value=new WebSocket(s.toString()),o.value.onopen=()=>{C.value=!0,a("connected"),console.log(`[VirtualHumanEventAdapter] Connected to ${e.wsUrl} for session ${e.screenClientId}-event`)},o.value.onmessage=l=>{try{const i=JSON.parse(l.data);E(i)}catch(i){console.error("[VirtualHumanEventAdapter] Failed to parse message:",l.data,i)}},o.value.onerror=l=>{console.error("[VirtualHumanEventAdapter] WebSocket error:",l),a("error",l)},o.value.onclose=()=>{C.value=!1,console.log("[VirtualHumanEventAdapter] WebSocket disconnected")}}catch(s){console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:",s),a("error",s)}},E=s=>{const{type:l,payload:i,action:h}=s;switch(l){case"audio":const v=(i==null?void 0:i.data)||s.data;v&&c(v);break;case"send_event":s.event&&(console.log("adapter send_event:",s),a("eventNotifaction",s));break;case"control":h&&(console.log("adapter control:",h),u(h));break;case"end":console.log("adapter end:",i),a("end",i);break;case"pause":console.log("adapter pause:",i),a("pause",i);break;default:console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${l}`)}};return n.watch(()=>e.screenClientId,()=>{e.screenClientId&&e.wsUrl&&d()}),n.watch(()=>e.wsUrl,()=>{e.screenClientId&&e.wsUrl&&d()}),n.onMounted(()=>{e.screenClientId&&e.wsUrl&&d()}),n.onUnmounted(()=>{o.value&&o.value.close(),t&&t.close()}),(s,l)=>n.renderSlot(s.$slots,"default")}}),_={install:r=>{r.component("VirtualHumanPersona",U),r.component("VirtualHumanEventAdapter",A)}};f.VirtualHumanEventAdapter=A,f.VirtualHumanPersona=U,f.default=_,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(f,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(f=typeof globalThis<"u"?globalThis:f||self,a(f.VirtualHumanCf={},f.Vue))})(this,function(f,a){"use strict";const $=["src","muted"],_=((d,k)=>{const n=d.__vccOpts||d;for(const[r,s]of k)n[r]=s;return n})(a.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},styles:{type:Object,default:()=>({width:"400px",height:"500px",left:"16px",bottom:"16px"})}},emits:["update:isPlaying","ended","update:visible"],setup(d,{emit:k}){const n=d,r=k,s=a.ref(null),P=a.ref(null),e=a.ref(null),y=a.ref(!1),p=()=>{if(e.value&&e.value.close(),!(!n.wsUrl||!n.screenClientId))try{const i=new URL(n.wsUrl);i.searchParams.append("sessionId",n.screenClientId+"-persona"),e.value=new WebSocket(i.toString()),e.value.onopen=()=>{y.value=!0,console.log(`[VirtualHumanPersona] Connected to ${n.wsUrl} for session ${n.screenClientId}-persona`)},e.value.onmessage=c=>{try{const u=JSON.parse(c.data);h(u)}catch(u){console.error("[VirtualHumanPersona] Failed to parse message:",c.data,u)}},e.value.onerror=c=>{console.error("[VirtualHumanPersona] WebSocket error:",c)},e.value.onclose=()=>{y.value=!1,console.log("[VirtualHumanPersona] WebSocket disconnected")}}catch(i){console.error("[VirtualHumanPersona] Failed to initialize WebSocket:",i)}},h=i=>{const{type:c,action:u}=i;c==="control"&&(u==="play"||u==="resume"?(r("update:isPlaying",!0),r("update:visible",!0)):u==="pause"?(r("update:isPlaying",!1),r("update:visible",!0)):u==="stop"&&(r("update:isPlaying",!1),r("update:visible",!1),s.value&&(s.value.currentTime=0)))};a.watch(()=>n.screenClientId,()=>{n.screenClientId&&n.wsUrl&&p()}),a.watch(()=>n.wsUrl,()=>{n.screenClientId&&n.wsUrl&&p()}),a.watch(()=>n.isPlaying,i=>{s.value&&(i?s.value.play().catch(c=>console.error("Video play failed:",c)):s.value.pause())});const v=()=>{n.isPlaying||r("update:isPlaying",!0)},g=()=>{n.isPlaying&&r("update:isPlaying",!1)},S=()=>{r("update:isPlaying",!1),r("ended")};return a.onMounted(()=>{n.isPlaying&&s.value&&s.value.play().catch(i=>console.error("Video play failed:",i)),n.screenClientId&&n.wsUrl&&p()}),a.onUnmounted(()=>{e.value&&e.value.close()}),(i,c)=>(a.openBlock(),a.createBlock(a.Transition,{name:"fade"},{default:a.withCtx(()=>[d.visible?(a.openBlock(),a.createElementBlock("div",{key:0,class:a.normalizeClass(["virtual-human-container",{"is-dark":d.isDark}]),style:a.normalizeStyle(d.styles)},[a.createElementVNode("div",{class:"video-wrapper",ref_key:"wrapperRef",ref:P},[a.createElementVNode("video",{ref_key:"videoRef",ref:s,src:d.videoSrc,class:"persona-video",muted:d.muted,playsinline:"",loop:"",autoPlay:"",disablePictureInPicture:"",onPlay:v,onPause:g,onEnded:S},null,40,$)],512)],6)):a.createCommentVNode("",!0)]),_:1}))}}),[["__scopeId","data-v-bf23f155"]]),B=a.defineComponent({__name:"VirtualHumanEventAdapter",props:{screenClientId:{type:String,required:!0},wsUrl:{type:String,required:!0}},emits:["eventNotifaction","controlEvent","end","pause","connected","error","playComplete"],setup(d,{emit:k}){const n=d,r=k,s=a.ref(null),P=a.ref(!1);let e=null,y=0,p=!1,h=0,v=!1;const g=new Map,S=new Set,i=new Map;let c=null;const u=t=>{if(typeof t=="number"&&Number.isFinite(t))return t;if(typeof t=="string"&&t.trim()!==""){const l=Number(t);if(Number.isFinite(l))return l}return null},T=()=>{c!==null&&(window.clearInterval(c),c=null)},N=()=>{T(),g.clear(),S.clear(),i.clear()},M=()=>{for(const[t]of g)if(!S.has(t)&&i.has(t))return!0;return!1},I=()=>{if(!(!e||e.state!=="running")){for(const[t,l]of i){if(S.has(t))continue;const o=g.get(t);o&&e.currentTime+.005>=l&&(S.add(t),g.delete(t),r("eventNotifaction",o))}M()||T()}},E=()=>{c===null&&M()&&(c=window.setInterval(()=>{I()},30))},R=()=>{e||(e=new(window.AudioContext||window.webkitAudioContext)({sampleRate:24e3})),e.state==="suspended"&&!v&&e.resume()},W=()=>{p&&h===0&&(r("playComplete",n.screenClientId),p=!1)},q=(t,l)=>{if(R(),!!e)try{const o=window.atob(t),b=o.length,C=new Uint8Array(b);for(let m=0;m<b;m++)C[m]=o.charCodeAt(m);const w=new Int16Array(C.buffer),A=new Float32Array(w.length);for(let m=0;m<w.length;m++)A[m]=w[m]/32768;const U=e.createBuffer(1,A.length,24e3);U.getChannelData(0).set(A);const V=e.createBufferSource();V.buffer=U,V.connect(e.destination);const H=y<e.currentTime?e.currentTime:y;l!==null&&!i.has(l)&&(i.set(l,H),I(),E()),V.start(H),y=H+U.duration,h++,V.onended=()=>{h--,W()}}catch(o){console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:",o)}},z=t=>{switch(t){case"play":N(),p=!1,h=0,y=0,v=!1,e&&e.state==="suspended"&&e.resume();break;case"resume":v=!1,e&&e.state==="suspended"&&e.resume(),I(),E();break;case"pause":v=!0,e&&e.state==="running"&&e.suspend();break;case"stop":N(),v=!1,e&&(e.close(),e=null),y=0,p=!1,h=0;break;case"tts_complete":p=!0,W();break;default:console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${t}`)}},x=()=>{s.value&&s.value.close();try{const t=new URL(n.wsUrl);t.searchParams.append("sessionId",n.screenClientId+"-event"),s.value=new WebSocket(t.toString()),s.value.onopen=()=>{P.value=!0,r("connected"),console.log(`[VirtualHumanEventAdapter] Connected to ${n.wsUrl} for session ${n.screenClientId}-event`)},s.value.onmessage=l=>{try{const o=JSON.parse(l.data);O(o)}catch(o){console.error("[VirtualHumanEventAdapter] Failed to parse message:",l.data,o)}},s.value.onerror=l=>{console.error("[VirtualHumanEventAdapter] WebSocket error:",l),r("error",l)},s.value.onclose=()=>{P.value=!1,console.log("[VirtualHumanEventAdapter] WebSocket disconnected")}}catch(t){console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:",t),r("error",t)}},O=t=>{const{type:l,payload:o,action:b}=t;switch(l){case"audio":const C=(o==null?void 0:o.data)||t.data;if(C){const w=u((o==null?void 0:o.index)??t.index);q(C,w)}break;case"send_event":if(t.event){console.log("adapter send_event:",t);const w=u(t.index);if(w===null){r("eventNotifaction",t);break}g.set(w,t),I(),E()}break;case"control":b&&(console.log("adapter control:",b),r("controlEvent",b),z(b));break;case"end":console.log("adapter end:",o),r("end",o);break;case"pause":console.log("adapter pause:",o),r("pause",o);break;default:console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${l}`)}};return a.watch(()=>n.screenClientId,()=>{n.screenClientId&&n.wsUrl&&x()}),a.watch(()=>n.wsUrl,()=>{n.screenClientId&&n.wsUrl&&x()}),a.onMounted(()=>{n.screenClientId&&n.wsUrl&&x()}),a.onUnmounted(()=>{s.value&&s.value.close(),e&&e.close()}),(t,l)=>a.renderSlot(t.$slots,"default")}}),F={install:d=>{d.component("VirtualHumanPersona",_),d.component("VirtualHumanEventAdapter",B)}};f.VirtualHumanEventAdapter=B,f.VirtualHumanPersona=_,f.default=F,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-human-cf",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "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

@@ -18,7 +18,7 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['eventNotifaction', 'end', 'pause', 'connected', 'error', 'playComplete']);
+const emit = defineEmits(['eventNotifaction', 'controlEvent', 'end', 'pause', 'connected', 'error', 'playComplete']);
 
 const ws = ref<WebSocket | null>(null);
 const isConnected = ref(false);
@@ -29,6 +29,67 @@ let nextStartTime = 0;
 let isTtsComplete = false;
 let activeSources = 0;
 let isIntentionallyPaused = false;
+const pendingEventByIndex = new Map<number, any>();
+const firedEventIndexSet = new Set<number>();
+const plannedStartTimeByIndex = new Map<number, number>();
+let eventSchedulerTimer: number | null = null;
+
+const normalizeIndex = (value: unknown): number | null => {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string' && value.trim() !== '') {
+    const n = Number(value);
+    if (Number.isFinite(n)) return n;
+  }
+  return null;
+};
+
+const stopEventScheduler = () => {
+  if (eventSchedulerTimer !== null) {
+    window.clearInterval(eventSchedulerTimer);
+    eventSchedulerTimer = null;
+  }
+};
+
+const clearEventState = () => {
+  stopEventScheduler();
+  pendingEventByIndex.clear();
+  firedEventIndexSet.clear();
+  plannedStartTimeByIndex.clear();
+};
+
+const hasSchedulableEvent = () => {
+  for (const [index] of pendingEventByIndex) {
+    if (!firedEventIndexSet.has(index) && plannedStartTimeByIndex.has(index)) return true;
+  }
+  return false;
+};
+
+const tickEventScheduler = () => {
+  if (!audioContext || audioContext.state !== 'running') return;
+
+  for (const [index, plannedStartTime] of plannedStartTimeByIndex) {
+    if (firedEventIndexSet.has(index)) continue;
+    const pendingEvent = pendingEventByIndex.get(index);
+    if (!pendingEvent) continue;
+
+    if (audioContext.currentTime + 0.005 >= plannedStartTime) {
+      firedEventIndexSet.add(index);
+      pendingEventByIndex.delete(index);
+      emit('eventNotifaction', pendingEvent);
+    }
+  }
+
+  if (!hasSchedulableEvent()) stopEventScheduler();
+};
+
+const ensureEventScheduler = () => {
+  if (eventSchedulerTimer !== null) return;
+  if (!hasSchedulableEvent()) return;
+
+  eventSchedulerTimer = window.setInterval(() => {
+    tickEventScheduler();
+  }, 30);
+};
 
 const initAudioContext = () => {
   if (!audioContext) {
@@ -48,7 +109,7 @@ const checkPlayComplete = () => {
   }
 };
 
-const handleAudioMessage = (base64Data: string) => {
+const handleAudioMessage = (base64Data: string, index: number | null) => {
   initAudioContext();
   if (!audioContext) return;
 
@@ -75,11 +136,15 @@ const handleAudioMessage = (base64Data: string) => {
     source.connect(audioContext.destination);
 
     // Keep track of the start time for seamless playback
-    if (nextStartTime < audioContext.currentTime) {
-      nextStartTime = audioContext.currentTime;
+    const startAt = nextStartTime < audioContext.currentTime ? audioContext.currentTime : nextStartTime;
+    if (index !== null && !plannedStartTimeByIndex.has(index)) {
+      plannedStartTimeByIndex.set(index, startAt);
+      tickEventScheduler();
+      ensureEventScheduler();
     }
-    source.start(nextStartTime);
-    nextStartTime += audioBuffer.duration;
+
+    source.start(startAt);
+    nextStartTime = startAt + audioBuffer.duration;
 
     activeSources++;
     source.onended = () => {
@@ -94,6 +159,7 @@ const handleAudioMessage = (base64Data: string) => {
 const handleControlMessage = (action: string) => {
   switch (action) {
     case 'play':
+      clearEventState();
       isTtsComplete = false;
       activeSources = 0;
       nextStartTime = 0;
@@ -107,6 +173,8 @@ const handleControlMessage = (action: string) => {
       if (audioContext && audioContext.state === 'suspended') {
         audioContext.resume();
       }
+      tickEventScheduler();
+      ensureEventScheduler();
       break;
     case 'pause':
       isIntentionallyPaused = true;
@@ -115,6 +183,7 @@ const handleControlMessage = (action: string) => {
       }
       break;
     case 'stop':
+      clearEventState();
       isIntentionallyPaused = false;
       if (audioContext) {
         audioContext.close();
@@ -181,20 +250,30 @@ const handleMessage = (msg: any) => {
     case 'audio':
       const base64Data = payload?.data || msg.data;
       if (base64Data) {
-        handleAudioMessage(base64Data);
+        const index = normalizeIndex(payload?.index ?? msg.index);
+        handleAudioMessage(base64Data, index);
       }
       break;
     // 接收事件通知
     case 'send_event':
       if (msg.event) {
         console.log("adapter send_event:",msg)
-        emit('eventNotifaction', msg);
+        const index = normalizeIndex(msg.index);
+        if (index === null) {
+          emit('eventNotifaction', msg);
+          break;
+        }
+
+        pendingEventByIndex.set(index, msg);
+        tickEventScheduler();
+        ensureEventScheduler();
       }
       break;
     // 控制指令接口
     case 'control':
       if (action) {
         console.log("adapter control:",action)
+        emit('controlEvent', action);
         handleControlMessage(action);
       }
       break;