cfy666
f5536005f6
- 新增 useObservationMode Hook：定时 5s 采帧，similarity < 0.85 触发变化回调 - useVisionSession 新增 dialogue/observation 模式切换 - App Footer 加观察模式切换按钮（激活时蓝色脉冲） - 视频区左上角显示'👁️ 观察中'绿色角标 - 观察模式下画面变化自动发送 query Co-Authored-By: Claude <noreply@anthropic.com>
89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
// ============================================================
|
||
// useObservationMode — 观察模式 Hook
|
||
// 职责：定时采帧 → 关键帧检测 → 画面变化时触发回调
|
||
// 来源：docs/05-用户故事.md US-05（持续场景监控）
|
||
// ============================================================
|
||
|
||
import { useCallback, useEffect, useRef, useState } from "react";
|
||
import { sampleFrame, compareFrames } from "../components/EdgeProcessor";
|
||
|
||
/** 画面变化显著阈值 */
|
||
const CHANGE_THRESHOLD = 0.85;
|
||
/** 采样间隔（ms） */
|
||
const SAMPLE_INTERVAL = 5000;
|
||
|
||
export interface ObservationOptions {
|
||
/** 画面变化回调，携带当前帧的 DataURL */
|
||
onChange?: (frameDataUrl: string) => void;
|
||
}
|
||
|
||
export function useObservationMode(options?: ObservationOptions) {
|
||
const [isObserving, setIsObserving] = useState(false);
|
||
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||
const prevFrameRef = useRef<Uint8ClampedArray | null>(null);
|
||
const optionsRef = useRef(options);
|
||
|
||
useEffect(() => {
|
||
optionsRef.current = options;
|
||
}, [options]);
|
||
|
||
/**
|
||
* 启动观察模式
|
||
* @param video 摄像头 video 元素
|
||
* @param captureFrame 从 video 捕获 DataURL 的函数
|
||
*/
|
||
const startObserving = useCallback(
|
||
(video: HTMLVideoElement | null, captureFrame: () => string | null) => {
|
||
if (!video) return;
|
||
|
||
// 立即采一帧作为基准
|
||
prevFrameRef.current = sampleFrame(video);
|
||
|
||
intervalRef.current = setInterval(() => {
|
||
const current = sampleFrame(video);
|
||
if (!current) return;
|
||
|
||
if (prevFrameRef.current) {
|
||
const { similarity } = compareFrames(prevFrameRef.current, current);
|
||
|
||
if (similarity < CHANGE_THRESHOLD) {
|
||
console.log(
|
||
`[Observation] 画面变化 (similarity=${similarity.toFixed(2)})`,
|
||
);
|
||
const frameDataUrl = captureFrame();
|
||
if (frameDataUrl) {
|
||
optionsRef.current?.onChange?.(frameDataUrl);
|
||
}
|
||
}
|
||
}
|
||
|
||
prevFrameRef.current = current;
|
||
}, SAMPLE_INTERVAL);
|
||
|
||
setIsObserving(true);
|
||
},
|
||
[],
|
||
);
|
||
|
||
/** 停止观察模式 */
|
||
const stopObserving = useCallback(() => {
|
||
if (intervalRef.current) {
|
||
clearInterval(intervalRef.current);
|
||
intervalRef.current = null;
|
||
}
|
||
prevFrameRef.current = null;
|
||
setIsObserving(false);
|
||
}, []);
|
||
|
||
// 组件卸载时清理
|
||
useEffect(() => {
|
||
return () => {
|
||
if (intervalRef.current) {
|
||
clearInterval(intervalRef.current);
|
||
}
|
||
};
|
||
}, []);
|
||
|
||
return { isObserving, startObserving, stopObserving };
|
||
}
|