useBarcodeDetector

sensors

Installation

npx usehooks-cli@latest add use-barcode-detector

Description

A hook for detecting barcodes in images using the Web Barcode Detection API. Supports various barcode formats including QR codes, Code 128, EAN, and more.

Parameters

Name	Type	Default	Description
options?	UseBarcodeDetectorOptions	-	Configuration options for barcode detection

Parameter Properties

options properties:

Name	Type	Description
formats?	string[]	Array of barcode formats to detect (defaults to all supported formats)

Return Type

UseBarcodeDetectorReturn

Property	Type	Description
detect	(source: ImageBitmapSource) => Promise<DetectedBarcode[]>	Detect barcodes in the provided image source
isSupported	boolean	Whether the Barcode Detection API is supported
supportedFormats	string[]	Array of supported barcode formats
isDetecting	boolean	Whether detection is currently in progress
error	string \| null	Error message if detection failed

Examples

Basic Barcode Detection

Detect barcodes from an image file input

import { useBarcodeDetector } from '@usehooks/use-barcode-detector';
import { useRef } from 'react';

function BarcodeScanner() {
  const { detect, isSupported, isDetecting, error } = useBarcodeDetector();
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    try {
      const barcodes = await detect(file);
      console.log('Detected barcodes:', barcodes);
      barcodes.forEach(barcode => {
        console.log(`Format: ${barcode.format}, Value: ${barcode.rawValue}`);
      });
    } catch (err) {
      console.error('Detection failed:', err);
    }
  };

  if (!isSupported) {
    return <div>Barcode detection not supported</div>;
  }

  return (
    <div>
      <input
        ref={fileInputRef}
        type="file"
        accept="image/*"
        onChange={handleFileSelect}
        disabled={isDetecting}
      />
      {isDetecting && <p>Detecting...</p>}
      {error && <p>Error: {error}</p>}
    </div>
  );
}

QR Code Detection

Detect only QR codes from camera stream

import { useBarcodeDetector } from '@usehooks/use-barcode-detector';
import { useRef, useEffect } from 'react';

function QRScanner() {
  const { detect, isSupported } = useBarcodeDetector({
    formats: ['qr_code']
  });
  const videoRef = useRef<HTMLVideoElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    let stream: MediaStream;

    const startCamera = async () => {
      try {
        stream = await navigator.mediaDevices.getUserMedia({ video: true });
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      } catch (err) {
        console.error('Camera access failed:', err);
      }
    };

    startCamera();

    return () => {
      if (stream) {
        stream.getTracks().forEach(track => track.stop());
      }
    };
  }, []);

  const scanFrame = async () => {
    if (!videoRef.current || !canvasRef.current) return;

    const canvas = canvasRef.current;
    const video = videoRef.current;
    const ctx = canvas.getContext('2d');

    if (ctx) {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      ctx.drawImage(video, 0, 0);

      try {
        const barcodes = await detect(canvas);
        if (barcodes.length > 0) {
          console.log('QR Code detected:', barcodes[0].rawValue);
        }
      } catch (err) {
        console.error('Scan failed:', err);
      }
    }

    requestAnimationFrame(scanFrame);
  };

  if (!isSupported) {
    return <div>Barcode detection not supported</div>;
  }

  return (
    <div>
      <video ref={videoRef} autoPlay muted onLoadedMetadata={scanFrame} />
      <canvas ref={canvasRef} style={{ display: 'none' }} />
    </div>
  );
}

Multiple Format Detection

Detect multiple barcode formats with detailed information

import { useBarcodeDetector } from '@usehooks/use-barcode-detector';
import { useState } from 'react';

function MultiBarcodeScanner() {
  const { detect, supportedFormats, isDetecting } = useBarcodeDetector();
  const [results, setResults] = useState<any[]>([]);

  const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    try {
      const barcodes = await detect(file);
      setResults(barcodes);
    } catch (err) {
      console.error('Detection failed:', err);
      setResults([]);
    }
  };

  return (
    <div>
      <div>
        <h3>Supported Formats:</h3>
        <ul>
          {supportedFormats.map(format => (
            <li key={format}>{format}</li>
          ))}
        </ul>
      </div>

      <input
        type="file"
        accept="image/*"
        onChange={handleImageUpload}
        disabled={isDetecting}
      />

      {results.length > 0 && (
        <div>
          <h3>Detected Barcodes:</h3>
          {results.map((barcode, index) => (
            <div key={index}>
              <p><strong>Format:</strong> {barcode.format}</p>
              <p><strong>Value:</strong> {barcode.rawValue}</p>
              <p><strong>Bounding Box:</strong> {JSON.stringify(barcode.boundingBox)}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Dependencies

react

Notes

•Only available in browsers that support the Barcode Detection API (Chrome 83+)
•Requires HTTPS in production environments
•Supported formats vary by browser and platform
•Image sources can be HTMLImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, or File
•Detection accuracy depends on image quality and barcode visibility

Implementation

"use client";

import { useState, useCallback, useRef, useEffect } from "react";

interface DetectedBarcode {
  boundingBox: DOMRectReadOnly;
  cornerPoints: Array<{ x: number; y: number }>;
  format: string;
  rawValue: string;
}

interface UseBarcodeDetectorOptions {
  formats?: string[];
}

interface UseBarcodeDetectorReturn {
  detect: (source: ImageBitmapSource) => Promise<DetectedBarcode[]>;
  isSupported: boolean;
  supportedFormats: string[];
  isDetecting: boolean;
  error: string | null;
}

export const useBarcodeDetector = (
  options: UseBarcodeDetectorOptions = {}
): UseBarcodeDetectorReturn => {
  const [isDetecting, setIsDetecting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [supportedFormats, setSupportedFormats] = useState<string[]>([]);
  const detectorRef = useRef<any | null>(null);

  const isSupported =
    typeof window !== "undefined" && "BarcodeDetector" in window;

  useEffect(() => {
    if (!isSupported) return;

    const initializeDetector = async () => {
      try {
        // Get supported formats
        const formats = await (
          window as any
        ).BarcodeDetector.getSupportedFormats();
        setSupportedFormats(formats);

        // Create detector with specified formats or all supported formats
        const detectorFormats = options.formats || formats;
        detectorRef.current = new (window as any).BarcodeDetector({
          formats: detectorFormats,
        });
      } catch (err) {
        setError(
          err instanceof Error
            ? err.message
            : "Failed to initialize barcode detector"
        );
      }
    };

    initializeDetector();
  }, [isSupported, options.formats]);

  const detect = useCallback(
    async (source: ImageBitmapSource): Promise<DetectedBarcode[]> => {
      if (!isSupported || !detectorRef.current) {
        throw new Error("Barcode detection is not supported");
      }

      setIsDetecting(true);
      setError(null);

      try {
        const barcodes = await detectorRef.current.detect(source);
        return barcodes.map((barcode: any) => ({
          boundingBox: barcode.boundingBox,
          cornerPoints: barcode.cornerPoints,
          format: barcode.format,
          rawValue: barcode.rawValue,
        }));
      } catch (err) {
        const errorMessage =
          err instanceof Error ? err.message : "Detection failed";
        setError(errorMessage);
        throw new Error(errorMessage);
      } finally {
        setIsDetecting(false);
      }
    },
    [isSupported]
  );

  return {
    detect,
    isSupported,
    supportedFormats,
    isDetecting,
    error,
  };
};

export default useBarcodeDetector;

useAudioRecorder

CLI Docs All Hooks

useDeviceOrientation