extension-camera

カメラ

Caffeine AI 用のカメラ拡張機能です。

概要

あらかじめ用意された React フックを使って、Web カメラにアクセスできるようにするスキルです。写真の撮影、カメラの切り替え、エラー処理に対応しています。

フロントエンド

カメラをサポートするには：

あらかじめ用意された React フック @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」のみが動作します。 アプリ内でカメラのエラーメッセージを適切に表示してください。 カメラの初期化が完了し、使用可能になるまで、カメラのボタンをクリックできないようにしてください。 レイアウトによってプレビューが消えないように、プレビューには明示的なゼロ以外の寸法（固定の高さ、最小の高さ、またはアスペクト比を指定したラッパー）を設定してください。 幅を 100% にし、安定したアスペクト比を指定するなどして、画面サイズに応じてプレビューを表示してください。