Barcode Detection API

The Barcode Detection API detects barcodes and QR codes in images. It allows web applications to read various barcode formats directly in the browser without sending images to a server or using heavy external libraries.

1. The Concept

The API provides a BarcodeDetector interface. You can pass it an image source (like an HTMLImageElement, HTMLVideoElement, or HTMLCanvasElement), and it returns a list of detected barcodes.

2. Supported Formats

You can check which formats are supported by the browser using BarcodeDetector.getSupportedFormats(). Common formats include:

qr_code
ean_13
ean_8
code_128
code_39
upc_a
upc_e
aztec
data_matrix
pdf417

BarcodeDetector.getSupportedFormats().then((formats) => {
  console.log('Supported formats:', formats);
});

3. Creating a Detector

You create a detector by specifying the formats you want to scan for.

// Create a detector for QR codes and EAN-13
const detector = new BarcodeDetector({
  formats: ['qr_code', 'ean_13']
});

4. Detecting Barcodes

Use the detect() method to scan an image source. It returns a Promise that resolves to an array of detected barcodes.

const image = document.getElementById('barcode-image');

detector.detect(image)
  .then((barcodes) => {
    barcodes.forEach((barcode) => {
      console.log('Format:', barcode.format);
      console.log('Raw Value:', barcode.rawValue);
      console.log('Bounding Box:', barcode.boundingBox);
      // boundingBox has x, y, width, height, top, right, bottom, left
    });
  })
  .catch((err) => {
    console.error('Barcode detection failed:', err);
  });

5. Using with a Camera (Video Stream)

You can detect barcodes in real-time from a video stream (e.g., getUserMedia).

const video = document.querySelector('video');

// Start camera
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
  .then((stream) => {
    video.srcObject = stream;
    video.play();

    // Start detection loop
    detectLoop();
  });

function detectLoop() {
  if (video.readyState === video.HAVE_ENOUGH_DATA) {
    detector.detect(video)
      .then((barcodes) => {
        if (barcodes.length > 0) {
          console.log('Detected:', barcodes[0].rawValue);
        }
      })
      .catch(console.error);
  }

  requestAnimationFrame(detectLoop);
}

6. Browser Support

This API is still experimental and not supported in all browsers (primarily Chrome/Edge on Android/Desktop and Opera). You should check for support before using it.

if ('BarcodeDetector' in window) {
  console.log('Barcode Detection API is supported');
} else {
  console.log('Barcode Detection API is not supported');
}

programming/javascript/vanilla/javascript programming/javascript/vanilla/promises-async-await programming/javascript/vanilla/canvas-api

Created: March 17, 2026 • Last Modified: February 1, 2026

Docs Login