feat: 初始化前端项目,搭建 React + TypeScript + Vite 工程结构
- 创建 Vite + React 18 + TypeScript 项目(严格模式) - 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖 - 定义全部 WebSocket 消息类型和数据模型(对齐接口文档) - 实现 WebSocket 连接管理(心跳保活、指数退避重连) - 实现音频编码工具(PCM↔Base64、DataURL 转换) - 创建组件骨架:CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview - 实现核心 useVisionSession Hook 骨架 - 配置 ESLint(_前缀变量忽略规则) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
51
frontend/src/components/MicManager/index.tsx
Normal file
51
frontend/src/components/MicManager/index.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
// ============================================================
|
||||
// MicManager — 麦克风音频采集
|
||||
// 职责:获取麦克风 MediaStream,供 VAD 和音频录制使用
|
||||
// ============================================================
|
||||
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
|
||||
export function useMicrophone() {
|
||||
const [stream, setStream] = useState<MediaStream | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const audioContextRef = useRef<AudioContext | null>(null);
|
||||
|
||||
const startMic = useCallback(async () => {
|
||||
try {
|
||||
const mediaStream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: {
|
||||
sampleRate: 16000,
|
||||
channelCount: 1,
|
||||
echoCancellation: true,
|
||||
noiseSuppression: true,
|
||||
},
|
||||
video: false,
|
||||
});
|
||||
setStream(mediaStream);
|
||||
setError(null);
|
||||
return mediaStream;
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : "无法访问麦克风";
|
||||
setError(message);
|
||||
console.error("[Mic] 获取麦克风失败:", err);
|
||||
return null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const stopMic = useCallback(() => {
|
||||
stream?.getTracks().forEach((track) => track.stop());
|
||||
setStream(null);
|
||||
audioContextRef.current?.close();
|
||||
audioContextRef.current = null;
|
||||
}, [stream]);
|
||||
|
||||
/** 获取或创建 AudioContext */
|
||||
const getAudioContext = useCallback((): AudioContext => {
|
||||
if (!audioContextRef.current) {
|
||||
audioContextRef.current = new AudioContext({ sampleRate: 16000 });
|
||||
}
|
||||
return audioContextRef.current;
|
||||
}, []);
|
||||
|
||||
return { stream, error, startMic, stopMic, getAudioContext };
|
||||
}
|
||||
Reference in New Issue
Block a user