---
id: gh-extension-qr-code
name: "extension-qr-code"
url: https://skills.yangsir.net/skill/gh-extension-qr-code
author: caffeinelabs
domain: mobile
tags: ["qr-code", "scanner", "camera", "mobile-development", "react"]
install_count: 27500
rating: 4.60 (120 reviews)
github: https://github.com/caffeinelabs/skills/tree/main/skills/extension-qr-code
---

# extension-qr-code

> 此技能提供一个基于摄像头的高效二维码扫描器。它利用设备摄像头实时捕获图像并解码二维码，支持前后摄像头切换，并提供易于集成的 React Hook，极大简化了移动或Web应用中二维码扫描功能的开发和部署。

**Stats**: 27,500 installs · 4.6/5 (120 reviews)

## Before / After 对比

### 二维码信息获取效率

**Before**:

用户需要手动输入网址、产品序列号或在其他应用中查找信息，耗时且容易出错，尤其是在需要频繁获取信息时，体验非常不便。

**After**:

该 Skill 允许用户通过摄像头即时扫描二维码，快速获取所需信息，无需手动输入，大大提升了信息获取效率和准确性，优化了用户体验。

| Metric | Before | After | Change |
|---|---|---|---|
| 信息获取时间 | 60秒 | 5秒 | -91.67% |

## Readme

# QR Code Scanner
QR code scanner extension for [Caffeine AI](https://caffeine.ai?utm_source=caffeine-skill&utm_medium=referral).

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

```typescript filepath=@caffeinelabs/qr-code/src/hooks/useQRScanner.ts
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:

```typescript filepath=example.ts
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.


---
*Source: https://skills.yangsir.net/skill/gh-extension-qr-code*
*Markdown mirror: https://skills.yangsir.net/api/skill/gh-extension-qr-code/markdown*