extension-qr-code

QR コードスキャナー

Caffeine AI 用の QR コードスキャナー拡張機能です。

概要

このスキルでは、デバイスのカメラを使用して QR コードをスキャンできます。カメラコンポーネントを基盤とし、デコードには jsQR を使用しています。

フロントエンド

QR コードスキャナーをサポートするには、次のとおりです。

@caffeinelabs/qr-code からインポートされる、変更できない React フックがあらかじめ用意されています。

import { RefObject } from 'react';
import { CameraConfig, CameraError } from '@caffeineai/camera';

export interface QRResult {
  // The decoded QR code data
  data: string;
  // Timestamp when the QR code was scanned
  timestamp: number;
}

export interface QRScannerConfig extends CameraConfig {
  // How often to scan for QR codes in milliseconds (default: 100)
  scanInterval?: number;
  // Maximum number of results to keep in history (default: 10)
  maxResults?: number;
  // URL to load jsQR library from (default: jsdelivr CDN)
  jsQRUrl?: string;
}

export interface UseQRScannerReturn {
  // Array of scanned QR codes (newest first)
  qrResults: QRResult[];
  // Whether currently scanning for QR codes
  isScanning: boolean;
  // Whether jsQR library has been loaded
  jsQRLoaded: boolean;
  
  // Camera state (pass-through from useCamera)
  isActive: boolean;
  isSupported: boolean | null;
  error: CameraError | null;
  isLoading: boolean;
  currentFacingMode: 'user' | 'environment';
  
  // Start camera and begin scanning - returns true on success
  startScanning: () => Promise<boolean>;
  // Stop scanning and camera
  stopScanning: () => Promise<void>;
  // Switch camera facing mode - returns true on success
  switchCamera: () => Promise<boolean>;
  // Clear all scan results
  clearResults: () => void;
  // Reset scanner state (stop scanning and clear results)
  reset: () => void;
  // Retry camera initialization after error - returns true on success
  retry: () => Promise<boolean>;
  
  // Ref to attach to video element for camera preview
  videoRef: RefObject<HTMLVideoElement>;
  // Ref to attach to canvas element used for QR processing (can be hidden)
  canvasRef: RefObject<HTMLCanvasElement>;
  
  // Computed state
  // Whether scanner is ready to use (jsQR loaded and camera supported)
  isReady: boolean;
  // Whether scanning can be started (ready + not loading)
  canStartScanning: boolean;
}

export declare function useQRScanner(config?: QRScannerConfig): UseQRScannerReturn;

使用例：

import { useQRScanner } from '@caffeineai/qr-code';

function QRScannerComponent() {
    const { 
        qrResults,
        isScanning,
        isActive,
        isSupported,
        error,
        isLoading,
        canStartScanning,
        startScanning,
        stopScanning,
        switchCamera,
        clearResults,
        videoRef,
        canvasRef 
    } = useQRScanner({ 
        facingMode: 'environment',
        scanInterval: 100,
        maxResults: 5
    });

    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={startScanning} disabled={!canStartScanning}>
                    Start Scanning
                </button>
                <button onClick={stopScanning} disabled={isLoading || !isActive}>
                    Stop Scanning
                </button>
                {/* Only show switch camera on mobile */}
                {/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && (
                    <button onClick={switchCamera} disabled={isLoading || !isActive}>
                        Switch Camera
                    </button>
                )}
            </div>
            
            <div>
                <h3>Results {qrResults.length > 0 && <button onClick={clearResults}>Clear</button>}</h3>
                {qrResults.map(result => (
                    <div key={result.timestamp}>
                        <small>{new Date(result.timestamp).toLocaleTimeString()}</small>
                        <p>{result.data}</p>
                    </div>
                ))}
            </div>
        </div>
    );
}

アプリで QR スキャナーのエラーメッセージを適切に表示してください。