|
@@ -1,5 +1,5 @@
|
|
|
import { useState, useEffect } from "react"
|
|
import { useState, useEffect } from "react"
|
|
|
-import { Card, Button, Input, Form, message, Space, Typography, Divider, Alert } from "antd"
|
|
|
|
|
|
|
+import { Card, Button, Input, Form, message, Space, Typography, Divider, Alert, Select } from "antd"
|
|
|
import {
|
|
import {
|
|
|
InfoCircleOutlined,
|
|
InfoCircleOutlined,
|
|
|
PlayCircleOutlined,
|
|
PlayCircleOutlined,
|
|
@@ -12,70 +12,61 @@ import { useNavigate } from "react-router-dom"
|
|
|
|
|
|
|
|
import styles from "./index.module.scss"
|
|
import styles from "./index.module.scss"
|
|
|
|
|
|
|
|
-const { Title, Text } = Typography
|
|
|
|
|
|
|
+// 导入SDK核心模块
|
|
|
|
|
+import { SttSdk } from "../../../packages/stt-sdk-core/src"
|
|
|
|
|
+import type {
|
|
|
|
|
+ ISttManagerAdapter,
|
|
|
|
|
+ IRtmManagerAdapter,
|
|
|
|
|
+ IRtcManagerAdapter,
|
|
|
|
|
+} from "../../../packages/stt-sdk-core/src/types"
|
|
|
|
|
|
|
|
-// UMD格式SDK的全局变量声明
|
|
|
|
|
-declare global {
|
|
|
|
|
- interface Window {
|
|
|
|
|
- SttSdkCore: any
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
|
|
+const { Title, Text } = Typography
|
|
|
|
|
|
|
|
const UmdTestPage = () => {
|
|
const UmdTestPage = () => {
|
|
|
const nav = useNavigate()
|
|
const nav = useNavigate()
|
|
|
const [messageApi, contextHolder] = message.useMessage()
|
|
const [messageApi, contextHolder] = message.useMessage()
|
|
|
|
|
|
|
|
const [form] = Form.useForm()
|
|
const [form] = Form.useForm()
|
|
|
- const [sdk, setSdk] = useState<any>(null)
|
|
|
|
|
- const [sttManager, setSttManager] = useState<any>(null)
|
|
|
|
|
- const [rtmManager, setRtmManager] = useState<any>(null)
|
|
|
|
|
|
|
+ const [sdk, setSdk] = useState<SttSdk | null>(null)
|
|
|
|
|
+ const [sttManager, setSttManager] = useState<ISttManagerAdapter | null>(null)
|
|
|
|
|
+ const [rtmManager, setRtmManager] = useState<IRtmManagerAdapter | null>(null)
|
|
|
|
|
+ const [rtcManager, setRtcManager] = useState<IRtcManagerAdapter | null>(null)
|
|
|
const [isSdkInitialized, setIsSdkInitialized] = useState(false)
|
|
const [isSdkInitialized, setIsSdkInitialized] = useState(false)
|
|
|
const [isSttManagerInitialized, setIsSttManagerInitialized] = useState(false)
|
|
const [isSttManagerInitialized, setIsSttManagerInitialized] = useState(false)
|
|
|
|
|
+ const [isRtcManagerInitialized, setIsRtcManagerInitialized] = useState(false)
|
|
|
const [isTranscriptionActive, setIsTranscriptionActive] = useState(false)
|
|
const [isTranscriptionActive, setIsTranscriptionActive] = useState(false)
|
|
|
const [transcriptionStatus, setTranscriptionStatus] = useState<string>("idle")
|
|
const [transcriptionStatus, setTranscriptionStatus] = useState<string>("idle")
|
|
|
const [testResults, setTestResults] = useState<string[]>([])
|
|
const [testResults, setTestResults] = useState<string[]>([])
|
|
|
const [sttData, setSttData] = useState<any>({})
|
|
const [sttData, setSttData] = useState<any>({})
|
|
|
const [captionVisible, setCaptionVisible] = useState(true)
|
|
const [captionVisible, setCaptionVisible] = useState(true)
|
|
|
- const [umdLoaded, setUmdLoaded] = useState(false)
|
|
|
|
|
|
|
+ const [sdkLoaded, setSdkLoaded] = useState(false)
|
|
|
|
|
+
|
|
|
|
|
+ // 音频设备相关状态
|
|
|
|
|
+ const [audioDevices, setAudioDevices] = useState<{
|
|
|
|
|
+ microphones: MediaDeviceInfo[]
|
|
|
|
|
+ speakers: MediaDeviceInfo[]
|
|
|
|
|
+ }>({ microphones: [], speakers: [] })
|
|
|
|
|
+ const [selectedMicrophone, setSelectedMicrophone] = useState<string>("")
|
|
|
|
|
+ const [selectedSpeaker, setSelectedSpeaker] = useState<string>("")
|
|
|
|
|
+ const [isAudioDevicesLoaded, setIsAudioDevicesLoaded] = useState(false)
|
|
|
|
|
|
|
|
// 添加测试日志
|
|
// 添加测试日志
|
|
|
const addTestLog = (log: string) => {
|
|
const addTestLog = (log: string) => {
|
|
|
setTestResults((prev) => [...prev, `${new Date().toLocaleTimeString()}: ${log}`])
|
|
setTestResults((prev) => [...prev, `${new Date().toLocaleTimeString()}: ${log}`])
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // 动态加载UMD格式的SDK
|
|
|
|
|
- const loadUmdSdk = async () => {
|
|
|
|
|
|
|
+ // 加载SDK核心模块
|
|
|
|
|
+ const loadSdk = async () => {
|
|
|
try {
|
|
try {
|
|
|
- addTestLog("开始加载UMD格式SDK...")
|
|
|
|
|
-
|
|
|
|
|
- // 检查是否已加载
|
|
|
|
|
- if (window.SttSdkCore) {
|
|
|
|
|
- addTestLog("✅ UMD SDK已加载")
|
|
|
|
|
- setUmdLoaded(true)
|
|
|
|
|
- return
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 动态创建script标签加载UMD SDK
|
|
|
|
|
- const script = document.createElement("script")
|
|
|
|
|
- script.src = "/packages/stt-sdk-core/dist/index.umd.js"
|
|
|
|
|
- script.type = "text/javascript"
|
|
|
|
|
- script.async = true
|
|
|
|
|
-
|
|
|
|
|
- script.onload = () => {
|
|
|
|
|
- addTestLog("✅ UMD SDK加载成功")
|
|
|
|
|
- setUmdLoaded(true)
|
|
|
|
|
- messageApi.success("UMD SDK加载成功")
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- script.onerror = () => {
|
|
|
|
|
- addTestLog("❌ UMD SDK加载失败")
|
|
|
|
|
- messageApi.error("UMD SDK加载失败,请检查文件路径")
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ addTestLog("开始加载SDK核心模块...")
|
|
|
|
|
|
|
|
- document.head.appendChild(script)
|
|
|
|
|
|
|
+ // SDK已通过import直接导入,标记为已加载
|
|
|
|
|
+ setSdkLoaded(true)
|
|
|
|
|
+ addTestLog("✅ SDK核心模块已加载")
|
|
|
|
|
+ messageApi.success("SDK核心模块加载成功")
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
- addTestLog(`❌ UMD SDK加载异常: ${error}`)
|
|
|
|
|
- messageApi.error(`UMD SDK加载异常: ${error}`)
|
|
|
|
|
|
|
+ addTestLog(`❌ SDK核心模块加载异常: ${error}`)
|
|
|
|
|
+ messageApi.error(`SDK核心模块加载异常: ${error}`)
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -109,7 +100,27 @@ const UmdTestPage = () => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // 初始化SDK(使用UMD格式)
|
|
|
|
|
|
|
+ // 监听RTC文本流事件
|
|
|
|
|
+ const onTextstreamReceived = (textstream: any) => {
|
|
|
|
|
+ console.log("[UMD Test] textstreamReceived:", textstream)
|
|
|
|
|
+
|
|
|
|
|
+ // 记录文本流数据到日志
|
|
|
|
|
+ addTestLog(`📡 收到文本流数据: ${JSON.stringify(textstream)}`)
|
|
|
|
|
+
|
|
|
|
|
+ // 更新实时显示
|
|
|
|
|
+ if (textstream.dataType === "transcribe" && textstream.words?.length > 0) {
|
|
|
|
|
+ const transcript = textstream.words.map((word: any) => word.text).join(" ")
|
|
|
|
|
+ addTestLog(`🎙️ 实时转录: ${transcript}`)
|
|
|
|
|
+
|
|
|
|
|
+ // 更新实时转录显示
|
|
|
|
|
+ setSttData((prev: any) => ({
|
|
|
|
|
+ ...prev,
|
|
|
|
|
+ transcribe1: transcript,
|
|
|
|
|
+ }))
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 初始化SDK(使用直接导入的SDK)
|
|
|
const initializeSdk = async (values: {
|
|
const initializeSdk = async (values: {
|
|
|
appId: string
|
|
appId: string
|
|
|
certificate: string
|
|
certificate: string
|
|
@@ -117,16 +128,15 @@ const UmdTestPage = () => {
|
|
|
userName: string
|
|
userName: string
|
|
|
}) => {
|
|
}) => {
|
|
|
try {
|
|
try {
|
|
|
- if (!window.SttSdkCore) {
|
|
|
|
|
- addTestLog("❌ UMD SDK未加载,请先加载SDK")
|
|
|
|
|
- messageApi.error("UMD SDK未加载,请先加载SDK")
|
|
|
|
|
|
|
+ if (!sdkLoaded) {
|
|
|
|
|
+ addTestLog("❌ SDK未加载,请先加载SDK")
|
|
|
|
|
+ messageApi.error("SDK未加载,请先加载SDK")
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- addTestLog("开始初始化UMD SDK...")
|
|
|
|
|
|
|
+ addTestLog("开始初始化SDK...")
|
|
|
|
|
|
|
|
- // 使用UMD格式的SDK
|
|
|
|
|
- const SttSdk = window.SttSdkCore.default || window.SttSdkCore.SttSdk
|
|
|
|
|
|
|
+ // 使用直接导入的SDK
|
|
|
const newSdk = new SttSdk()
|
|
const newSdk = new SttSdk()
|
|
|
|
|
|
|
|
await newSdk.initialize({
|
|
await newSdk.initialize({
|
|
@@ -137,23 +147,28 @@ const UmdTestPage = () => {
|
|
|
|
|
|
|
|
setSdk(newSdk)
|
|
setSdk(newSdk)
|
|
|
setIsSdkInitialized(true)
|
|
setIsSdkInitialized(true)
|
|
|
- addTestLog("✅ UMD SDK初始化成功")
|
|
|
|
|
|
|
+ addTestLog("✅ SDK初始化成功")
|
|
|
|
|
|
|
|
// 创建管理器
|
|
// 创建管理器
|
|
|
const rtmManager = newSdk.createRtmManager()
|
|
const rtmManager = newSdk.createRtmManager()
|
|
|
const sttManager = newSdk.createSttManager(rtmManager)
|
|
const sttManager = newSdk.createSttManager(rtmManager)
|
|
|
|
|
+ const rtcManager = newSdk.createRtcManager()
|
|
|
|
|
|
|
|
// 监听RTM管理器的事件
|
|
// 监听RTM管理器的事件
|
|
|
rtmManager.on("sttDataChanged", onSttDataChanged)
|
|
rtmManager.on("sttDataChanged", onSttDataChanged)
|
|
|
|
|
|
|
|
|
|
+ // 监听RTC管理器的文本流事件
|
|
|
|
|
+ rtcManager.on("textstreamReceived", onTextstreamReceived)
|
|
|
|
|
+
|
|
|
setSttManager(sttManager)
|
|
setSttManager(sttManager)
|
|
|
setRtmManager(rtmManager)
|
|
setRtmManager(rtmManager)
|
|
|
- addTestLog("✅ STT和RTM管理器创建成功")
|
|
|
|
|
|
|
+ setRtcManager(rtcManager)
|
|
|
|
|
+ addTestLog("✅ STT、RTM和RTC管理器创建成功")
|
|
|
|
|
|
|
|
- messageApi.success("UMD SDK初始化成功")
|
|
|
|
|
|
|
+ messageApi.success("SDK初始化成功")
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
- addTestLog(`❌ UMD SDK初始化失败: ${error}`)
|
|
|
|
|
- messageApi.error(`UMD SDK初始化失败: ${error}`)
|
|
|
|
|
|
|
+ addTestLog(`❌ SDK初始化失败: ${error}`)
|
|
|
|
|
+ messageApi.error(`SDK初始化失败: ${error}`)
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -183,6 +198,34 @@ const UmdTestPage = () => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ // 初始化RTC管理器
|
|
|
|
|
+ const initializeRtcManager = async () => {
|
|
|
|
|
+ if (!rtcManager || !form) return
|
|
|
|
|
+
|
|
|
|
|
+ try {
|
|
|
|
|
+ const values = form.getFieldsValue()
|
|
|
|
|
+ addTestLog("开始初始化RTC管理器...")
|
|
|
|
|
+
|
|
|
|
|
+ // 生成随机用户ID
|
|
|
|
|
+ const genRandomUserId = () => Math.floor(Math.random() * 1000000)
|
|
|
|
|
+
|
|
|
|
|
+ await rtcManager.join({
|
|
|
|
|
+ channel: values.channel,
|
|
|
|
|
+ userId: genRandomUserId(),
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ // 使用选定的麦克风设备创建轨道
|
|
|
|
|
+ await rtcManager.createTracks(selectedMicrophone || undefined)
|
|
|
|
|
+
|
|
|
|
|
+ setIsRtcManagerInitialized(true)
|
|
|
|
|
+ addTestLog("✅ RTC管理器初始化成功(已加入RTC频道)")
|
|
|
|
|
+ messageApi.success("RTC管理器初始化成功")
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ addTestLog(`❌ RTC管理器初始化失败: ${error}`)
|
|
|
|
|
+ messageApi.error(`RTC管理器初始化失败: ${error}`)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
// 开始转录
|
|
// 开始转录
|
|
|
const startTranscription = async () => {
|
|
const startTranscription = async () => {
|
|
|
if (!sttManager) return
|
|
if (!sttManager) return
|
|
@@ -264,6 +307,13 @@ const UmdTestPage = () => {
|
|
|
setRtmManager(null)
|
|
setRtmManager(null)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ if (rtcManager) {
|
|
|
|
|
+ rtcManager.off("textstreamReceived", onTextstreamReceived)
|
|
|
|
|
+ await rtcManager.destroy()
|
|
|
|
|
+ setRtcManager(null)
|
|
|
|
|
+ setIsRtcManagerInitialized(false)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
if (sdk) {
|
|
if (sdk) {
|
|
|
await sdk.destroy()
|
|
await sdk.destroy()
|
|
|
setSdk(null)
|
|
setSdk(null)
|
|
@@ -290,9 +340,88 @@ const UmdTestPage = () => {
|
|
|
nav("/home")
|
|
nav("/home")
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // 组件挂载时尝试加载UMD SDK
|
|
|
|
|
|
|
+ // 获取音频设备列表
|
|
|
|
|
+ const getAudioDevices = async () => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ addTestLog("开始获取音频设备列表...")
|
|
|
|
|
+
|
|
|
|
|
+ // 请求麦克风权限
|
|
|
|
|
+ await navigator.mediaDevices.getUserMedia({ audio: true })
|
|
|
|
|
+
|
|
|
|
|
+ const devices = await navigator.mediaDevices.enumerateDevices()
|
|
|
|
|
+ const microphones = devices.filter((device) => device.kind === "audioinput")
|
|
|
|
|
+ const speakers = devices.filter((device) => device.kind === "audiooutput")
|
|
|
|
|
+
|
|
|
|
|
+ setAudioDevices({ microphones, speakers })
|
|
|
|
|
+
|
|
|
|
|
+ // 设置默认设备
|
|
|
|
|
+ if (microphones.length > 0) {
|
|
|
|
|
+ setSelectedMicrophone(microphones[0].deviceId)
|
|
|
|
|
+ }
|
|
|
|
|
+ if (speakers.length > 0) {
|
|
|
|
|
+ setSelectedSpeaker(speakers[0].deviceId)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ setIsAudioDevicesLoaded(true)
|
|
|
|
|
+ addTestLog(`✅ 音频设备加载完成: ${microphones.length}个麦克风, ${speakers.length}个扬声器`)
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ addTestLog(`❌ 获取音频设备失败: ${error}`)
|
|
|
|
|
+ messageApi.error(`获取音频设备失败: ${error}`)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 选择麦克风设备
|
|
|
|
|
+ const selectMicrophone = async (deviceId: string) => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ setSelectedMicrophone(deviceId)
|
|
|
|
|
+
|
|
|
|
|
+ // 如果RTC管理器已初始化,切换麦克风设备
|
|
|
|
|
+ if (rtcManager && isRtcManagerInitialized) {
|
|
|
|
|
+ await rtcManager.switchMicrophone(deviceId)
|
|
|
|
|
+ addTestLog(
|
|
|
|
|
+ `🎤 已切换麦克风: ${audioDevices.microphones.find((d) => d.deviceId === deviceId)?.label || deviceId}`,
|
|
|
|
|
+ )
|
|
|
|
|
+ } else {
|
|
|
|
|
+ addTestLog(
|
|
|
|
|
+ `🎤 已选择麦克风: ${audioDevices.microphones.find((d) => d.deviceId === deviceId)?.label || deviceId}`,
|
|
|
|
|
+ )
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ messageApi.success("麦克风设备已切换")
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ addTestLog(`❌ 选择麦克风失败: ${error}`)
|
|
|
|
|
+ messageApi.error(`选择麦克风失败: ${error}`)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 选择扬声器设备
|
|
|
|
|
+ const selectSpeaker = async (deviceId: string) => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ setSelectedSpeaker(deviceId)
|
|
|
|
|
+
|
|
|
|
|
+ // 如果RTC管理器已初始化,切换扬声器设备
|
|
|
|
|
+ if (rtcManager && isRtcManagerInitialized) {
|
|
|
|
|
+ await rtcManager.switchSpeaker(deviceId)
|
|
|
|
|
+ addTestLog(
|
|
|
|
|
+ `🔊 已切换扬声器: ${audioDevices.speakers.find((d) => d.deviceId === deviceId)?.label || deviceId}`,
|
|
|
|
|
+ )
|
|
|
|
|
+ } else {
|
|
|
|
|
+ addTestLog(
|
|
|
|
|
+ `🔊 已选择扬声器: ${audioDevices.speakers.find((d) => d.deviceId === deviceId)?.label || deviceId}`,
|
|
|
|
|
+ )
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ messageApi.success("扬声器设备已切换")
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ addTestLog(`❌ 选择扬声器失败: ${error}`)
|
|
|
|
|
+ messageApi.error(`选择扬声器失败: ${error}`)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 组件挂载时尝试加载SDK和音频设备
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
- loadUmdSdk()
|
|
|
|
|
|
|
+ loadSdk()
|
|
|
|
|
+ getAudioDevices()
|
|
|
}, [])
|
|
}, [])
|
|
|
|
|
|
|
|
// 组件卸载时清理资源
|
|
// 组件卸载时清理资源
|
|
@@ -309,8 +438,8 @@ const UmdTestPage = () => {
|
|
|
{contextHolder}
|
|
{contextHolder}
|
|
|
|
|
|
|
|
<div className={styles.header}>
|
|
<div className={styles.header}>
|
|
|
- <Title level={2}>🌐 UMD 格式 SDK 测试页面</Title>
|
|
|
|
|
- <Text type="secondary">测试 UMD 格式 SDK 在 AMD 环境中的使用</Text>
|
|
|
|
|
|
|
+ <Title level={2}>🌐 SDK 核心模块测试页面</Title>
|
|
|
|
|
+ <Text type="secondary">测试直接导入的 SDK 核心模块功能</Text>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div className={styles.content}>
|
|
<div className={styles.content}>
|
|
@@ -318,13 +447,13 @@ const UmdTestPage = () => {
|
|
|
<Card title="📦 SDK 加载状态" className={styles.loadCard}>
|
|
<Card title="📦 SDK 加载状态" className={styles.loadCard}>
|
|
|
<Space direction="vertical" style={{ width: "100%" }}>
|
|
<Space direction="vertical" style={{ width: "100%" }}>
|
|
|
<Alert
|
|
<Alert
|
|
|
- message={umdLoaded ? "✅ UMD SDK 已加载" : "⏳ 正在加载 UMD SDK..."}
|
|
|
|
|
- type={umdLoaded ? "success" : "info"}
|
|
|
|
|
|
|
+ message={sdkLoaded ? "✅ SDK 核心模块已加载" : "⏳ 正在加载 SDK 核心模块..."}
|
|
|
|
|
+ type={sdkLoaded ? "success" : "info"}
|
|
|
showIcon
|
|
showIcon
|
|
|
/>
|
|
/>
|
|
|
|
|
|
|
|
- <Button onClick={loadUmdSdk} disabled={umdLoaded}>
|
|
|
|
|
- {umdLoaded ? "✅ 已加载" : "重新加载 SDK"}
|
|
|
|
|
|
|
+ <Button onClick={loadSdk} disabled={sdkLoaded}>
|
|
|
|
|
+ {sdkLoaded ? "✅ 已加载" : "重新加载 SDK"}
|
|
|
</Button>
|
|
</Button>
|
|
|
</Space>
|
|
</Space>
|
|
|
</Card>
|
|
</Card>
|
|
@@ -377,7 +506,7 @@ const UmdTestPage = () => {
|
|
|
<Button
|
|
<Button
|
|
|
type="primary"
|
|
type="primary"
|
|
|
onClick={() => initializeSdk(form.getFieldsValue())}
|
|
onClick={() => initializeSdk(form.getFieldsValue())}
|
|
|
- disabled={!umdLoaded || isSdkInitialized}
|
|
|
|
|
|
|
+ disabled={!sdkLoaded || isSdkInitialized}
|
|
|
>
|
|
>
|
|
|
{isSdkInitialized ? "✅ 已初始化" : "初始化 SDK"}
|
|
{isSdkInitialized ? "✅ 已初始化" : "初始化 SDK"}
|
|
|
</Button>
|
|
</Button>
|
|
@@ -387,6 +516,50 @@ const UmdTestPage = () => {
|
|
|
</Button>
|
|
</Button>
|
|
|
</Space>
|
|
</Space>
|
|
|
</Form.Item>
|
|
</Form.Item>
|
|
|
|
|
+
|
|
|
|
|
+ <Divider />
|
|
|
|
|
+
|
|
|
|
|
+ <Form.Item label="🎤 麦克风设备">
|
|
|
|
|
+ <Space direction="vertical" style={{ width: "100%" }}>
|
|
|
|
|
+ <Select
|
|
|
|
|
+ value={selectedMicrophone}
|
|
|
|
|
+ onChange={selectMicrophone}
|
|
|
|
|
+ placeholder="选择麦克风设备"
|
|
|
|
|
+ disabled={!isAudioDevicesLoaded}
|
|
|
|
|
+ style={{ width: "100%" }}
|
|
|
|
|
+ >
|
|
|
|
|
+ {audioDevices.microphones.map((device) => (
|
|
|
|
|
+ <Select.Option key={device.deviceId} value={device.deviceId}>
|
|
|
|
|
+ {device.label || `麦克风 ${device.deviceId.slice(0, 8)}`}
|
|
|
|
|
+ </Select.Option>
|
|
|
|
|
+ ))}
|
|
|
|
|
+ </Select>
|
|
|
|
|
+ <Button
|
|
|
|
|
+ type="link"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ onClick={getAudioDevices}
|
|
|
|
|
+ icon={<ReloadOutlined />}
|
|
|
|
|
+ >
|
|
|
|
|
+ 刷新设备列表
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ </Space>
|
|
|
|
|
+ </Form.Item>
|
|
|
|
|
+
|
|
|
|
|
+ <Form.Item label="🔊 扬声器设备">
|
|
|
|
|
+ <Select
|
|
|
|
|
+ value={selectedSpeaker}
|
|
|
|
|
+ onChange={selectSpeaker}
|
|
|
|
|
+ placeholder="选择扬声器设备"
|
|
|
|
|
+ disabled={!isAudioDevicesLoaded}
|
|
|
|
|
+ style={{ width: "100%" }}
|
|
|
|
|
+ >
|
|
|
|
|
+ {audioDevices.speakers.map((device) => (
|
|
|
|
|
+ <Select.Option key={device.deviceId} value={device.deviceId}>
|
|
|
|
|
+ {device.label || `扬声器 ${device.deviceId.slice(0, 8)}`}
|
|
|
|
|
+ </Select.Option>
|
|
|
|
|
+ ))}
|
|
|
|
|
+ </Select>
|
|
|
|
|
+ </Form.Item>
|
|
|
</Form>
|
|
</Form>
|
|
|
</Card>
|
|
</Card>
|
|
|
|
|
|
|
@@ -400,6 +573,14 @@ const UmdTestPage = () => {
|
|
|
{isSttManagerInitialized ? "✅ STT管理器已初始化" : "初始化STT管理器"}
|
|
{isSttManagerInitialized ? "✅ STT管理器已初始化" : "初始化STT管理器"}
|
|
|
</Button>
|
|
</Button>
|
|
|
|
|
|
|
|
|
|
+ <Button
|
|
|
|
|
+ onClick={initializeRtcManager}
|
|
|
|
|
+ disabled={!isSdkInitialized || isRtcManagerInitialized}
|
|
|
|
|
+ block
|
|
|
|
|
+ >
|
|
|
|
|
+ {isRtcManagerInitialized ? "✅ RTC管理器已初始化" : "初始化RTC管理器"}
|
|
|
|
|
+ </Button>
|
|
|
|
|
+
|
|
|
<Divider />
|
|
<Divider />
|
|
|
|
|
|
|
|
<Button
|
|
<Button
|
|
@@ -503,20 +684,20 @@ const UmdTestPage = () => {
|
|
|
<Card title="💡 使用说明" className={styles.infoCard}>
|
|
<Card title="💡 使用说明" className={styles.infoCard}>
|
|
|
<Space direction="vertical" style={{ width: "100%" }}>
|
|
<Space direction="vertical" style={{ width: "100%" }}>
|
|
|
<Text type="secondary">
|
|
<Text type="secondary">
|
|
|
- <InfoCircleOutlined /> UMD格式测试说明:
|
|
|
|
|
|
|
+ <InfoCircleOutlined /> SDK核心模块测试说明:
|
|
|
</Text>
|
|
</Text>
|
|
|
<ol>
|
|
<ol>
|
|
|
- <li>UMD SDK通过动态script标签加载</li>
|
|
|
|
|
- <li>SDK作为全局变量 window.SttSdkCore 可用</li>
|
|
|
|
|
- <li>支持AMD/CommonJS/全局变量使用方式</li>
|
|
|
|
|
- <li>功能与ES模块版本完全一致</li>
|
|
|
|
|
|
|
+ <li>SDK通过直接import导入核心模块</li>
|
|
|
|
|
+ <li>支持TypeScript类型检查和智能提示</li>
|
|
|
|
|
+ <li>便于调试和开发时使用</li>
|
|
|
|
|
+ <li>功能与UMD版本完全一致</li>
|
|
|
</ol>
|
|
</ol>
|
|
|
|
|
|
|
|
<Text type="secondary">
|
|
<Text type="secondary">
|
|
|
<InfoCircleOutlined /> 测试步骤:
|
|
<InfoCircleOutlined /> 测试步骤:
|
|
|
</Text>
|
|
</Text>
|
|
|
<ol>
|
|
<ol>
|
|
|
- <li>等待UMD SDK加载完成</li>
|
|
|
|
|
|
|
+ <li>等待SDK核心模块加载完成</li>
|
|
|
<li>填写 App ID 和 Certificate</li>
|
|
<li>填写 App ID 和 Certificate</li>
|
|
|
<li>点击"初始化 SDK"</li>
|
|
<li>点击"初始化 SDK"</li>
|
|
|
<li>初始化 STT 管理器</li>
|
|
<li>初始化 STT 管理器</li>
|
|
@@ -530,6 +711,49 @@ const UmdTestPage = () => {
|
|
|
</Space>
|
|
</Space>
|
|
|
</Card>
|
|
</Card>
|
|
|
|
|
|
|
|
|
|
+ <Card title="🎧 音频设备状态" className={styles.audioCard}>
|
|
|
|
|
+ <Space direction="vertical" style={{ width: "100%" }}>
|
|
|
|
|
+ <Alert
|
|
|
|
|
+ message={
|
|
|
|
|
+ isAudioDevicesLoaded
|
|
|
|
|
+ ? `✅ 音频设备已加载 (${audioDevices.microphones.length}个麦克风, ${audioDevices.speakers.length}个扬声器)`
|
|
|
|
|
+ : "⏳ 正在加载音频设备..."
|
|
|
|
|
+ }
|
|
|
|
|
+ type={isAudioDevicesLoaded ? "success" : "info"}
|
|
|
|
|
+ showIcon
|
|
|
|
|
+ />
|
|
|
|
|
+
|
|
|
|
|
+ <div style={{ fontSize: "12px", color: "#666" }}>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <strong>当前麦克风:</strong>{" "}
|
|
|
|
|
+ {selectedMicrophone
|
|
|
|
|
+ ? audioDevices.microphones.find((d) => d.deviceId === selectedMicrophone)
|
|
|
|
|
+ ?.label || "默认设备"
|
|
|
|
|
+ : "未选择"}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style={{ marginTop: 4 }}>
|
|
|
|
|
+ <strong>当前扬声器:</strong>{" "}
|
|
|
|
|
+ {selectedSpeaker
|
|
|
|
|
+ ? audioDevices.speakers.find((d) => d.deviceId === selectedSpeaker)?.label ||
|
|
|
|
|
+ "默认设备"
|
|
|
|
|
+ : "未选择"}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style={{ marginTop: 8, paddingTop: 8, borderTop: "1px solid #f0f0f0" }}>
|
|
|
|
|
+ <strong>RTC状态:</strong> {isRtcManagerInitialized ? "✅ 已连接" : "❌ 未连接"}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <Button
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ onClick={getAudioDevices}
|
|
|
|
|
+ icon={<ReloadOutlined />}
|
|
|
|
|
+ >
|
|
|
|
|
+ 刷新设备列表
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ </Space>
|
|
|
|
|
+ </Card>
|
|
|
|
|
+
|
|
|
<Card
|
|
<Card
|
|
|
title={
|
|
title={
|
|
|
<Space>
|
|
<Space>
|