feat(摄像头): 优化帧率与图片压缩，移除无用覆盖层

- 帧间隔从 10s 调整为 5s
- 拍照后使用 ImageManipulator resize 到 512px + compress 0.5
  将每帧大小从 ~4MB 压缩至 ~50-100KB，避免 WebSocket 断连
- 删除已废弃的 CameraStreamOverlay 组件

Author: Tonnodoubt

components/CameraStreamOverlay.tsx

@@ -24,6 +24,8 @@ export interface UseCameraStreamReturn {
   hasPermission: boolean | null;
   isCameraReady: boolean;
   checkAndRequestPermission: () => Promise<boolean>;
+  /** CameraView 是否应该挂载（用于条件渲染，避免占用摄像头资源） */
+  shouldMount: boolean;
 }
 
 /**
@@ -41,6 +43,8 @@ export function useCameraStream(
   const [error, setError] = useState<string | null>(null);
   const [facing, setFacing] = useState<CameraType>('front');
   const [isCameraReady, setIsCameraReady] = useState(false);
+  // 控制 CameraView 挂载（只在需要时挂载，避免白占摄像头资源）
+  const [shouldMount, setShouldMount] = useState(false);
 
   // 使用 ref 存储配置，避免闭包过期
   const sendMessageRef = useRef(config.sendMessage);
@@ -67,7 +71,7 @@ export function useCameraStream(
         setError(err.message);
         setStatus('error');
       },
-      frameInterval: 10000, // 10s，大幅降低频率避免阻塞主线程
+      frameInterval: 5000, // 5s
     });
 
     serviceRef.current = service;
@@ -78,33 +82,31 @@ export function useCameraStream(
     };
   }, []);
 
-  // CameraView 就绪回调
+  // CameraView 就绪回调 —— 此时 CameraView 已挂载，可以启动服务
   const onCameraReady = useCallback(() => {
     console.log('📹 CameraView 已就绪');
     setIsCameraReady(true);
+    if (serviceRef.current && cameraRef.current) {
+      serviceRef.current.setCameraRef(cameraRef.current);
+      serviceRef.current.start();
+    }
   }, []);
 
-  // 开始流式传输
+  // 开始流式传输：设置方向 + 触发 CameraView 挂载，实际启动由 onCameraReady 完成
   const startStreaming = useCallback((selectedFacing?: CameraType) => {
-    console.log('📹 启动摄像头流，方向:', selectedFacing || facing);
-
+    console.log('📹 请求启动摄像头流，方向:', selectedFacing || facing);
+    setIsCameraReady(false);
     if (selectedFacing) {
       setFacing(selectedFacing);
     }
-
-    // 延迟启动，确保 CameraView 已就绪（如果刚改变 facing）
-    setTimeout(() => {
-      if (serviceRef.current && cameraRef.current) {
-        serviceRef.current.setCameraRef(cameraRef.current);
-        serviceRef.current.start();
-      }
-    }, 100);
+    setShouldMount(true);
   }, [facing]);
 
   // 停止流式传输
   const stopStreaming = useCallback(() => {
     console.log('📹 停止摄像头流');
     serviceRef.current?.stop();
+    setShouldMount(false);
     setError(null);
   }, []);
 
@@ -172,5 +174,6 @@ export function useCameraStream(
     hasPermission: permission?.granted ?? null,
     isCameraReady,
     checkAndRequestPermission,
+    shouldMount,
   };
 }

hooks/useCameraStream.ts

@@ -1,4 +1,5 @@
 import { CameraView } from 'expo-camera';
+import * as ImageManipulator from 'expo-image-manipulator';
 
 export type CameraStreamStatus = 'idle' | 'streaming' | 'paused' | 'error';
 
@@ -31,7 +32,7 @@ export class CameraStreamService {
 
   constructor(config: CameraStreamConfig) {
     this.config = config;
-    this.frameInterval = config.frameInterval ?? 15000; // 默认 15s
+    this.frameInterval = config.frameInterval ?? 5000; // 默认 5s
   }
 
   private setStatus(status: CameraStreamStatus) {
@@ -132,25 +133,38 @@ export class CameraStreamService {
 
       console.log('📷 开始捕获...');
 
-      // Step 2: 拍照（最低质量）
+      // Step 2: 拍照（跳过处理，拿原始帧）
       const photo = await this.cameraRef.takePictureAsync({
-        base64: true,
-        quality: 0.1,        // 极低质量，减少处理时间
+        base64: false,
+        quality: 1,
         shutterSound: false,
         skipProcessing: true,
       });
 
-      // Step 3: 立即让出主线程
+      // Step 3: 让出主线程
       await yieldToMain(100);
 
-      if (!photo.base64) {
+      if (!photo.uri) {
         console.warn('⚠️ 拍照失败');
         return;
       }
 
-      // Step 4: 构造消息（同步操作，但很快）
-      const base64WithPrefix = `data:image/jpeg;base64,${photo.base64}`;
-      const sizeKB = Math.round(photo.base64.length * 0.75 / 1024);
+      // Step 4: resize 到 512px 以内，压缩到 ~50-100KB
+      const resized = await ImageManipulator.manipulateAsync(
+        photo.uri,
+        [{ resize: { width: 512 } }],
+        { compress: 0.5, format: ImageManipulator.SaveFormat.JPEG, base64: true }
+      );
+
+      await yieldToMain(50);
+
+      if (!resized.base64) {
+        console.warn('⚠️ 压缩失败');
+        return;
+      }
+
+      const base64WithPrefix = `data:image/jpeg;base64,${resized.base64}`;
+      const sizeKB = Math.round(resized.base64.length * 0.75 / 1024);
 
       console.log('📷 帧完成:', `${sizeKB}KB`);