Browse Source

✨ feat(sdk-test): add real-time transcription and translation display

- implement onTextStreamReceived handler to process transcription and translation results
- add event listener for "textstreamReceived" event from rtcManager
- update sttData state to trigger subtitle display with real-time transcription
- handle translation results and display them with language labels
- add cleanup for textstreamReceived event listener when component unmounts
- add test logs for real-time transcription and translation results
yourname 2 months ago
parent
commit
3046a545cf
1 changed files with 55 additions and 0 deletions
  1. 55 0
      src/pages/sdk-test/index.tsx

+ 55 - 0
src/pages/sdk-test/index.tsx

@@ -50,6 +50,51 @@ const SdkTestPage = () => {
     setTestResults((prev) => [...prev, `${new Date().toLocaleTimeString()}: ${log}`])
   }
 
+  // 监听文本流事件(实时转录结果)
+  const onTextStreamReceived = (textstream: any) => {
+    console.log("[SDK Test] textstreamReceived:", textstream)
+
+    // 处理实时转录结果,更新字幕显示
+    if (textstream.dataType === "transcribe") {
+      const words = textstream.words || []
+      const textStr = words.map((word: any) => word.text).join("")
+
+      if (textStr) {
+        // 更新sttData以触发字幕显示
+        setSttData((prev: any) => ({
+          ...prev,
+          transcribe1: textStr,
+          userName: "当前用户",
+          timestamp: Date.now(),
+        }))
+
+        addTestLog(`🎯 实时转录: ${textStr}`)
+      }
+    }
+
+    // 处理翻译结果
+    if (textstream.dataType === "translate" && textstream.trans?.length) {
+      const translations = textstream.trans.map((transItem: any, index: number) => ({
+        lang: transItem.lang,
+        text: transItem.texts?.join("") || "",
+      }))
+
+      if (translations.length > 0) {
+        setSttData((prev: any) => ({
+          ...prev,
+          translate1List: translations,
+          timestamp: Date.now(),
+        }))
+
+        translations.forEach((trans: any) => {
+          if (trans.text) {
+            addTestLog(`🌐 实时翻译[${trans.lang}]: ${trans.text}`)
+          }
+        })
+      }
+    }
+  }
+
   // 监听STT数据变化
   const onSttDataChanged = (data: any) => {
     console.log("[SDK Test] sttDataChanged:", data)
@@ -117,6 +162,9 @@ const SdkTestPage = () => {
       // 监听RTM管理器的事件
       rtmManager.on("sttDataChanged", onSttDataChanged)
 
+      // 监听RTC管理器的文本流事件(实时转录结果)
+      rtcManager.on("textstreamReceived", onTextStreamReceived)
+
       setSttManager(sttManager)
       setRtmManager(rtmManager)
       setRtcManager(rtcManager)
@@ -288,6 +336,13 @@ const SdkTestPage = () => {
         setRtmManager(null)
       }
 
+      if (rtcManager) {
+        rtcManager.off("textstreamReceived", onTextStreamReceived)
+        await rtcManager.destroy()
+        setRtcManager(null)
+        setIsRtcManagerJoined(false)
+      }
+
       if (sdk) {
         await sdk.destroy()
         setSdk(null)