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

```javascript
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.

```javascript
// 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.

```javascript
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`).

```javascript
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.

```javascript
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]]