React QR barcode scanner

Build scanner screens with React camera hooks.

Use react-webcam-kit for permission prompts, mobile back camera constraints, preview lifecycle, and clean stream teardown around QR code and barcode scanning workflows.

Browser BarcodeDetector example

import { useEffect, useState } from 'react';
import { useWebcam } from 'react-webcam-kit';

export function BarcodeScanner() {
  const [value, setValue] = useState(null);
  const camera = useWebcam({
    audio: false,
    videoConstraints: {
      facingMode: { ideal: 'environment' },
      width: { ideal: 1280 },
      height: { ideal: 720 },
    },
  });

  useEffect(() => {
    if (!('BarcodeDetector' in window) || camera.status !== 'ready') return;

    const detector = new BarcodeDetector({ formats: ['qr_code', 'code_128'] });
    let stopped = false;

    async function scan() {
      const video = camera.videoRef.current;
      if (!video || stopped) return;

      const codes = await detector.detect(video);
      if (codes[0]) setValue(codes[0].rawValue);

      requestAnimationFrame(scan);
    }

    void scan();

    return () => {
      stopped = true;
    };
  }, [camera.status, camera.videoRef]);

  return (
    <>
      <video ref={camera.videoRef} autoPlay playsInline muted />
      <p>{value ?? 'Scan a QR code or barcode'}</p>
    </>
  );
}

Scanner integration tips

• Use `useCameraPermissions()` before rendering a dedicated scanner package.
• Prefer `facingMode: { ideal: 'environment' }` for mobile QR and barcode scanning.
• Feature-detect `BarcodeDetector` before using the browser scanner API.
• Keep scanner decoder packages optional unless every screen needs scanning.
• Stop streams when scanner modals close or routes change.

QR and barcode decoding support varies by browser. Use react-webcam-kit for camera lifecycle and add a dedicated decoder library when your app needs broader scanner compatibility.

Related guides