virtual-human-cf 1.0.11 → 1.2.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/style.css

@@ -1 +1 @@
-.fade-enter-active[data-v-7325596e],.fade-leave-active[data-v-7325596e]{transition:opacity .5s ease,transform .5s ease}.fade-enter-from[data-v-7325596e],.fade-leave-to[data-v-7325596e]{opacity:0;transform:translateY(10px)}.virtual-human-container[data-v-7325596e]{position:fixed;z-index:2147483647;overflow:visible}.video-wrapper[data-v-7325596e]{position:relative;width:100%;height:100%;border-radius:1rem;overflow:hidden;box-shadow:0 10px 25px #0000001a;background:#fff;border:2px solid transparent;transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease}.video-wrapper[data-v-7325596e]:hover{border-color:#409eff}.virtual-human-container.is-dark .video-wrapper[data-v-7325596e]{background:#1f2937;box-shadow:0 10px 25px #00000080}.persona-video[data-v-7325596e]{width:100%;height:100%;object-fit:cover;transform-origin:center;transition:transform .1s ease-out}.resize-handle[data-v-7325596e]{position:absolute;width:20px;height:20px;background:#00000080;border:2px solid rgba(255,255,255,.8);border-radius:4px;cursor:pointer;z-index:20;opacity:0;pointer-events:none;transition:opacity .3s ease,background .2s,border-color .2s}.video-wrapper:hover .resize-handle[data-v-7325596e]{opacity:1;pointer-events:auto}.resize-handle[data-v-7325596e]:hover{background:#000000b3;border-color:#fff}.resize-handle.top-left[data-v-7325596e]{top:10px;left:10px;cursor:nwse-resize}.resize-handle.top-right[data-v-7325596e]{top:10px;right:10px;cursor:nesw-resize}.resize-handle.bottom-left[data-v-7325596e]{bottom:10px;left:10px;cursor:nesw-resize}.resize-handle.bottom-right[data-v-7325596e]{bottom:10px;right:10px;cursor:nwse-resize}.overlay[data-v-7325596e]{position:absolute;top:1rem;right:1rem;z-index:10}.status-badge[data-v-7325596e]{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-7325596e]{background:#ef4444cc}.status-badge.playing[data-v-7325596e]{background:#22c55ecc}.dot[data-v-7325596e]{width:6px;height:6px;border-radius:50%;background-color:#fff}@keyframes pulse-7325596e{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse[data-v-7325596e]{animation:pulse-7325596e 2s cubic-bezier(.4,0,.6,1) infinite}
+.fade-enter-active[data-v-bf23f155],.fade-leave-active[data-v-bf23f155]{transition:opacity .5s ease,transform .5s ease}.fade-enter-from[data-v-bf23f155],.fade-leave-to[data-v-bf23f155]{opacity:0;transform:translateY(10px)}.virtual-human-container[data-v-bf23f155]{position:fixed;z-index:2147483647;overflow:visible}.video-wrapper[data-v-bf23f155]{position:relative;width:100%;height:100%;border-radius:1rem;overflow:hidden;box-shadow:0 10px 25px #0000001a;background:#fff;border:2px solid transparent;transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease}.video-wrapper[data-v-bf23f155]:hover{border-color:#409eff}.virtual-human-container.is-dark .video-wrapper[data-v-bf23f155]{background:#1f2937;box-shadow:0 10px 25px #00000080}.persona-video[data-v-bf23f155]{width:100%;height:100%;object-fit:cover;transform-origin:center;transition:transform .1s ease-out}.resize-handle[data-v-bf23f155]{position:absolute;width:20px;height:20px;background:#00000080;border:2px solid rgba(255,255,255,.8);border-radius:4px;cursor:pointer;z-index:20;opacity:0;pointer-events:none;transition:opacity .3s ease,background .2s,border-color .2s}.video-wrapper:hover .resize-handle[data-v-bf23f155]{opacity:1;pointer-events:auto}.resize-handle[data-v-bf23f155]:hover{background:#000000b3;border-color:#fff}.resize-handle.top-left[data-v-bf23f155]{top:10px;left:10px;cursor:nwse-resize}.resize-handle.top-right[data-v-bf23f155]{top:10px;right:10px;cursor:nesw-resize}.resize-handle.bottom-left[data-v-bf23f155]{bottom:10px;left:10px;cursor:nesw-resize}.resize-handle.bottom-right[data-v-bf23f155]{bottom:10px;right:10px;cursor:nwse-resize}.overlay[data-v-bf23f155]{position:absolute;top:1rem;right:1rem;z-index:10}.status-badge[data-v-bf23f155]{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-bf23f155]{background:#ef4444cc}.status-badge.playing[data-v-bf23f155]{background:#22c55ecc}.dot[data-v-bf23f155]{width:6px;height:6px;border-radius:50%;background-color:#fff}@keyframes pulse-bf23f155{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse[data-v-bf23f155]{animation:pulse-bf23f155 2s cubic-bezier(.4,0,.6,1) infinite}

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

@@ -114,7 +114,7 @@ const M = ["src", "muted"], z = /* @__PURE__ */ H({
               playsinline: "",
               loop: "",
               autoPlay: "",
-              disablePictureInPicture: !1,
+              disablePictureInPicture: "",
               onPlay: v,
               onPause: S,
               onEnded: k
@@ -130,7 +130,7 @@ const M = ["src", "muted"], z = /* @__PURE__ */ H({
   for (const [n, a] of b)
     e[n] = a;
   return e;
-}, O = /* @__PURE__ */ D(z, [["__scopeId", "data-v-7325596e"]]), J = /* @__PURE__ */ H({
+}, O = /* @__PURE__ */ D(z, [["__scopeId", "data-v-bf23f155"]]), J = /* @__PURE__ */ H({
   __name: "VirtualHumanEventAdapter",
   props: {
     // 屏幕客户端ID
@@ -144,7 +144,7 @@ const M = ["src", "muted"], z = /* @__PURE__ */ H({
       required: !0
     }
   },
-  emits: ["eventNotifaction", "end", "pause", "connected", "error", "playComplete"],
+  emits: ["eventNotifaction", "controlEvent", "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;
@@ -224,7 +224,7 @@ const M = ["src", "muted"], z = /* @__PURE__ */ H({
           s.event && (console.log("adapter send_event:", s), n("eventNotifaction", s));
           break;
         case "control":
-          y && (console.log("adapter control:", y), u(y));
+          y && (console.log("adapter control:", y), n("controlEvent", y), u(y));
           break;
         case "end":
           console.log("adapter end:", l), n("end", l);

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:!1,onPlay:g,onPause:S,onEnded:k},null,40,H)],512)],6)):n.createCommentVNode("",!0)]),_:1}))}}),[["__scopeId","data-v-7325596e"]]),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,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","controlEvent","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,v=new Uint8Array(i);for(let y=0;y<i;y++)v[y]=l.charCodeAt(y);const h=new Int16Array(v.buffer),V=new Float32Array(h.length);for(let y=0;y<h.length;y++)V[y]=h[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:v}=s;switch(l){case"audio":const h=(i==null?void 0:i.data)||s.data;h&&c(h);break;case"send_event":s.event&&(console.log("adapter send_event:",s),a("eventNotifaction",s));break;case"control":v&&(console.log("adapter control:",v),a("controlEvent",v),u(v));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"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-human-cf",
-  "version": "1.0.11",
+  "version": "1.2.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);
@@ -195,6 +195,7 @@ const handleMessage = (msg: any) => {
     case 'control':
       if (action) {
         console.log("adapter control:",action)
+        emit('controlEvent', action);
         handleControlMessage(action);
       }
       break;

package/src/components/VirtualHumanPersona.vue

@@ -15,7 +15,7 @@
           playsinline
           loop
           autoPlay
-          :disablePictureInPicture="false"
+          disablePictureInPicture
           @play="handlePlay"
           @pause="handlePause"
           @ended="handleEnded"