feat: 支持无摄像头/麦克风模式打字聊天

- 修改 startSession 逻辑,摄像头和麦克风为可选
- 连接成功后始终显示聊天输入框
- 更新 UI 提示文字,引导用户打字对话
This commit is contained in:
2026-06-14 13:13:29 +08:00
parent dfccc824be
commit dffc8aa538
4 changed files with 37 additions and 17 deletions

View File

@@ -265,6 +265,11 @@ body {
margin-bottom: 4px;
}
.video-placeholder__hint {
font-size: 0.72rem;
opacity: 0.6;
}
.video-indicator {
position: absolute;
bottom: 16px;

View File

@@ -173,6 +173,16 @@ function App() {
<span>点击下方按钮开始对话</span>
</div>
)}
{isConnected && !isCameraOn && (
<div className="video-placeholder">
<svg className="video-placeholder__icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
<circle cx="12" cy="13" r="4" />
</svg>
<span>摄像头未开启</span>
<span className="video-placeholder__hint">可在右侧聊天框打字对话</span>
</div>
)}
</div>
{/* 视频下方控制栏 */}

View File

@@ -58,15 +58,15 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
<div className="chat-panel chat-panel--empty">
<span className="chat-panel--empty-icon">💬</span>
<p>点击下方按钮开始对话</p>
<span className="chat-panel--empty-hint">连接后可通过摄像头和麦克风与 AI 交互</span>
<span className="chat-panel--empty-hint">连接后可打字或语音与 AI 交互</span>
</div>
);
}
return (
<div className="chat-panel chat-panel--empty">
<span className="chat-panel--empty-icon">🎙️</span>
<p>对着摄像头说话即可</p>
<span className="chat-panel--empty-hint">AI 会自动识别你的语音并分析画面</span>
<span className="chat-panel--empty-icon">💬</span>
<p>在下方输入文字开始对话</p>
<span className="chat-panel--empty-hint">也可以开启麦克风用语音对话</span>
</div>
);
}

View File

@@ -284,21 +284,26 @@ 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
// 1. 连接 WebSocket(必须)
connect();
// 3. 启动 VAD(传入麦克风 stream)
await startVAD(micStream);
// 2. 尝试获取摄像头(可选)
try {
await startCamera();
setIsCameraOn(true);
} catch {
console.warn("[Session] 无法获取摄像头权限,将以纯文本模式运行");
}
// 3. 尝试获取麦克风(可选)
const micStream = await startMic();
if (micStream) {
setIsMicOn(true);
// 4. 启动 VAD(仅在麦克风可用时)
await startVAD(micStream);
} else {
console.warn("[Session] 无法获取麦克风权限,将以文本输入模式运行");
}
}, [startCamera, startMic, connect, startVAD]);
/** 结束会话 */