Extension Qr Code

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