Code

Detects linear and two-dimensional barcodes in images and video streams using the platform's native barcode scanning capabilities. Supports formats including QR codes, Data Matrix, PDF417, EAN, UPC, Code 128, and more. Requires a secure context (HTTPS).

MDN Reference

Key Interface

• new BarcodeDetector(options?) — Creates a detector. Optionally pass { formats: ['qr_code', 'ean_13'] } to restrict formats.
• BarcodeDetector.detect(image) — Returns a Promise<DetectedBarcode[]>. Accepts ImageBitmap, HTMLImageElement, HTMLVideoElement, HTMLCanvasElement, or Blob.
• BarcodeDetector.getSupportedFormats() — Static method returning a Promise<string[]> of supported barcode formats.
• DetectedBarcode.rawValue — The decoded string value of the barcode.
• DetectedBarcode.boundingBox — A DOMRectReadOnly giving the bounding box of the detected barcode in the image.

Example — Detect barcodes in an image

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

const img = document.querySelector('img#product');

try {
  const barcodes = await detector.detect(img);

  for (const barcode of barcodes) {
    console.log('Format:', barcode.format);
    console.log('Value:', barcode.rawValue);
    console.log('Bounding box:', barcode.boundingBox);
  }
} catch (err) {
  console.error('Detection failed:', err);
}

Example — Scan from a live camera stream

Run detection on each video frame using requestAnimationFrame for a continuous scan loop.

const video = document.querySelector('video');
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
await video.play();

const detector = new BarcodeDetector({ formats: ['qr_code'] });

async function scanFrame() {
  const barcodes = await detector.detect(video);

  if (barcodes.length > 0) {
    console.log('Scanned QR:', barcodes[0].rawValue);
    // stop scanning once found
    return;
  }

  requestAnimationFrame(scanFrame);
}

requestAnimationFrame(scanFrame);

Example — Query supported formats

const formats = await BarcodeDetector.getSupportedFormats();
console.log('Supported formats:', formats);
// e.g. ["aztec", "code_128", "data_matrix", "ean_13", "qr_code", ...]