添加计时器，麦克风，摄像头开关 #45
@@ -143,6 +143,35 @@ body {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.lang-group {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
background: var(--color-surface-2);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.lang-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.lang-btn:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.lang-btn--active {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ---- Workspace (双栏) ---- */
|
||||
|
||||
.workspace {
|
||||
@@ -154,7 +183,7 @@ body {
|
||||
/* ---- 左侧视频面板 ---- */
|
||||
|
||||
.video-panel {
|
||||
width: 400px;
|
||||
width: 420px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -216,6 +245,31 @@ body {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.live-badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
backdrop-filter: blur(8px);
|
||||
color: white;
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.live-badge__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-success);
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.video-indicator--loading { color: var(--color-warning); }
|
||||
.video-indicator--audio { left: auto; right: 16px; color: var(--color-primary); }
|
||||
.video-indicator--error { color: var(--color-error); animation: none; }
|
||||
@@ -278,7 +332,48 @@ body {
|
||||
|
||||
.video-controls__row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn--ctrl {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.78rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface-2);
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn--ctrl:hover {
|
||||
background: var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.btn--ctrl-on {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--color-success);
|
||||
border-color: rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
|
||||
.btn--ctrl-off {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--color-error);
|
||||
border-color: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.btn--speaking {
|
||||
animation: micPulse 0.8s ease-in-out infinite;
|
||||
box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
|
||||
}
|
||||
|
||||
@keyframes micPulse {
|
||||
0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.4); transform: scale(1); }
|
||||
50% { box-shadow: 0 0 16px rgba(34, 197, 94, 0.8); transform: scale(1.05); }
|
||||
}
|
||||
|
||||
/* ---- 右侧聊天面板 ---- */
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
// CamTalk — 主应用组件（Web 端双栏布局）
|
||||
// ============================================================
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useVisionSession } from "./hooks/useVisionSession";
|
||||
import { VideoPreview } from "./components/VideoPreview";
|
||||
import { ChatPanel } from "./components/ChatPanel";
|
||||
@@ -15,6 +15,8 @@ import "./App.css";
|
||||
function App() {
|
||||
const [showConfig, setShowConfig] = useState(false);
|
||||
const [theme, setTheme] = useState<Theme>(loadTheme);
|
||||
const [elapsed, setElapsed] = useState(0);
|
||||
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
// 切换主题时更新 <html> 的 data-theme 属性
|
||||
useEffect(() => {
|
||||
@@ -26,6 +28,12 @@ function App() {
|
||||
saveTheme(t);
|
||||
}, []);
|
||||
|
||||
const formatTime = (s: number) => {
|
||||
const m = Math.floor(s / 60);
|
||||
const sec = s % 60;
|
||||
return `${m.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
const {
|
||||
messages,
|
||||
currentReply,
|
||||
@@ -46,10 +54,39 @@ function App() {
|
||||
startSession,
|
||||
stopSession,
|
||||
interrupt,
|
||||
isCameraOn,
|
||||
isMicOn,
|
||||
toggleCamera,
|
||||
toggleMic,
|
||||
} = useVisionSession();
|
||||
|
||||
const isConnected = connectionStatus === "connected";
|
||||
|
||||
// 连接计时器
|
||||
const elapsedRef = useRef(0);
|
||||
useEffect(() => {
|
||||
if (isConnected) {
|
||||
elapsedRef.current = 0;
|
||||
setElapsed(0); // eslint-disable-line react-hooks/set-state-in-effect -- 连接时重置计时器
|
||||
}
|
||||
}, [isConnected]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isConnected) {
|
||||
if (timerRef.current) {
|
||||
clearInterval(timerRef.current);
|
||||
timerRef.current = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
const id = setInterval(() => {
|
||||
elapsedRef.current += 1;
|
||||
setElapsed(elapsedRef.current);
|
||||
}, 1000);
|
||||
timerRef.current = id;
|
||||
return () => clearInterval(id);
|
||||
}, [isConnected]);
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
{/* ---- 顶部导航栏 ---- */}
|
||||
@@ -93,6 +130,12 @@ function App() {
|
||||
<div className="video-panel">
|
||||
<div className="video-container">
|
||||
<VideoPreview ref={videoRef} isStreaming={!!stream} />
|
||||
{isConnected && (
|
||||
<div className="live-badge">
|
||||
<span className="live-badge__dot" />
|
||||
LIVE {formatTime(elapsed)}
|
||||
</div>
|
||||
)}
|
||||
{config.detailLevel === "high" && (
|
||||
<div className="detail-badge">HD</div>
|
||||
)}
|
||||
@@ -132,6 +175,20 @@ function App() {
|
||||
</button>
|
||||
) : (
|
||||
<div className="video-controls__row">
|
||||
<button
|
||||
className={`btn btn--ctrl ${isCameraOn ? "btn--ctrl-on" : "btn--ctrl-off"}`}
|
||||
onClick={toggleCamera}
|
||||
title={isCameraOn ? "关闭摄像头" : "开启摄像头"}
|
||||
>
|
||||
📷
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn--ctrl ${isMicOn ? "btn--ctrl-on" : "btn--ctrl-off"} ${isSpeaking ? "btn--speaking" : ""}`}
|
||||
onClick={toggleMic}
|
||||
title={isMicOn ? "关闭麦克风" : "开启麦克风"}
|
||||
>
|
||||
🎤
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${mode === "observation" ? "btn--active" : "btn--secondary"}`}
|
||||
onClick={toggleMode}
|
||||
|
||||
@@ -36,6 +36,8 @@ export function useVisionSession() {
|
||||
const [config, setConfig] = useState<SessionConfig>(loadConfig);
|
||||
const [stats, setStats] = useState<SessionStats>({ queryCount: 0, totalTokens: 0 });
|
||||
const [mode, setMode] = useState<SessionMode>("dialogue");
|
||||
const [isCameraOn, setIsCameraOn] = useState(false);
|
||||
const [isMicOn, setIsMicOn] = useState(false);
|
||||
|
||||
// 上一帧采样数据（用于关键帧检测）
|
||||
const prevFrameRef = useRef<Uint8ClampedArray | null>(null);
|
||||
@@ -280,11 +282,13 @@ export function useVisionSession() {
|
||||
const startSession = useCallback(async () => {
|
||||
// 1. 获取摄像头和麦克风
|
||||
await startCamera();
|
||||
setIsCameraOn(true);
|
||||
const micStream = await startMic();
|
||||
if (!micStream) {
|
||||
showToast("无法获取麦克风权限", "error");
|
||||
return;
|
||||
}
|
||||
setIsMicOn(true);
|
||||
|
||||
// 2. 连接 WebSocket
|
||||
connect();
|
||||
@@ -310,8 +314,32 @@ export function useVisionSession() {
|
||||
setStats({ queryCount: 0, totalTokens: 0 });
|
||||
historyRef.current = [];
|
||||
prevFrameRef.current = null;
|
||||
setIsCameraOn(false);
|
||||
setIsMicOn(false);
|
||||
}, [stopObserving, stopVAD, stopMic, stopCamera, disconnect]);
|
||||
|
||||
/** 摄像头开关 */
|
||||
const toggleCamera = useCallback(async () => {
|
||||
if (isCameraOn) {
|
||||
stopCamera();
|
||||
setIsCameraOn(false);
|
||||
} else {
|
||||
await startCamera();
|
||||
setIsCameraOn(true);
|
||||
}
|
||||
}, [isCameraOn, startCamera, stopCamera]);
|
||||
|
||||
/** 麦克风开关 */
|
||||
const toggleMic = useCallback(async () => {
|
||||
if (isMicOn) {
|
||||
stopMic();
|
||||
setIsMicOn(false);
|
||||
} else {
|
||||
const micStream = await startMic();
|
||||
setIsMicOn(!!micStream);
|
||||
}
|
||||
}, [isMicOn, startMic, stopMic]);
|
||||
|
||||
/** 打断当前回复 */
|
||||
const interrupt = useCallback(() => {
|
||||
send({ type: "interrupt" });
|
||||
@@ -351,5 +379,9 @@ export function useVisionSession() {
|
||||
startSession,
|
||||
stopSession,
|
||||
interrupt,
|
||||
isCameraOn,
|
||||
isMicOn,
|
||||
toggleCamera,
|
||||
toggleMic,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user