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