cfy666
b5c0d40609
- 创建 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>
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
// ============================================================
|
||
// EdgeProcessor — 边缘预处理（VAD + 关键帧检测）
|
||
// 职责：浏览器端语音活动检测、关键帧筛选
|
||
// 技术：@ricky0123/vad-web（VAD）、ONNX Runtime Web（关键帧检测）
|
||
// ============================================================
|
||
|
||
import { useCallback, useState } from "react";
|
||
|
||
export interface VADOptions {
|
||
/** 语音结束回调，携带录音 Float32Array */
|
||
onSpeechEnd?: (audio: Float32Array) => void;
|
||
/** 语音开始回调 */
|
||
onSpeechStart?: () => void;
|
||
}
|
||
|
||
export function useVAD(_options?: VADOptions) {
|
||
const [isSpeaking] = useState(false);
|
||
// TODO: 初始化 @ricky0123/vad-web，加载后设为 true
|
||
const isReady = false;
|
||
|
||
// TODO: 实现 VAD 初始化
|
||
// 1. 加载 @ricky0123/vad-web
|
||
// 2. 配置 VAD 参数（阈值、最小语音时长等）
|
||
// 3. 连接麦克风 stream
|
||
// 4. 在 onSpeechEnd 时收集音频并回调 _options.onSpeechEnd
|
||
|
||
const start = useCallback(() => {
|
||
// TODO: 启动 VAD 监听
|
||
}, []);
|
||
|
||
const stop = useCallback(() => {
|
||
// TODO: 停止 VAD 监听
|
||
}, []);
|
||
|
||
return { isSpeaking, isReady, start, stop };
|
||
}
|
||
|
||
// ---- 关键帧检测（ONNX Runtime Web）----
|
||
|
||
export function useKeyframeDetection() {
|
||
// TODO: 加载 ONNX 模型后设为 true
|
||
const isReady = false;
|
||
|
||
// TODO: 实现关键帧检测
|
||
// 1. 加载 ONNX 模型
|
||
// 2. 对比当前帧与上一帧的像素差异
|
||
// 3. 超过阈值则判定为关键帧
|
||
|
||
const isKeyframe = useCallback(
|
||
(_currentFrame: ImageData, _previousFrame: ImageData): boolean => {
|
||
// TODO: 实现像素差异对比
|
||
return true; // 暂时所有帧都视为关键帧
|
||
},
|
||
[],
|
||
);
|
||
|
||
return { isReady, isKeyframe };
|
||
}
|