@zeewain/3d-avatar-sdk 1.2.0 → 1.2.2

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

@@ -0,0 +1,666 @@
+<template>
+  <div class="broadcast-api">
+    <div class="api-description">
+      <el-alert
+        title="API说明"
+        type="info"
+        :closable="false"
+        show-icon
+      >
+        <template slot="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">
+        <div slot="header" class="card-header">
+          <span>智能播报控制</span>
+          <el-tag v-if="sdkStatus.canBroadcast" type="success" size="mini">可用</el-tag>
+          <el-tag v-else type="info" size="mini">不可用</el-tag>
+        </div>
+
+        <div class="control-content">
+          <!-- 播报模式选择 -->
+          <div class="mode-selector">
+            <el-radio-group v-model="broadcastMode" size="small">
+              <el-radio-button label="text">
+                <i class="el-icon-chat-dot-round"></i>
+                文本播报
+              </el-radio-button>
+              <el-radio-button label="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="small">
+              <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="el-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 class="action-buttons">
+                <el-button
+                  type="primary"
+                  size="medium"
+                  icon="el-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="small">
+              <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="el-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 class="action-buttons">
+                <el-button
+                  type="primary"
+                  size="medium"
+                  icon="el-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="mini">可控制</el-tag>
+              <el-tag v-else type="info" size="mini">不可控制</el-tag>
+            </div>
+
+            <div class="control-buttons">
+              <el-button
+                type="warning"
+                size="small"
+                icon="el-icon-video-pause"
+                :loading="pauseLoading"
+                :disabled="!sdkStatus.canControlBroadcast"
+                @click="handlePauseBroadcast"
+              >
+                {{ pauseLoading ? '暂停中...' : '暂停' }}
+              </el-button>
+
+              <el-button
+                type="success"
+                size="small"
+                icon="el-icon-video-play"
+                :loading="resumeLoading"
+                :disabled="!sdkStatus.canControlBroadcast"
+                @click="handleResumeBroadcast"
+              >
+                {{ resumeLoading ? '恢复中...' : '恢复' }}
+              </el-button>
+
+              <el-button
+                type="danger"
+                size="small"
+                icon="el-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">
+        <div slot="header" class="card-header">
+          <span>执行结果</span>
+          <el-button
+            type="text"
+            size="mini"
+            icon="el-icon-refresh"
+            @click="clearResult"
+          >
+            清空
+          </el-button>
+        </div>
+
+        <div class="result-content">
+          <pre class="result-text">{{ result }}</pre>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BroadcastAPI',
+  props: {
+    sdkStatus: {
+      type: Object,
+      required: true
+    },
+    globalConfig: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      broadcastMode: 'text',
+      textFormData: {
+        text: '欢迎使用ZEEAvatarSDK智能体播报功能。这是一个强大的数字人解决方案，支持文本和音频两种播报模式，让您的应用更具互动性！',
+        volume: 1.0,
+        speed: 1.0,
+        voiceCode: 'woman008'
+      },
+      audioFormData: {
+        audioText: '欢迎使用ZEEAvatarSDK智能体播报功能',
+        audioUrl: 'https://example.com/audio/sample.mp3',
+        volume: 1.0
+      },
+      result: '等待播报操作...\n\n新版SDK特性：\n- 支持流式播报，实时响应\n- 内置事件回调机制\n- token统一管理，无需重复传递\n- 支持音量和语速控制\n- 实时播报控制（暂停/恢复/停止）',
+      isTextLoading: false,
+      isAudioLoading: false,
+      // 播报控制状态
+      pauseLoading: false,
+      resumeLoading: false,
+      stopLoading: false
+    }
+  },
+  methods: {
+    async handleTextBroadcast () {
+      const { text, volume, speed, voiceCode } = this.textFormData
+      const { avatarCode } = this.globalConfig
+
+      if (!avatarCode) {
+        this.result = '❌ 请先在全局配置中设置Avatar Code'
+        this.$message.warning('请先设置Avatar Code')
+        return
+      }
+
+      if (!text || !voiceCode) {
+        this.result = '❌ 播报文本和音色编码不能为空'
+        this.$message.warning('请填写完整的播报信息')
+        return
+      }
+
+      this.isTextLoading = true
+      this.result = `🔄 正在执行文本播报...\n📝 播报文本: ${text.substring(0, 30)}${text.length > 30 ? '...' : ''}\n🎤 音色编码: ${voiceCode}\n🔊 音量: ${volume}\n⚡ 语速: ${speed}\n\n📡 流式播报中，请等待服务器响应...`
+
+      try {
+        this.$emit('text-broadcast', {
+          avatarCode,
+          text,
+          volume,
+          speed,
+          voiceCode
+        })
+
+        // 模拟加载时间
+        setTimeout(() => {
+          this.isTextLoading = false
+          this.result = '✅ 文本播报请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 播报将以流式方式进行\n- 可使用下方控制按钮暂停/继续/停止\n- 播报过程中会触发相应的事件回调'
+        }, 1000)
+      } catch (error) {
+        this.isTextLoading = false
+        this.result = `❌ 播报失败: ${error.message}\n\n🔍 可能的原因：\n- 网络连接问题\n- 音色编码不存在\n- 服务器繁忙\n- 文本内容不符合要求`
+        this.$message.error(`播报失败: ${error.message}`)
+      }
+    },
+
+    async handleAudioBroadcast () {
+      const { audioText, audioUrl, volume } = this.audioFormData
+      const { avatarCode } = this.globalConfig
+
+      if (!avatarCode) {
+        this.result = '❌ 请先在全局配置中设置Avatar Code'
+        this.$message.warning('请先设置Avatar Code')
+        return
+      }
+
+      if (!audioUrl) {
+        this.result = '❌ 音频URL不能为空'
+        this.$message.warning('请填写音频URL')
+        return
+      }
+
+      this.isAudioLoading = true
+      this.result = `🔄 正在执行音频播报...\n🎵 音频地址: ${audioUrl}\n📝 字幕文本: ${audioText || '无'}\n🔊 音量: ${volume}\n\n📡 正在验证音频文件并加载...`
+
+      try {
+        this.$emit('audio-broadcast', {
+          avatarCode,
+          audioText,
+          audioUrl,
+          volume
+        })
+
+        // 模拟加载时间
+        setTimeout(() => {
+          this.isAudioLoading = false
+          this.result = '✅ 音频播报请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 音频将直接驱动数字人口型\n- 支持MP3、WAV等格式\n- 可使用下方控制按钮进行控制'
+        }, 1000)
+      } catch (error) {
+        this.isAudioLoading = false
+        this.result = `❌ 播报失败: ${error.message}\n\n🔍 可能的原因：\n- 音频文件无法访问\n- 音频格式不支持\n- 文件过大（建议<5MB）\n- 网络连接问题`
+        this.$message.error(`播报失败: ${error.message}`)
+      }
+    },
+
+    // 播报控制方法
+    handlePauseBroadcast () {
+      this.pauseLoading = true
+      this.result = '🔄 正在暂停播报...\n📡 发送暂停指令到Unity引擎...'
+
+      try {
+        this.$emit('pause-broadcast')
+
+        setTimeout(() => {
+          this.pauseLoading = false
+          this.result = '⏸️ 播报暂停请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 播报已暂停，可以随时恢复\n- 暂停状态下可以开始新的播报\n- 使用恢复按钮继续当前播报'
+        }, 800)
+      } catch (error) {
+        this.pauseLoading = false
+        this.result = `❌ 暂停播报失败: ${error.message}\n\n🔍 可能的原因：\n- 当前没有正在播报的内容\n- Unity通信异常\n- 播报服务未初始化`
+      }
+    },
+
+    handleResumeBroadcast () {
+      this.resumeLoading = true
+      this.result = '🔄 正在恢复播报...\n📡 发送恢复指令到Unity引擎...'
+
+      try {
+        this.$emit('resume-broadcast')
+
+        setTimeout(() => {
+          this.resumeLoading = false
+          this.result = '▶️ 播报恢复请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 播报已恢复，继续之前的内容\n- 可以随时再次暂停或停止\n- 播报完成后会自动结束'
+        }, 800)
+      } catch (error) {
+        this.resumeLoading = false
+        this.result = `❌ 恢复播报失败: ${error.message}\n\n🔍 可能的原因：\n- 当前没有暂停的播报内容\n- Unity通信异常\n- 播报服务未初始化`
+      }
+    },
+
+    handleStopBroadcast () {
+      this.stopLoading = true
+      this.result = '🔄 正在停止播报...\n📡 发送停止指令到Unity引擎...\n🧹 清理播报资源和队列...'
+
+      try {
+        this.$emit('stop-broadcast')
+
+        setTimeout(() => {
+          this.stopLoading = false
+          this.result = '⏹️ 播报停止请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 播报已完全停止\n- 所有播报队列已清空\n- 可以开始新的播报任务'
+        }, 800)
+      } catch (error) {
+        this.stopLoading = false
+        this.result = `❌ 停止播报失败: ${error.message}\n\n🔍 可能的原因：\n- Unity通信异常\n- 播报服务未初始化\n- 系统资源异常`
+      }
+    },
+
+    clearResult () {
+      this.result = '等待播报操作...\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>