XEngineers/CamTalk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request '添加计时器，麦克风，摄像头开关' (#45) from develop-frontend8 into develop
Some checks failed
Frontend CI / ci (pull_request) Successful in 55s
Details
Backend CI / ci (pull_request) Failing after 1m21s
Details

Browse Source 
Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/45
This commit was merged in pull request #45.
This commit is contained in:
cfy777
2026-06-13 20:09:03 +08:00
parent 2a235a94b2 00f10088d0
commit 836a61dfd2
3 changed files with 187 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/src/App.css
View File

@@ -143,6 +143,35 @@ body {
color: var(--color-text); 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 (双栏) ---- */
.workspace { .workspace {
@@ -154,7 +183,7 @@ body {
/* ---- 左侧视频面板 ---- */ /* ---- 左侧视频面板 ---- */
.video-panel { .video-panel {
width: 400px; width: 420px;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -216,6 +245,31 @@ body {
animation: pulse 1.5s ease-in-out infinite; 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--loading { color: var(--color-warning); }
.video-indicator--audio { left: auto; right: 16px; color: var(--color-primary); } .video-indicator--audio { left: auto; right: 16px; color: var(--color-primary); }
.video-indicator--error { color: var(--color-error); animation: none; } .video-indicator--error { color: var(--color-error); animation: none; }
@@ -278,7 +332,48 @@ body {
.video-controls__row { .video-controls__row {
display: flex; 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); }
} }
/* ---- 右侧聊天面板 ---- */ /* ---- 右侧聊天面板 ---- */

59
frontend/src/App.tsx
View File

@@ -2,7 +2,7 @@
// CamTalk — 主应用组件（Web 端双栏布局） // CamTalk — 主应用组件（Web 端双栏布局）
// ============================================================ // ============================================================
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { useVisionSession } from "./hooks/useVisionSession"; import { useVisionSession } from "./hooks/useVisionSession";
import { VideoPreview } from "./components/VideoPreview"; import { VideoPreview } from "./components/VideoPreview";
import { ChatPanel } from "./components/ChatPanel"; import { ChatPanel } from "./components/ChatPanel";
@@ -15,6 +15,8 @@ import "./App.css";
function App() { function App() {
const [showConfig, setShowConfig] = useState(false); const [showConfig, setShowConfig] = useState(false);
const [theme, setTheme] = useState<Theme>(loadTheme); const [theme, setTheme] = useState<Theme>(loadTheme);
const [elapsed, setElapsed] = useState(0);
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
// 切换主题时更新 <html> 的 data-theme 属性 // 切换主题时更新 <html> 的 data-theme 属性
useEffect(() => { useEffect(() => {
@@ -26,6 +28,12 @@ function App() {
saveTheme(t); 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 { const {
messages, messages,
currentReply, currentReply,
@@ -46,10 +54,39 @@ function App() {
startSession, startSession,
stopSession, stopSession,
interrupt, interrupt,
isCameraOn,
isMicOn,
toggleCamera,
toggleMic,
} = useVisionSession(); } = useVisionSession();
const isConnected = connectionStatus === "connected"; 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 ( return (
<div className="app"> <div className="app">
{/* ---- 顶部导航栏 ---- */} {/* ---- 顶部导航栏 ---- */}
@@ -93,6 +130,12 @@ function App() {
<div className="video-panel"> <div className="video-panel">
<div className="video-container"> <div className="video-container">
<VideoPreview ref={videoRef} isStreaming={!!stream} /> <VideoPreview ref={videoRef} isStreaming={!!stream} />
{isConnected && (
<div className="live-badge">
<span className="live-badge__dot" />
LIVE {formatTime(elapsed)}
</div>
)}
{config.detailLevel === "high" && ( {config.detailLevel === "high" && (
<div className="detail-badge">HD</div> <div className="detail-badge">HD</div>
)} )}
@@ -132,6 +175,20 @@ function App() {
</button> </button>
) : ( ) : (
<div className="video-controls__row"> <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 <button
className={`btn ${mode === "observation" ? "btn--active" : "btn--secondary"}`} className={`btn ${mode === "observation" ? "btn--active" : "btn--secondary"}`}
onClick={toggleMode} onClick={toggleMode}

32
frontend/src/hooks/useVisionSession.ts
View File

@@ -36,6 +36,8 @@ export function useVisionSession() {
const [config, setConfig] = useState<SessionConfig>(loadConfig); const [config, setConfig] = useState<SessionConfig>(loadConfig);
const [stats, setStats] = useState<SessionStats>({ queryCount: 0, totalTokens: 0 }); const [stats, setStats] = useState<SessionStats>({ queryCount: 0, totalTokens: 0 });
const [mode, setMode] = useState<SessionMode>("dialogue"); const [mode, setMode] = useState<SessionMode>("dialogue");
const [isCameraOn, setIsCameraOn] = useState(false);
const [isMicOn, setIsMicOn] = useState(false);
// 上一帧采样数据（用于关键帧检测） // 上一帧采样数据（用于关键帧检测）
const prevFrameRef = useRef<Uint8ClampedArray | null>(null); const prevFrameRef = useRef<Uint8ClampedArray | null>(null);
@@ -280,11 +282,13 @@ export function useVisionSession() {
const startSession = useCallback(async () => { const startSession = useCallback(async () => {
// 1. 获取摄像头和麦克风 // 1. 获取摄像头和麦克风
await startCamera(); await startCamera();
setIsCameraOn(true);
const micStream = await startMic(); const micStream = await startMic();
if (!micStream) { if (!micStream) {
showToast("无法获取麦克风权限", "error"); showToast("无法获取麦克风权限", "error");
return; return;
} }
setIsMicOn(true);
// 2. 连接 WebSocket // 2. 连接 WebSocket
connect(); connect();
@@ -310,8 +314,32 @@ export function useVisionSession() {
setStats({ queryCount: 0, totalTokens: 0 }); setStats({ queryCount: 0, totalTokens: 0 });
historyRef.current = []; historyRef.current = [];
prevFrameRef.current = null; prevFrameRef.current = null;
setIsCameraOn(false);
setIsMicOn(false);
}, [stopObserving, stopVAD, stopMic, stopCamera, disconnect]); }, [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(() => { const interrupt = useCallback(() => {
send({ type: "interrupt" }); send({ type: "interrupt" });
@@ -351,5 +379,9 @@ export function useVisionSession() {
startSession, startSession,
stopSession, stopSession,
interrupt, interrupt,
isCameraOn,
isMicOn,
toggleCamera,
toggleMic,
}; };
} }