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:
2026-06-12 17:46:25 +08:00
parent 10f676f3b4
commit b5c0d40609
26 changed files with 4236 additions and 0 deletions

View 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 };
}