Extension Camera

作者 caffeinelabs362f51ae96f0無授權條款2 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫今天更新

Web-camera support.

僅含說明Software Development

AI 產生的概覽

透過預製的 React hook 為 Caffeine AI 應用程式加入網路攝影機支援，可預覽、拍照與切換鏡頭。

功能: 此技能說明如何使用 @caffeineai/camera 套件中預製的 React hook，在 Caffeine AI 前端整合網路攝影機功能。內容涵蓋啟動與停止攝影機、顯示即時預覽、將照片擷取為檔案、在前置與後置鏡頭之間切換，以及處理權限、瀏覽器不支援、找不到裝置與逾時等錯誤。它也提供介面建議，例如一律顯示預覽與拍照按鈕、在初始化完成前停用按鈕，以及為預覽設定明確的非零尺寸。
適用情境: 適用於需要攝影機輸入的 Caffeine AI 網頁應用程式，例如拍照或使用裝置鏡頭進行掃描。適合需要以 React hook 實作攝影機預覽與拍照流程的前端開發情境。
執行需求: 需要一個 Caffeine AI 前端專案，依賴 npm 套件 @caffeineai/camera（約 0.1.1）與 React。攝影機 hook 檔案為預製檔案，無法修改。執行時需要瀏覽器攝影機權限；不隨附指令碼。

Camera

Camera extension for Caffeine AI.

Overview

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

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;

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

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).

來源與署名

來源：caffeinelabs/skills位於skills/extension-camera提交362f51a

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Extension Camera

Camera

Overview

Frontend

來源與署名

更多來自 caffeinelabs/skills 的技能

Writing Motoko

Migrating Motoko Actors

Troubleshooting Motoko Migrations

Extension Querying Oql

Extension Qr Code

Extension Object Storage

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Testing Strategy

Tech Debt

System Design