QR Code Scanner

QR code scanner extension for Caffeine AI.

Overview

This skill adds QR code scanning using the device camera. Built on top of the camera component with jsQR for decoding.

Frontend

For QR code scanner support:

There is a prefabricated React hook imported from @caffeinelabs/qr-code that cannot be modified.

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;

Usage example:

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

Properly display QR scanner error messages in the app.