extension-camera

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Camera

摄像头

Camera extension for Caffeine AI.

为Caffeine AI开发的摄像头扩展。

Overview

概述

This skill adds web-camera access via a prefabricated React hook. Supports photo capture, camera switching, and error handling.

该Skill通过预制的React Hook添加网络摄像头访问功能，支持拍照、摄像头切换和错误处理。

Frontend

前端

For camera support:

There is a prefabricated React hook

@caffeinelabs/camera/hooks/useCamera.ts

that cannot be modified.

typescript

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;

Usage example:

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>
    );
}

Always place a capture button on camera preview! Always show a camera preview when the user opens the camera On desktop, make sure that camera cannot be switched. Only 'environment' is working. Properly display camera error messages in the app. Do not make camera buttons clickable until the camera is fully initialized and ready. Ensure the camera preview has explicit, non-zero dimensions (fixed height, min-height, or an aspect-ratio wrapper) so it never collapses due to layout. Make the preview responsive across screen sizes (e.g., width: 100% with a stable aspect ratio).

如需摄像头支持：

有一个不可修改的预制React Hook

@caffeinelabs/camera/hooks/useCamera.ts

。

typescript

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%并保持稳定的宽高比）