virtual-human-cf 1.3.0 → 1.5.0

package/README.md

@@ -12,26 +12,67 @@
 - 响应式设计
 
 ## 更新日志
-  ### 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属性，用于控制视频容器 宽高 绝对定位位置等
-  
+### 1.5.0
+- 新增VirtualHumanEventAdapter组件对外暴露play方法
+
+```javascript
+  <VirtualHumanEventAdapter
+    v-if="activeScreenClientId"
+    @controlEvent="onControlEvent"
+    ref="adapterRef"
+  />
+ const adapterRef = ref(null);
+
+  // 底部有使用demo，这里不重复
+ // 播放
+ adapterRef.value.play().then(() => {}).catch(() => {});
+
+```
+### 1.4.0
+- 新增VirtualHumanEventAdapter组件对外暴露pause、resume、stop方法
+
+```javascript
+  <VirtualHumanEventAdapter
+    v-if="activeScreenClientId"
+    @controlEvent="onControlEvent"
+    ref="adapterRef"
+  />
+ const adapterRef = ref(null);
+
+  // 底部有使用demo，这里不重复
+ // 暂停播放
+ adapterRef.value.pause().then(() => {}).catch(() => {});
+ // 恢复播放
+ adapterRef.value.resume().then(() => {}).catch(() => {});
+ // 停止播放
+ adapterRef.value.stop().then(() => {}).catch(() => {});
+
+```
+
+### 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属性，用于控制视频容器 宽高 绝对定位位置等
+
 ## 安装
 
 ```bash
@@ -43,9 +84,9 @@ npm install virtual-human-cf
 ### 全局注册
 
 ```javascript
-import { createApp } from 'vue';
-import App from './App.vue';
-import VirtualHumanCF from 'virtual-human-cf';
+import { createApp } from "vue";
+import App from "./App.vue";
+import VirtualHumanCF from "virtual-human-cf";
 
 const app = createApp(App);
 app.use(VirtualHumanCF);
@@ -54,7 +95,10 @@ app.use(VirtualHumanCF);
 ### 按需导入
 
 ```javascript
-import { VirtualHumanPersona, VirtualHumanEventAdapter } from 'virtual-human-cf';
+import {
+  VirtualHumanPersona,
+  VirtualHumanEventAdapter,
+} from "virtual-human-cf";
 ```
 
 ## 组件说明
@@ -65,24 +109,24 @@ import { VirtualHumanPersona, VirtualHumanEventAdapter } from 'virtual-human-cf'
 
 #### Props
 
-| 属性 | 类型 | 默认值 | 必填 | 说明 |
-|------|------|--------|------|------|
-| videoSrc | String | - | 是 | 视频源 URL |
-| visible | Boolean | true | 否 | 是否可见 |
-| isPlaying | Boolean | false | 否 | 是否正在播放 |
-| muted | Boolean | true | 否 | 是否静音 |
-| isDark | Boolean | false | 否 | 是否暗黑模式 |
-| screenClientId | String | - | 否 | 屏幕客户端 ID |
-| wsUrl | String | - | 否 | WebSocket 连接地址 |
-| styles | Object | - | 否 | 组件样式，包含 width、height、left、bottom 等属性 |
+| 属性           | 类型    | 默认值 | 必填 | 说明                                              |
+| -------------- | ------- | ------ | ---- | ------------------------------------------------- |
+| videoSrc       | String  | -      | 是   | 视频源 URL                                        |
+| visible        | Boolean | true   | 否   | 是否可见                                          |
+| isPlaying      | Boolean | false  | 否   | 是否正在播放                                      |
+| muted          | Boolean | true   | 否   | 是否静音                                          |
+| isDark         | Boolean | false  | 否   | 是否暗黑模式                                      |
+| screenClientId | String  | -      | 否   | 屏幕客户端 ID                                     |
+| wsUrl          | String  | -      | 否   | WebSocket 连接地址                                |
+| styles         | Object  | -      | 否   | 组件样式，包含 width、height、left、bottom 等属性 |
 
 #### Events
 
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
+| 事件名           | 说明         | 回调参数          |
+| ---------------- | ------------ | ----------------- |
 | update:isPlaying | 播放状态变更 | 播放状态(Boolean) |
-| update:visible | 可见性变更 | 可见状态(Boolean) |
-| ended | 播放结束 | - |
+| update:visible   | 可见性变更   | 可见状态(Boolean) |
+| ended            | 播放结束     | -                 |
 
 #### 示例
 
@@ -102,25 +146,25 @@ import { VirtualHumanPersona, VirtualHumanEventAdapter } from 'virtual-human-cf'
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { VirtualHumanPersona } from 'virtual-human-cf';
+import { ref } from "vue";
+import { VirtualHumanPersona } from "virtual-human-cf";
 
-const videoUrl = ref('https://example.com/video.mp4');
+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 clientId = ref("screen-123");
+const websocketUrl = ref("ws://localhost:8080/ws");
 const styles = ref({
-      width:'400px',
-      height:'500px',
-      left: '16px',
-      bottom:'16px'
-})
+  width: "400px",
+  height: "500px",
+  left: "16px",
+  bottom: "16px",
+});
 const onPlayingChange = (isPlaying) => {
-  console.log('播放状态改变:', isPlaying);
+  console.log("播放状态改变:", isPlaying);
 };
 
 const onEnded = () => {
-  console.log('播放结束');
+  console.log("播放结束");
 };
 </script>
 ```
@@ -131,27 +175,37 @@ const onEnded = () => {
 
 #### Props
 
-| 属性 | 类型 | 默认值 | 必填 | 说明 |
-|------|------|--------|------|------|
-| screenClientId | String | - | 是 | 屏幕客户端 ID |
-| wsUrl | String | - | 是 | WebSocket 连接地址 |
+| 属性           | 类型   | 默认值 | 必填 | 说明               |
+| -------------- | ------ | ------ | ---- | ------------------ |
+| screenClientId | String | -      | 是   | 屏幕客户端 ID      |
+| wsUrl          | String | -      | 是   | WebSocket 连接地址 |
 
 #### Events
 
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| connected | WebSocket 连接成功 | - |
-| eventNotifaction | 自定义事件接收器 | 载荷数据 |
-| end | 数字人对话结束 | 载荷数据 |
-| pause | 暂停播放 | 载荷数据 |
-| error | 错误事件 | 错误信息 |
-| playComplete | 播放完成，数字人对话结束，关闭数字人 | - |
-| controlEvent | 数字人控制事件 | 载荷数据 |
+| 事件名           | 说明                                 | 回调参数 |
+| ---------------- | ------------------------------------ | -------- |
+| connected        | WebSocket 连接成功                   | -        |
+| eventNotifaction | 自定义事件接收器                     | 载荷数据 |
+| end              | 数字人对话结束                       | 载荷数据 |
+| pause            | 暂停播放                             | 载荷数据 |
+| error            | 错误事件                             | 错误信息 |
+| playComplete     | 播放完成，数字人对话结束，关闭数字人 | -        |
+| controlEvent     | 数字人控制事件                       | 载荷数据 |
+
+#### refs
+
+| 方法名 | 说明     | 回调参数 |
+| ------ | -------- | -------- |
+| play   | 播放     |Promise<boolean> |
+| pause  | 暂停播放 |Promise<boolean> |
+| resume | 恢复播放 |Promise<boolean> |
+| stop   | 停止播放 |Promise<boolean> |
+
 
 ```js
 // eventNotifaction 载荷数据
 {
-  
+
     "type": "send_event",
     // 自定义事件名称
     "event": "heightlight",
@@ -182,6 +236,7 @@ tts_complete 文本转语音完成，不代表本地播放完成
     @controlEvent="onControlEvent"
     @end="onEnd"
     @error="onError"
+    ref="adapterRef"
   >
     <div>其他内容</div>
   </VirtualHumanEventAdapter>
@@ -212,6 +267,34 @@ const onEnd = (payload) => {
 const onError = (error) => {
   console.error('错误:', error);
 };
+
+const adapterRef = ref(null);
+const controlFunc = () => {
+  // 播放
+  adapterRef.value.play().then(res => {
+    // res boolean true 播放成功 false 播放失败
+  }).catch((error) => {
+    console.error('播放失败:', error);
+  });
+  // 暂停播放
+  adapterRef.value.pause().then(res => {
+    // res boolean true 暂停成功 false 暂停失败
+  }).catch((error) => {
+    console.error('暂停播放失败:', error);
+  });
+  // 恢复播放
+  adapterRef.value.resume().then(res => {
+    // res boolean true 恢复成功 false 恢复失败
+  }).catch((error) => {
+    console.error('恢复播放失败:', error);
+  });
+  // 停止播放
+  adapterRef.value.stop().then(res => {
+    // res boolean true 停止成功 false 停止失败
+  }).catch((error) => {
+    console.error('停止播放失败:', error);
+  });
+}
 </script>
 ```
 
@@ -235,7 +318,7 @@ const onError = (error) => {
       @update:visible="onPersonaVisibleUpdate"
       @ended="onVideoEnded"
     />
-    
+
     <VirtualHumanEventAdapter
       :screen-client-id="activeScreenClientId"
       :ws-url="websocketUrl"
@@ -315,4 +398,4 @@ npm run build
 
 ## 许可证
 
-MIT
+MIT

package/dist/api/request.d.ts

@@ -0,0 +1,2 @@
+declare const request: import('axios').AxiosInstance;
+export default request;

package/dist/api/screen.d.ts

@@ -0,0 +1,13 @@
+export interface ScreenConfig {
+    id?: number;
+    name: string;
+    screenClientId: string;
+    createTime?: string;
+    updateTime?: string;
+}
+export declare const getScreenList: () => Promise<ScreenConfig[]>;
+export declare const getScreenById: (id: number) => Promise<ScreenConfig>;
+export declare const createScreen: (data: ScreenConfig) => Promise<boolean>;
+export declare const updateScreen: (id: number, data: ScreenConfig) => Promise<boolean>;
+export declare const deleteScreen: (id: number) => Promise<boolean>;
+export declare const controlScreen: (screenClientId: string, action: "play" | "pause" | "stop" | "resume") => Promise<boolean>;

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

@@ -10,9 +10,14 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: StringConstructor;
         required: true;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    error: (...args: any[]) => void;
+}>, {
+    play: () => Promise<boolean>;
+    pause: () => Promise<boolean>;
+    resume: () => Promise<boolean>;
+    stop: () => Promise<boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     pause: (...args: any[]) => void;
+    error: (...args: any[]) => void;
     eventNotifaction: (...args: any[]) => void;
     controlEvent: (...args: any[]) => void;
     end: (...args: any[]) => void;
@@ -28,8 +33,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         required: true;
     };
 }>> & Readonly<{
-    onError?: ((...args: any[]) => any) | undefined;
     onPause?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
     onEventNotifaction?: ((...args: any[]) => any) | undefined;
     onControlEvent?: ((...args: any[]) => any) | undefined;
     onEnd?: ((...args: any[]) => any) | undefined;

package/dist/style.css

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