Forráskód Böngészése

✨ feat(sdk-test): 添加STT数据监听和状态显示功能

- 新增sttData状态变量存储转录数据
- 实现onSttDataChanged事件处理函数,监听转录状态变化
- 绑定rtmManager的sttDataChanged事件,实现转录状态自动更新
- 在组件卸载时移除事件监听,避免内存泄漏
- 优化转录状态展示,增加任务ID、开始时间和持续时间等详细信息显示
- 添加转录状态变更日志记录,提升调试体验
yourname 2 hónapja
szülő
commit
19d42520f1
1 módosított fájl, 50 hozzáadás és 11 törlés
  1. 50 11
      src/pages/sdk-test/index.tsx

+ 50 - 11
src/pages/sdk-test/index.tsx

@@ -31,12 +31,29 @@ const SdkTestPage = () => {
   const [isTranscriptionActive, setIsTranscriptionActive] = useState(false)
   const [transcriptionStatus, setTranscriptionStatus] = useState<string>("idle")
   const [testResults, setTestResults] = useState<string[]>([])
+  const [sttData, setSttData] = useState<any>({})
 
   // 添加测试日志
   const addTestLog = (log: string) => {
     setTestResults((prev) => [...prev, `${new Date().toLocaleTimeString()}: ${log}`])
   }
 
+  // 监听STT数据变化
+  const onSttDataChanged = (data: any) => {
+    console.log("[SDK Test] sttDataChanged:", data)
+    setSttData(data)
+
+    if (data.status === "start") {
+      setIsTranscriptionActive(true)
+      setTranscriptionStatus("active")
+      addTestLog("📢 转录状态更新: 转录已开始")
+    } else if (data.status === "end") {
+      setIsTranscriptionActive(false)
+      setTranscriptionStatus("stopped")
+      addTestLog("📢 转录状态更新: 转录已停止")
+    }
+  }
+
   // 初始化SDK
   const initializeSdk = async (values: {
     appId: string
@@ -62,6 +79,9 @@ const SdkTestPage = () => {
       const sttManager = newSdk.createSttManager()
       const rtmManager = newSdk.createRtmManager()
 
+      // 监听RTM管理器的事件
+      rtmManager.on("sttDataChanged", onSttDataChanged)
+
       setSttManager(sttManager)
       setRtmManager(rtmManager)
       addTestLog("✅ STT和RTM管理器创建成功")
@@ -196,6 +216,7 @@ const SdkTestPage = () => {
       }
 
       if (rtmManager) {
+        rtmManager.off("sttDataChanged", onSttDataChanged)
         await rtmManager.destroy()
         setRtmManager(null)
         setIsRtmManagerJoined(false)
@@ -357,17 +378,35 @@ const SdkTestPage = () => {
             <Alert
               message="转录状态"
               description={
-                transcriptionStatus === "idle"
-                  ? "等待开始转录"
-                  : transcriptionStatus === "starting"
-                    ? "正在启动转录..."
-                    : transcriptionStatus === "active"
-                      ? "转录进行中"
-                      : transcriptionStatus === "stopping"
-                        ? "正在停止转录..."
-                        : transcriptionStatus === "stopped"
-                          ? "转录已停止"
-                          : "状态异常"
+                <div>
+                  <div>
+                    {transcriptionStatus === "idle"
+                      ? "等待开始转录"
+                      : transcriptionStatus === "starting"
+                        ? "正在启动转录..."
+                        : transcriptionStatus === "active"
+                          ? "转录进行中"
+                          : transcriptionStatus === "stopping"
+                            ? "正在停止转录..."
+                            : transcriptionStatus === "stopped"
+                              ? "转录已停止"
+                              : "状态异常"}
+                  </div>
+                  {sttData.status && (
+                    <div style={{ marginTop: 8, fontSize: "12px", color: "#666" }}>
+                      <div>任务ID: {sttData.taskId || "未设置"}</div>
+                      <div>
+                        开始时间:{" "}
+                        {sttData.startTime
+                          ? new Date(sttData.startTime).toLocaleTimeString()
+                          : "未开始"}
+                      </div>
+                      <div>
+                        持续时间: {sttData.duration ? `${sttData.duration / 1000}秒` : "未设置"}
+                      </div>
+                    </div>
+                  )}
+                </div>
               }
               type={
                 transcriptionStatus === "active"