@zeewain/3d-avatar-sdk 1.2.1 → 1.2.3

package/dist/examples/test-vue3/src/components/BroadcastAPI.vue

@@ -0,0 +1,636 @@
+<template>
+  <div class="broadcast-api">
+    <div class="api-description">
+      <el-alert
+        title="API说明"
+        type="info"
+        :closable="false"
+        show-icon
+      >
+        <template template #default>
+          <div class="api-signature">
+            <code>startBroadcast(params: IBroadcastParams): Promise&lt;void&gt;</code>
+            <br />
+            <code>pauseBroadcast(): Promise&lt;void&gt;</code>
+            <br />
+            <code>resumeBroadcast(): Promise&lt;void&gt;</code>
+            <br />
+            <code>stopBroadcast(): Promise&lt;void&gt;</code>
+          </div>
+          <p>支持文本和音频两种播报模式，以及播报过程中的实时控制功能。token在SDK初始化时配置，支持流式播报。</p>
+          <p class="api-features">
+            ✅ 流式播报支持 &nbsp;&nbsp;
+            ✅ 实时控制功能 &nbsp;&nbsp;
+            ✅ 多种音频格式
+          </p>
+        </template>
+      </el-alert>
+    </div>
+
+    <div class="api-controls">
+      <el-card shadow="hover" class="control-card">
+        <template #header>
+          <div class="card-header">
+          <span>智能播报控制</span>
+          <el-tag v-if="sdkStatus.canBroadcast" type="success" size="default">可用</el-tag>
+          <el-tag v-else type="info" size="default">不可用</el-tag>
+          </div>
+        </template>
+
+        <div class="control-content">
+          <!-- 播报模式选择 -->
+          <div class="mode-selector">
+            <el-radio-group v-model="broadcastMode" size="default">
+              <el-radio-button value="text">
+                <i class="el-icon-chat-dot-round"></i>
+                文本播报
+              </el-radio-button>
+              <el-radio-button value="audio">
+                <i class="el-icon-headset"></i>
+                音频播报
+              </el-radio-button>
+            </el-radio-group>
+          </div>
+
+          <!-- 文本播报表单 -->
+          <div v-if="broadcastMode === 'text'" class="form-content">
+            <el-form :model="textFormData" label-width="80px" size="default">
+              <el-form-item label="播报文本" required>
+                <el-input
+                  v-model="textFormData.text"
+                  type="textarea"
+                  :rows="3"
+                  placeholder="请输入播报文本..."
+                  :disabled="!sdkStatus.canBroadcast"
+                  maxlength="500"
+                  show-word-limit
+                />
+              </el-form-item>
+
+              <el-form-item label="音色编码" required>
+                <el-input
+                  v-model="textFormData.voiceCode"
+                  placeholder="请输入音色编码"
+                  prefix-icon="microphone"
+                  :disabled="!sdkStatus.canBroadcast"
+                />
+                <div class="input-help">
+                  <span class="help-text">
+                    常用音色：woman008、man001、child001等
+                  </span>
+                </div>
+              </el-form-item>
+
+              <el-form-item label="音量" required>
+                <el-slider
+                  v-model="textFormData.volume"
+                  :min="0"
+                  :max="1"
+                  :step="0.1"
+                  :disabled="!sdkStatus.canBroadcast"
+                  show-input
+                />
+              </el-form-item>
+
+              <el-form-item label="语速">
+                <el-slider
+                  v-model="textFormData.speed"
+                  :min="0.5"
+                  :max="2.0"
+                  :step="0.1"
+                  :disabled="!sdkStatus.canBroadcast"
+                  show-input
+                />
+              </el-form-item>
+
+              <el-form-item label="动作列表">
+                <el-input
+                  v-model="textFormData.broadcastMotionString"
+                  placeholder="请输入动作列表"
+                />
+                <div class="input-help">
+                  <span class="help-text">
+                    动作编码列表，多个动作编码用逗号分隔
+                  </span>
+                </div>
+              </el-form-item>
+              <el-form-item class="action-buttons">
+                <el-button
+                  type="primary"
+                  icon="chat-dot-round"
+                  :loading="isTextLoading"
+                  :disabled="!sdkStatus.canBroadcast || !textFormData.text || !textFormData.voiceCode || !globalConfig.avatarCode"
+                  @click="handleTextBroadcast"
+                >
+                  {{ isTextLoading ? '播报中...' : '执行文本播报' }}
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <!-- 音频播报表单 -->
+          <div v-if="broadcastMode === 'audio'" class="form-content">
+            <el-form :model="audioFormData" label-width="80px" size="default">
+              <el-form-item label="播报文本">
+                <el-input
+                  v-model="audioFormData.audioText"
+                  type="textarea"
+                  :rows="3"
+                  placeholder="播报文本（可选，用于字幕显示）"
+                  :disabled="!sdkStatus.canBroadcast"
+                  maxlength="500"
+                  show-word-limit
+                />
+              </el-form-item>
+
+              <el-form-item label="音频地址" required>
+                <el-input
+                  v-model="audioFormData.audioUrl"
+                  placeholder="请输入音频URL地址"
+                  prefix-icon="link"
+                  :disabled="!sdkStatus.canBroadcast"
+                />
+                <div class="input-help">
+                  <span class="help-text">
+                    支持MP3、WAV格式，建议使用HTTPS地址，文件大小建议小于5MB
+                  </span>
+                </div>
+              </el-form-item>
+
+              <el-form-item label="音量">
+                <el-slider
+                  v-model="audioFormData.volume"
+                  :min="0"
+                  :max="1"
+                  :step="0.1"
+                  :disabled="!sdkStatus.canBroadcast"
+                  show-input
+                />
+              </el-form-item>
+
+              <el-form-item label="动作列表">
+                <el-input
+                  v-model="audioFormData.broadcastMotionString"
+                  placeholder="请输入动作列表"
+                />
+                <div class="input-help">
+                  <span class="help-text">
+                    动作编码列表，多个动作编码用逗号分隔
+                  </span>
+                </div>
+              </el-form-item>
+
+              <el-form-item class="action-buttons">
+                <el-button
+                  type="primary"
+                  icon="headset"
+                  :loading="isAudioLoading"
+                  :disabled="!sdkStatus.canBroadcast || !audioFormData.audioUrl || !globalConfig.avatarCode"
+                  @click="handleAudioBroadcast"
+                >
+                  {{ isAudioLoading ? '播报中...' : '执行音频播报' }}
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <!-- 播报控制按钮 -->
+          <div class="broadcast-controls">
+            <div class="controls-header">
+              <span class="controls-title">播报控制</span>
+              <el-tag v-if="sdkStatus.canControlBroadcast" type="success" size="default">可控制</el-tag>
+              <el-tag v-else type="info" size="default">不可控制</el-tag>
+            </div>
+
+            <div class="control-buttons">
+              <el-button
+                type="warning"
+                size="default"
+                :icon="VideoPause"
+                :loading="pauseLoading"
+                :disabled="!sdkStatus.canControlBroadcast"
+                @click="handlePauseBroadcast"
+              >
+                {{ pauseLoading ? '暂停中...' : '暂停' }}
+              </el-button>
+
+              <el-button
+                type="success"
+                size="default"
+                :icon="VideoPlay"
+                :loading="resumeLoading"
+                :disabled="!sdkStatus.canControlBroadcast"
+                @click="handleResumeBroadcast"
+              >
+                {{ resumeLoading ? '恢复中...' : '恢复' }}
+              </el-button>
+
+              <el-button
+                type="danger"
+                size="default"
+                :icon="Close"
+                :loading="stopLoading"
+                :disabled="!sdkStatus.canControlBroadcast"
+                @click="handleStopBroadcast"
+              >
+                {{ stopLoading ? '停止中...' : '停止' }}
+              </el-button>
+            </div>
+          </div>
+
+          <div class="status-tips">
+            <el-alert
+              v-if="!sdkStatus.canBroadcast"
+              title="请先初始化Avatar后再进行播报"
+              type="warning"
+              :closable="false"
+              show-icon
+            />
+            <el-alert
+              v-else-if="!globalConfig.avatarCode"
+              title="请先在全局配置中设置Avatar Code"
+              type="warning"
+              :closable="false"
+              show-icon
+            />
+          </div>
+        </div>
+      </el-card>
+    </div>
+
+    <div class="api-result">
+      <el-card shadow="hover" class="result-card">
+        <template #header>
+          <div class="card-header">
+          <span>执行结果</span>
+          <el-link
+            size="default"
+            icon="refresh"
+            @click="clearResult"
+          >
+            清空
+          </el-link>
+          </div>
+        </template>
+
+        <div class="result-content">
+          <pre class="result-text">{{ result }}</pre>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+import { VideoPause, VideoPlay, Close } from '@element-plus/icons-vue';
+
+interface ISDKStatus {
+  canBroadcast: boolean;
+  canControlBroadcast: boolean;
+}
+interface IGlobalConfig {
+  avatarCode: string;
+}
+
+const props = defineProps<{
+  sdkStatus: ISDKStatus;
+  globalConfig: IGlobalConfig;
+}>();
+const emit = defineEmits<{
+  (e: 'text-broadcast', params: any): void;
+  (e: 'audio-broadcast', params: any): void;
+  (e: 'pause-broadcast'): void;
+  (e: 'resume-broadcast'): void;
+  (e: 'stop-broadcast'): void;
+}>();
+
+const broadcastMode = ref<'text' | 'audio'>('text');
+const textFormData = reactive({
+  text: '欢迎使用ZEEAvatarSDK智能体播报功能。这是一个强大的数字人解决方案，支持文本和音频两种播报模式，让您的应用更具互动性！',
+  volume: 1.0,
+  speed: 1.0,
+  voiceCode: 'VOICE_INT_W_000002',
+  broadcastMotionString: 'DH_ACTION_MODEL103_000003,DH_ACTION_MODEL103_000005',
+});
+const audioFormData = reactive({
+  audioText: '欢迎使用ZEEAvatarSDK智能体播报功能',
+  audioUrl: 'https://example.com/audio/sample.mp3',
+  volume: 1.0,
+  broadcastMotionString: 'DH_ACTION_MODEL103_000023,DH_ACTION_MODEL103_000010',
+});
+const result = ref(
+  '等待播报操作...\n\n新版SDK特性：\n- 支持流式播报，实时响应\n- 内置事件回调机制\n- token统一管理，无需重复传递\n- 支持音量和语速控制\n- 实时播报控制（暂停/恢复/停止）'
+);
+const isTextLoading = ref(false);
+const isAudioLoading = ref(false);
+const pauseLoading = ref(false);
+const resumeLoading = ref(false);
+const stopLoading = ref(false);
+
+async function handleTextBroadcast() {
+  const { text, volume, speed, voiceCode, broadcastMotionString } = textFormData;
+  const { avatarCode } = props.globalConfig;
+  if (!avatarCode) {
+    result.value = '❌ 请先在全局配置中设置Avatar Code';
+    ElMessage.warning('请先设置Avatar Code');
+    return;
+  }
+  if (!text || !voiceCode) {
+    result.value = '❌ 播报文本和音色编码不能为空';
+    ElMessage.warning('请填写完整的播报信息');
+    return;
+  }
+  isTextLoading.value = true;
+  result.value = `🔄 正在执行文本播报...\n📝 播报文本: ${text.substring(0, 30)}${text.length > 30 ? '...' : ''}\n🎤 音色编码: ${voiceCode}\n🔊 音量: ${volume}\n⚡ 语速: ${speed}\n\n📡 流式播报中，请等待服务器响应...`;
+  try {
+    emit('text-broadcast', { avatarCode, text, volume, speed, voiceCode, broadcastMotionString });
+    setTimeout(() => {
+      isTextLoading.value = false;
+      result.value = '✅ 文本播报请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 播报将以流式方式进行\n- 可使用下方控制按钮暂停/继续/停止\n- 播报过程中会触发相应的事件回调';
+    }, 1000);
+  } catch (error: any) {
+    isTextLoading.value = false;
+    result.value = `❌ 播报失败: ${error.message}\n\n🔍 可能的原因：\n- 网络连接问题\n- 音色编码不存在\n- 服务器繁忙\n- 文本内容不符合要求`;
+    ElMessage.error(`播报失败: ${error.message}`);
+  }
+}
+
+async function handleAudioBroadcast() {
+  const { audioText, audioUrl, volume, broadcastMotionString } = audioFormData;
+  const { avatarCode } = props.globalConfig;
+  if (!avatarCode) {
+    result.value = '❌ 请先在全局配置中设置Avatar Code';
+    ElMessage.warning('请先设置Avatar Code');
+    return;
+  }
+  if (!audioUrl) {
+    result.value = '❌ 音频URL不能为空';
+    ElMessage.warning('请填写音频URL');
+    return;
+  }
+  isAudioLoading.value = true;
+  result.value = `🔄 正在执行音频播报...\n🎵 音频地址: ${audioUrl}\n📝 字幕文本: ${audioText || '无'}\n🔊 音量: ${volume}\n\n📡 正在验证音频文件并加载...`;
+  try {
+    emit('audio-broadcast', { avatarCode, audioText, audioUrl, volume, broadcastMotionString });
+    setTimeout(() => {
+      isAudioLoading.value = false;
+      result.value = '✅ 音频播报请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 音频将直接驱动数字人口型\n- 支持MP3、WAV等格式\n- 可使用下方控制按钮进行控制';
+    }, 1000);
+  } catch (error: any) {
+    isAudioLoading.value = false;
+    result.value = `❌ 播报失败: ${error.message}\n\n🔍 可能的原因：\n- 音频文件无法访问\n- 音频格式不支持\n- 文件过大（建议<5MB）\n- 网络连接问题`;
+    ElMessage.error(`播报失败: ${error.message}`);
+  }
+}
+
+function handlePauseBroadcast() {
+  pauseLoading.value = true;
+  result.value = '🔄 正在暂停播报...\n📡 发送暂停指令到Unity引擎...';
+  try {
+    emit('pause-broadcast');
+    setTimeout(() => {
+      pauseLoading.value = false;
+      result.value = '⏸️ 播报暂停请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 播报已暂停，可以随时恢复\n- 暂停状态下可以开始新的播报\n- 使用恢复按钮继续当前播报';
+    }, 800);
+  } catch (error: any) {
+    pauseLoading.value = false;
+    result.value = `❌ 暂停播报失败: ${error.message}\n\n🔍 可能的原因：\n- 当前没有正在播报的内容\n- Unity通信异常\n- 播报服务未初始化`;
+  }
+}
+
+function handleResumeBroadcast() {
+  resumeLoading.value = true;
+  result.value = '🔄 正在恢复播报...\n📡 发送恢复指令到Unity引擎...';
+  try {
+    emit('resume-broadcast');
+    setTimeout(() => {
+      resumeLoading.value = false;
+      result.value = '▶️ 播报恢复请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 播报已恢复，继续之前的内容\n- 可以随时再次暂停或停止\n- 播报完成后会自动结束';
+    }, 800);
+  } catch (error: any) {
+    resumeLoading.value = false;
+    result.value = `❌ 恢复播报失败: ${error.message}\n\n🔍 可能的原因：\n- 当前没有暂停的播报内容\n- Unity通信异常\n- 播报服务未初始化`;
+  }
+}
+
+function handleStopBroadcast() {
+  stopLoading.value = true;
+  result.value = '🔄 正在停止播报...\n📡 发送停止指令到Unity引擎...\n🧹 清理播报资源和队列...';
+  try {
+    emit('stop-broadcast'); 
+    setTimeout(() => {   
+      stopLoading.value = false; 
+      result.value = '⏹️ 播报停止请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 播报已完全停止\n- 所有播报队列已清空\n- 可以开始新的播报任务';
+    }, 800);
+  } catch (error: any) {
+    stopLoading.value = false;
+    result.value = `❌ 停止播报失败: ${error.message}\n\n🔍 可能的原因：\n- Unity通信异常\n- 播报服务未初始化\n- 系统资源异常`;
+  }
+}
+ 
+function clearResult() {
+  result.value = '等待播报操作...\n\n新版SDK特性：\n- 支持流式播报，实时响应\n- 内置事件回调机制\n- token统一管理，无需重复传递\n- 支持音量和语速控制\n- 实时播报控制（暂停/恢复/停止）';
+}
+</script>
+
+<style lang="scss" scoped>
+.broadcast-api {
+  .api-description {
+    margin-bottom: 20px;
+    .api-signature {
+      background-color: #f5f5f5;
+      padding: 8px 12px;
+      border-radius: 4px;
+      margin-bottom: 10px;
+      font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
+      font-size: 12px;
+      border-left: 4px solid #67c23a;
+      code {
+        color: #2c3e50;
+        font-weight: 600;
+        display: block;
+        margin: 2px 0;
+      }
+    }
+    p {
+      margin: 5px 0;
+      color: #606266;
+      font-size: 14px;
+      &.api-features {
+        color: #67c23a;
+        font-weight: 500;
+        margin-top: 8px;
+      }
+    }
+  }
+  .api-controls {
+    margin-bottom: 20px;
+    .control-card {
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 600;
+      }
+      .control-content {
+        .mode-selector {
+          margin-bottom: 20px;
+          text-align: center;
+          .el-radio-group {
+            width: 100%;
+            .el-radio-button {
+              flex: 1;
+              :deep(.el-radio-button__inner) {
+                width: 100%;
+                padding: 8px 15px;
+                i {
+                  margin-right: 5px;
+                }
+              }
+            }
+          }
+        }
+        .form-content {
+          .el-form-item {
+            margin-bottom: 18px;
+            :deep(.el-form-item__label) {
+              font-weight: 500;
+              color: #303133;
+            }
+            &.action-buttons {
+              margin-bottom: 0;
+              margin-top: 25px;
+              .el-button {
+                width: 100%;
+                padding: 10px 0;
+                font-weight: 500;
+              }
+            }
+            .input-help {
+              margin-top: 5px;
+              .help-text {
+                font-size: 12px;
+                color: #909399;
+                line-height: 1.4;
+              }
+            }
+          }
+        }
+
+        // 播报控制样式
+        .broadcast-controls {
+          margin-top: 25px;
+          padding: 15px;
+          border: 1px solid #e4e7ed;
+          border-radius: 6px;
+          background-color: #fafbfc;
+          .controls-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+            .controls-title {
+              font-weight: 600;
+              color: #303133;
+              font-size: 14px;
+            }
+          }
+          .control-buttons {
+            display: flex;
+            gap: 8px;
+            .el-button {
+              flex: 1;
+              font-size: 12px;
+              padding: 8px 12px;
+            }
+          }
+        }
+        .status-tips {
+          margin-top: 15px;
+          .el-alert {
+            margin-bottom: 10px;
+            &:last-child {
+              margin-bottom: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+  .api-result {
+    .result-card {
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 600;
+      }
+      .result-content {
+        max-height: 300px;
+        overflow-y: auto;
+        .result-text {
+          margin: 0;
+          padding: 15px;
+          background-color: #f8f9fa;
+          border-radius: 4px;
+          border: 1px solid #e9ecef;
+          font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
+          font-size: 13px;
+          line-height: 1.6;
+          color: #2c3e50;
+          white-space: pre-wrap;
+          word-wrap: break-word;
+        }
+      }
+    }
+  }
+}
+
+// 移动端优化
+@media screen and (width <= 768px) {
+  .broadcast-api {
+    .mode-selector {
+      .el-radio-group {
+        .el-radio-button {
+          :deep(.el-radio-button__inner) {
+            padding: 6px 10px;
+            font-size: 12px;
+            i {
+              margin-right: 3px;
+            }
+          }
+        }
+      }
+    }
+    .form-content {
+      .el-form {
+        :deep(.el-form-item__label) {
+          font-size: 13px;
+        }
+        .el-textarea {
+          :deep(.el-textarea__inner) {
+            font-size: 13px;
+          }
+        }
+        .el-input {
+          :deep(.el-input__inner) {
+            font-size: 13px;
+          }
+        }
+      }
+    }
+    .broadcast-controls {
+      .control-buttons {
+        flex-direction: column;
+        gap: 8px;
+        .el-button {
+          width: 100%;
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+</style>