extension-camera

Camera

适用于 Caffeine AI 的 Camera 扩展。

概述

此技能通过预制的 React hook 添加网页摄像头访问功能，支持拍照、切换摄像头和错误处理。

前端

要支持摄像头：

有一个预制的 React hook @caffeinelabs/camera/hooks/useCamera.ts，不可修改。

import { RefObject } from 'react';

export interface CameraConfig {
  // Camera facing mode - 'user' for front camera, 'environment' for back camera
  facingMode?: 'user' | 'environment';
  // Ideal video width and height in pixels
  width?: number;
  height?: number;
  // Image quality for capture (0-1, where 1 is highest quality)
  quality?: number;
  format?: 'image/jpeg' | 'image/png' | 'image/webp';
}

export interface CameraError {
  type: 'permission' | 'not-supported' | 'not-found' | 'unknown' | 'timeout';
  message: string;
}

export interface UseCameraReturn {
  // Whether camera is currently active and streaming
  isActive: boolean;
  // Whether camera is supported in current browser (null while checking)
  isSupported: boolean | null;
  // Current error state, if any
  error: CameraError | null;
  // Whether camera is initializing, starting, switching, or stopping
  isLoading: boolean;
  currentFacingMode: 'user' | 'environment';
  
  // Returns true on success
  startCamera: () => Promise<boolean>;
  stopCamera: () => Promise<void>;
  capturePhoto: () => Promise<File | null>;
  // Returns true on success
  switchCamera: () => (newFacingMode?: 'user' | 'environment') : Promise<boolean>;
  // Returns true on success
  retry: () => Promise<boolean>;
  
  // Ref to attach to video element for camera preview
  videoRef: RefObject<HTMLVideoElement>;
  // Ref to canvas element used for photo capture (can be hidden)
  canvasRef: RefObject<HTMLCanvasElement>;
}

export declare function useCamera(config?: CameraConfig): UseCameraReturn;

使用示例：

import { useCamera } from '@caffeineai/camera';

function CameraComponent() {
    const { 
        isActive, 
        isSupported, 
        error, 
        isLoading,
        startCamera, 
        stopCamera, 
        capturePhoto,
        switchCamera,
        videoRef, 
        canvasRef 
    } = useCamera({ 
        autoStart: true,
        facingMode: 'environment' 
    });

    if (isSupported === false) {
        return <div>Camera not supported</div>;
    }

    return (
        <div>
            <video 
                ref={videoRef} 
                style={{ width: '100%', height: 'auto' }}
                playsInline
                muted
            />
            <canvas ref={canvasRef} style={{ display: 'none' }} />
            
            {error && <div>Error: {error.message}</div>}
            
            <div>
                <button onClick={startCamera} disabled={isLoading || isActive}>
                    Start Camera
                </button>
                <button onClick={stopCamera} disabled={isLoading || !isActive}>
                    Stop Camera
                </button>
                <button onClick={switchCamera} disabled={isLoading || !isActive}>
                    Switch Camera
                </button>
                <button onClick={capturePhoto} disabled={!isActive}>
                    Take Photo
                </button>
            </div>
        </div>
    );
}

始终在摄像头预览画面上放置拍摄按钮！ 用户打开摄像头时，始终显示摄像头预览画面。 在桌面设备上，确保摄像头不可切换。只有 'environment' 模式可用。 在应用中正确显示摄像头错误消息。 摄像头完全初始化并准备就绪之前，不要让摄像头按钮可点击。 确保摄像头预览画面具有明确且非零的尺寸（固定高度、最小高度或宽高比容器），避免因布局问题而塌陷。 确保预览画面能够适应不同屏幕尺寸（例如，使用 width: 100% 并保持稳定的宽高比）。