### Install @zxing/browser and @zxing/library

Source: https://context7.com/zxing-js/browser/llms.txt

Install the necessary packages for barcode scanning in the browser. Use npm or yarn.

```bash
npm install @zxing/browser @zxing/library
# or
yarn add @zxing/browser @zxing/library
```

--------------------------------

### Install ZXing Browser via NPM

Source: https://github.com/zxing-js/browser/blob/master/README.md

Use this command to add the ZXing browser library to your project using NPM.

```bash
npm i @zxing/browser
```

--------------------------------

### Install ZXing Browser via Yarn

Source: https://github.com/zxing-js/browser/blob/master/README.md

Use this command to add the ZXing browser library to your project using Yarn.

```bash
yarn add @zxing/browser
```

--------------------------------

### Scan from Webcam Continuously

Source: https://github.com/zxing-js/browser/blob/master/README.md

Continuously scan barcodes from a selected webcam device. This example lists available devices, selects the first one, and starts decoding into a video element. It includes logic to stop scanning after a set duration.

```typescript
const codeReader = new BrowserQRCodeReader();

const videoInputDevices = await ZXingBrowser.BrowserCodeReader.listVideoInputDevices();

// choose your media device (webcam, frontal camera, back camera, etc.)
const selectedDeviceId = videoInputDevices[0].deviceId;

console.log(`Started decode from camera with id ${selectedDeviceId}`);

const previewElem = document.querySelector('#test-area-qr-code-webcam > video');

// you can use the controls to stop() the scan or switchTorch() if available
const controls = await codeReader.decodeFromVideoDevice(selectedDeviceId, previewElem, (result, error, controls) => {
  // use the result and error values to choose your actions
  // you can also use controls API in this scope like the controls
  // returned from the method.
});

// stops scanning after 20 seconds
setTimeout(() => controls.stop(), 20000);
```

--------------------------------

### Import ZXingBrowser as ES6 Module

Source: https://github.com/zxing-js/browser/blob/master/README.md

Import the BrowserQRCodeReader class from the ZXing browser library using ES6 module syntax.

```html
<script type="module">
  import { BrowserQRCodeReader } from '@zxing/browser';

  const codeReader = new BrowserQRCodeReader();

  // do something with codeReader...

</script>
```

--------------------------------

### BrowserCodeReader.listVideoInputDevices()

Source: https://context7.com/zxing-js/browser/llms.txt

Lists all available video input devices on the system. This static method uses `navigator.mediaDevices.enumerateDevices()` and returns a Promise resolving to an array of `MediaDeviceInfo` objects. It's useful for creating user interfaces that allow selection of different cameras.

```APIDOC
## BrowserCodeReader.listVideoInputDevices()

### Description
Static method that enumerates all `videoinput` devices available in the browser via `navigator.mediaDevices.enumerateDevices()`. Returns a `Promise<MediaDeviceInfo[]>`. Useful for building device-picker UIs.

### Method
`static async listVideoInputDevices(): Promise<MediaDeviceInfo[]>`

### Example
```typescript
import { BrowserCodeReader } from '@zxing/browser';

async function buildDevicePicker() {
  const devices = await BrowserCodeReader.listVideoInputDevices();

  if (devices.length === 0) {
    console.warn('No video input devices found.');
    return;
  }

  const select = document.getElementById('camera-select') as HTMLSelectElement;
  devices.forEach((device) => {
    const option = document.createElement('option');
    option.value = device.deviceId;
    option.text = device.label || `Camera ${device.deviceId.slice(0, 8)}`;
    select.appendChild(option);
  });
}
```
```

--------------------------------

### Import ZXingBrowser with AMD

Source: https://github.com/zxing-js/browser/blob/master/README.md

Import the ZXingBrowser module using RequireJS for AMD environments. The library is exposed as ZXingBrowser.

```html
<script type="text/javascript" src="https://unpkg.com/requirejs"></script>
<script type="text/javascript">
  require(['@zxing/browser'], ZXingBrowser => {

    const codeReader = new ZXingBrowser.BrowserQRCodeReader();

    // do something with codeReader...

  });
</script>
```

--------------------------------

### IBrowserCodeReaderOptions

Source: https://context7.com/zxing-js/browser/llms.txt

Configuration interface for reader constructors to control scanning timing and video playback. Options include delayBetweenScanSuccess, delayBetweenScanAttempts, and tryPlayVideoTimeout.

```APIDOC
## IBrowserCodeReaderOptions

### Description
Configuration interface passed to any reader constructor to control scanning timing and video playback behavior.

### Properties
- **delayBetweenScanSuccess** (number) - Optional - Milliseconds to wait between successive successful decode results (default: 500).
- **delayBetweenScanAttempts** (number) - Optional - Milliseconds to wait between decode attempts when nothing is found (default: 500).
- **tryPlayVideoTimeout** (number) - Optional - Milliseconds to wait for the video 'canplay' event before timing out (default: 5000).

### Example
```typescript
import { BrowserQRCodeReader, IBrowserCodeReaderOptions } from '@zxing/browser';

const options: IBrowserCodeReaderOptions = {
  delayBetweenScanSuccess: 300,
  delayBetweenScanAttempts: 200,
  tryPlayVideoTimeout: 10000,
};

const reader = new BrowserQRCodeReader(undefined, options);
```
```

--------------------------------

### BrowserCodeReader - Static Utility Methods

Source: https://context7.com/zxing-js/browser/llms.txt

A collection of static helper methods for device management, element creation, stream handling, and bitmap preparation.

```APIDOC
## BrowserCodeReader - Static Utility Methods

### Description
A collection of static helpers for device management, element creation, stream handling, and bitmap preparation.

### Methods

#### `mediaStreamIsTorchCompatible(stream: MediaStream): boolean`
Checks if the media stream supports torch functionality.

#### `mediaStreamSetTorch(track: MediaStreamTrack, enable: boolean): Promise<void>`
Controls the torch (flash) on a media stream track. This is an experimental feature.

#### `releaseAllStreams(): void`
Releases all tracked media streams.

#### `createCanvasFromMediaElement(videoElement: HTMLVideoElement): HTMLCanvasElement`
Creates a canvas snapshot from the current frame of a video element.

#### `createBinaryBitmapFromCanvas(canvas: HTMLCanvasElement): BinaryBitmap`
Creates a `BinaryBitmap` from a canvas element, useful for custom decoding pipelines.

#### `isVideoPlaying(videoElement: HTMLVideoElement): boolean`
Checks if a video element is currently playing.

#### `prepareVideoElement(videoId?: string): HTMLVideoElement`
Prepares a video element for use, ensuring autoplay, muted, and playsinline properties are set. Can create a new element or prepare an existing one by ID.

#### `cleanVideoSource(videoElement: HTMLVideoElement): void`
Cleans up the source of a video element.

### Request Example
```typescript
import { BrowserCodeReader } from '@zxing/browser';

// --- Media stream torch control (experimental) ---
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const track = stream.getVideoTracks()[0];

if (BrowserCodeReader.mediaStreamIsTorchCompatible(stream)) {
  await BrowserCodeReader.mediaStreamSetTorch(track, true);  // torch on
  await BrowserCodeReader.mediaStreamSetTorch(track, false); // torch off
}

// --- Release all tracked streams ---
BrowserCodeReader.releaseAllStreams();

// --- Create a canvas snapshot from a video element ---
const videoEl = document.getElementById('cam') as HTMLVideoElement;
const canvas = BrowserCodeReader.createCanvasFromMediaElement(videoEl);
// canvas now holds the current video frame, ready for decoding

// --- Create a BinaryBitmap from a canvas (for custom decode pipelines) ---
const bitmap = BrowserCodeReader.createBinaryBitmapFromCanvas(canvas);

// --- Check if a video is currently playing ---
const isPlaying = BrowserCodeReader.isVideoPlaying(videoEl);
console.log('Playing:', isPlaying);

// --- Prepare a video element (autoplay, muted, playsinline for iOS) ---
const preparedVideo = BrowserCodeReader.prepareVideoElement();
// or from existing element:
const preparedFromId = BrowserCodeReader.prepareVideoElement('my-video-id');

// --- Clean up a video element's source ---
BrowserCodeReader.cleanVideoSource(videoEl);
```
```

--------------------------------

### Import ZXingBrowser with UMD

Source: https://github.com/zxing-js/browser/blob/master/README.md

Load the ZXing browser library using a UMD-compatible script tag and access it via the ZXingBrowser global variable after the DOM is loaded.

```html
<script type="text/javascript" src="https://unpkg.com/@zxing/browser@latest"></script>
<script type="text/javascript">
  window.addEventListener('load', () => {

    const codeReader = new ZXingBrowser.BrowserQRCodeReader();

    // do something with codeReader...

  });
</script>
```

--------------------------------

### BrowserCodeReader Static Utility Methods

Source: https://context7.com/zxing-js/browser/llms.txt

Provides static helpers for media stream torch control, releasing streams, creating canvas snapshots, generating BinaryBitmaps, checking video playback, preparing video elements, and cleaning video sources.

```typescript
import { BrowserCodeReader } from '@zxing/browser';

// --- Media stream torch control (experimental) ---
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const track = stream.getVideoTracks()[0];

if (BrowserCodeReader.mediaStreamIsTorchCompatible(stream)) {
  await BrowserCodeReader.mediaStreamSetTorch(track, true);  // torch on
  await BrowserCodeReader.mediaStreamSetTorch(track, false); // torch off
}

// --- Release all tracked streams ---
BrowserCodeReader.releaseAllStreams();

// --- Create a canvas snapshot from a video element ---
const videoEl = document.getElementById('cam') as HTMLVideoElement;
const canvas = BrowserCodeReader.createCanvasFromMediaElement(videoEl);
// canvas now holds the current video frame, ready for decoding

// --- Create a BinaryBitmap from a canvas (for custom decode pipelines) ---
const bitmap = BrowserCodeReader.createBinaryBitmapFromCanvas(canvas);

// --- Check if a video is currently playing ---
const isPlaying = BrowserCodeReader.isVideoPlaying(videoEl);
console.log('Playing:', isPlaying);

// --- Prepare a video element (autoplay, muted, playsinline for iOS) ---
const preparedVideo = BrowserCodeReader.prepareVideoElement();
// or from existing element:
const preparedFromId = BrowserCodeReader.prepareVideoElement('my-video-id');

// --- Clean up a video element's source ---
BrowserCodeReader.cleanVideoSource(videoEl);
```

--------------------------------

### Asynchronous ES6 Module Import

Source: https://github.com/zxing-js/browser/blob/master/README.md

Import the BrowserQRCodeReader class asynchronously using dynamic import syntax for ES6 modules.

```html
<script type="module">
  import('@zxing/browser').then(({ BrowserQRCodeReader }) => {

    const codeReader = new BrowserQRCodeReader();

    // do something with codeReader...

  });
</script>
```

--------------------------------

### List Video Input Devices with BrowserCodeReader

Source: https://context7.com/zxing-js/browser/llms.txt

Enumerates all video input devices available in the browser. Useful for building device-picker UIs.

```typescript
import { BrowserCodeReader } from '@zxing/browser';

async function buildDevicePicker() {
  const devices = await BrowserCodeReader.listVideoInputDevices();

  if (devices.length === 0) {
    console.warn('No video input devices found.');
    return;
  }

  const select = document.getElementById('camera-select') as HTMLSelectElement;
  devices.forEach((device) => {
    const option = document.createElement('option');
    option.value = device.deviceId;
    option.text = device.label || `Camera ${device.deviceId.slice(0, 8)}`;
    select.appendChild(option);
  });

  // Expected output in select:
  // "Back Camera (HD)" | deviceId: "abc123..."
  // "Front Camera"     | deviceId: "def456..."
}
```

--------------------------------

### Configure BrowserCodeReader Options

Source: https://context7.com/zxing-js/browser/llms.txt

Customize scanning behavior by providing an options object to the reader constructor. Adjust delays between scans and video playback timeouts.

```typescript
import { BrowserQRCodeReader, IBrowserCodeReaderOptions } from '@zxing/browser';

const options: IBrowserCodeReaderOptions = {
  // Milliseconds to wait between successive successful decode results (default: 500)
  delayBetweenScanSuccess: 300,
  // Milliseconds to wait between decode attempts when nothing is found (default: 500)
  delayBetweenScanAttempts: 200,
  // Milliseconds to wait for the video 'canplay' event before timing out (default: 5000)
  tryPlayVideoTimeout: 10000,
};

const reader = new BrowserQRCodeReader(undefined, options);
```

--------------------------------

### Include @zxing/browser via CDN

Source: https://context7.com/zxing-js/browser/llms.txt

Include the UMD bundle of the @zxing/browser library directly in your HTML using a CDN link.

```html
<!-- UMD via CDN -->
<script src="https://unpkg.com/@zxing/browser@latest"></script>
```

--------------------------------

### Decode Once from Video Device with BrowserQRCodeReader

Source: https://context7.com/zxing-js/browser/llms.txt

Single-shot version of decodeFromVideoDevice. Resolves with the first successfully decoded Result and automatically stops the scanner. Rejects on unrecoverable errors.

```typescript
import { BrowserQRCodeReader } from '@zxing/browser';

const reader = new BrowserQRCodeReader();

try {
  const result = await reader.decodeOnceFromVideoDevice(
    undefined, // rear/environment camera
    document.getElementById('preview') as HTMLVideoElement,
  );
  console.log('QR code content:', result.getText());
  // e.g. "https://example.com"
} catch (err) {
  console.error('Failed to decode:', err);
}
```

--------------------------------

### Decode from Video Device with BrowserQRCodeReader

Source: https://context7.com/zxing-js/browser/llms.txt

Continuously scans from a specific camera device, rendering the live feed into an optional video preview element. Stops scanning after the first successful decode when ctrl.stop() is called within the callback.

```typescript
import { BrowserQRCodeReader } from '@zxing/browser';

const reader = new BrowserQRCodeReader(undefined, { delayBetweenScanAttempts: 100 });
const videoEl = document.getElementById('webcam-preview') as HTMLVideoElement;

// Pass undefined as deviceId to auto-select the rear camera
const controls = await reader.decodeFromVideoDevice(undefined, videoEl, (result, err, ctrl) => {
  if (result) {
    document.getElementById('output')!.textContent = result.getText();
    ctrl.stop(); // stop after first decode
  }
});

// Stop from outside the callback
document.getElementById('stop-btn')!.addEventListener('click', () => controls.stop());
```

--------------------------------

### Find Video Device by ID with BrowserCodeReader

Source: https://context7.com/zxing-js/browser/llms.txt

Lists all video input devices and returns the MediaDeviceInfo entry matching the supplied deviceId, or undefined if not found. Use this to select a specific camera.

```typescript
import { BrowserCodeReader } from '@zxing/browser';

const targetId = 'abc123...'; // previously stored device ID
const device = await BrowserCodeReader.findDeviceById(targetId);

if (device) {
  console.log(`Found device: ${device.label}`);
} else {
  console.warn('Device not found — it may have been disconnected.');
}
```

--------------------------------

### Decode from MediaStream with BrowserQRCodeReader

Source: https://context7.com/zxing-js/browser/llms.txt

Attaches an already-obtained MediaStream to the scanner for decoding. Useful when you acquire the stream yourself for other purposes, like recording.

```typescript
import { BrowserQRCodeReader } from '@zxing/browser';

const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
const reader = new BrowserQRCodeReader();

const controls = await reader.decodeFromStream(
  stream,
  document.getElementById('preview') as HTMLVideoElement,
  (result, error, ctrl) => {
    if (result) {
      console.log('Scanned:', result.getText());
      ctrl.stop();
    }
  },
);
```

--------------------------------

### Decode from MediaStreamConstraints with BrowserMultiFormatReader

Source: https://context7.com/zxing-js/browser/llms.txt

Continuous scan using raw MediaStreamConstraints for fine-grained control over camera resolution, frame rate, or facing mode. Requires a video element to display the feed.

```typescript
import { BrowserMultiFormatReader } from '@zxing/browser';

const reader = new BrowserMultiFormatReader();

const constraints: MediaStreamConstraints = {
  video: {
    facingMode: { ideal: 'environment' },
    width: { ideal: 1280 },
    height: { ideal: 720 },
    frameRate: { ideal: 30 },
  },
};

const controls = await reader.decodeFromConstraints(
  constraints,
  document.getElementById('preview') as HTMLVideoElement,
  (result, error) => {
    if (result) console.log('Barcode:', result.getText(), '| Format:', result.getBarcodeFormat());
  },
);
```

--------------------------------

### Include ZXing Browser via Script Tag

Source: https://github.com/zxing-js/browser/blob/master/README.md

Include the ZXing browser library directly in your HTML using a script tag from a CDN like UNPKG.

```html
<script type="text/javascript" src="https://unpkg.com/@zxing/browser@latest"></script>
```

--------------------------------

### Low-Level Continuous Scan Loop - TypeScript

Source: https://context7.com/zxing-js/browser/llms.txt

Provides a low-level, continuous scanning loop that operates directly on an HTMLVideoElement or HTMLImageElement. It drives the internal decode-on-interval mechanism used by higher-level methods and returns IScannerControls synchronously. Configuration options for scan attempt and success delays are available.

```typescript
import { BrowserQRCodeReader } from '@zxing/browser';

const reader = new BrowserQRCodeReader(undefined, {
  delayBetweenScanAttempts: 150,
  delayBetweenScanSuccess: 1000,
});

const videoEl = document.getElementById('preview') as HTMLVideoElement;

const controls = reader.scan(
  videoEl,
  (result, error, ctrl) => {
    if (result) {
      console.log('scan() result:', result.getText());
    }
  },
  () => {
    // finalizeCallback: called when scan loop ends (via stop() or fatal error)
    console.log('Scan loop finalized.');
  },
);

// Stop from a button
document.getElementById('stop')!.onclick = () => controls.stop();
```

--------------------------------

### BrowserCodeReader.decodeOnceFromVideoDevice()

Source: https://context7.com/zxing-js/browser/llms.txt

Performs a single scan from a video device. This method is a convenience wrapper around `decodeFromVideoDevice` that automatically stops the scanner after the first successful decode. It resolves with the decoded `Result` or rejects on unrecoverable errors.

```APIDOC
## BrowserCodeReader — decodeOnceFromVideoDevice()

### Description
Single-shot version of `decodeFromVideoDevice`. Resolves with the first successfully decoded `Result` and automatically stops the scanner. Rejects on unrecoverable errors (non-`NotFoundException`, non-`ChecksumException`, non-`FormatException`).

### Method
`async decodeOnceFromVideoDevice(deviceId: string | undefined, videoElement: HTMLVideoElement): Promise<Result>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { BrowserQRCodeReader } from '@zxing/browser';

const reader = new BrowserQRCodeReader();

try {
  const result = await reader.decodeOnceFromVideoDevice(
    undefined, // rear/environment camera
    document.getElementById('preview') as HTMLVideoElement,
  );
  console.log('QR code content:', result.getText());
  // e.g. "https://example.com"
} catch (err) {
  console.error('Failed to decode:', err);
}
```

### Response
#### Success Response (Promise resolves with Result)
- **Result** (object) - The decoded result containing information about the scanned barcode.

#### Response Example
(See Request Example)
```

--------------------------------

### BrowserCodeReader.findDeviceById()

Source: https://context7.com/zxing-js/browser/llms.txt

Finds a specific video input device by its ID. This static convenience method first lists all available video input devices and then returns the `MediaDeviceInfo` object that matches the provided `deviceId`. If no device matches, it returns `undefined`.

```APIDOC
## BrowserCodeReader.findDeviceById()

### Description
Static convenience method that lists all video input devices and returns the `MediaDeviceInfo` entry matching the supplied `deviceId`, or `undefined` if not found.

### Method
`static async findDeviceById(deviceId: string): Promise<MediaDeviceInfo | undefined>`

### Example
```typescript
import { BrowserCodeReader } from '@zxing/browser';

const targetId = 'abc123...'; // previously stored device ID
const device = await BrowserCodeReader.findDeviceById(targetId);

if (device) {
  console.log(`Found device: ${device.label}`);
} else {
  console.warn('Device not found — it may have been disconnected.');
}
```
```

--------------------------------

### Create LuminanceSource from Canvas with HTMLCanvasElementLuminanceSource

Source: https://context7.com/zxing-js/browser/llms.txt

Implement a LuminanceSource using an HTMLCanvasElement, useful for custom decoding pipelines or when feeding pixel data to ZXing. Supports rotation and cropping of the canvas content.

```typescript
import { HTMLCanvasElementLuminanceSource } from '@zxing/browser';
import { BinaryBitmap, HybridBinarizer } from '@zxing/library';

const canvas = document.getElementById('frame') as HTMLCanvasElement;
// Assumes canvas already has image data drawn onto it

const luminanceSource = new HTMLCanvasElementLuminanceSource(canvas);

// Rotation support — useful for tilted barcodes
if (luminanceSource.isRotateSupported()) {
  const rotated = luminanceSource.rotateCounterClockwise(); // rotate -90°
  // or rotateCounterClockwise45() for -45°
}

// Crop to region of interest
const cropped = luminanceSource.crop(50, 50, 200, 200); // left, top, width, height

// Build a BinaryBitmap and decode manually
const bitmap = new BinaryBitmap(new HybridBinarizer(luminanceSource));
// Pass `bitmap` to any ZXing Reader.decode() call
```

--------------------------------

### BrowserCodeReader.decodeFromVideoDevice()

Source: https://context7.com/zxing-js/browser/llms.txt

Continuously scans for barcodes from a specified video device. It can optionally render the live video feed to a provided `<video>` element. The method returns a Promise that resolves with `IScannerControls`, allowing control over the scanning process.

```APIDOC
## BrowserCodeReader — decodeFromVideoDevice()

### Description
Continuously scans from a specific camera device (or the environment-facing camera when `deviceId` is `undefined`), rendering the live feed into an optional `<video>` preview element. Returns `Promise<IScannerControls>`.

### Method
`async decodeFromVideoDevice(deviceId: string | undefined, videoElement: HTMLVideoElement, callback: (result: Result | null, error: Error | null, controls: IScannerControls) => void): Promise<IScannerControls>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { BrowserQRCodeReader } from '@zxing/browser';

const reader = new BrowserQRCodeReader(undefined, { delayBetweenScanAttempts: 100 });
const videoEl = document.getElementById('webcam-preview') as HTMLVideoElement;

// Pass undefined as deviceId to auto-select the rear camera
const controls = await reader.decodeFromVideoDevice(undefined, videoEl, (result, err, ctrl) => {
  if (result) {
    document.getElementById('output')!.textContent = result.getText();
    ctrl.stop(); // stop after first decode
  }
});

// Stop from outside the callback
document.getElementById('stop-btn')!.addEventListener('click', () => controls.stop());
```

### Response
#### Success Response (Promise resolves with IScannerControls)
- **IScannerControls** (object) - An object with a `stop()` method to halt the scanning process.

#### Response Example
(See Request Example for callback usage)
```

--------------------------------

### BrowserQRCodeReader

Source: https://context7.com/zxing-js/browser/llms.txt

QR-code-only reader that inherits scanning methods from BrowserCodeReader. Supports custom hints for decoding.

```APIDOC
## BrowserQRCodeReader

### Description
QR-code-only reader. Wraps `BrowserCodeReader` with `QRCodeReader` from `@zxing/library`. Inherits all scanning methods from `BrowserCodeReader`.

### Constructor
```typescript
constructor(hints?: Map<DecodeHintType, any>, options?: BrowserCodeReaderOptions)
```

### Methods

#### `decodeOnceFromVideoDevice(cameraId: string | undefined, videoElement: HTMLVideoElement): Promise<Result>`
Decodes a single QR code from a video device.

### Request Example
```typescript
import { BrowserQRCodeReader } from '@zxing/browser';
import { DecodeHintType } from '@zxing/library';

const hints = new Map<DecodeHintType, any>();
// Enable pure barcode mode for printed QR codes
hints.set(DecodeHintType.PURE_BARCODE, true);

const reader = new BrowserQRCodeReader(hints, { delayBetweenScanAttempts: 200 });

// One-shot from webcam
const result = await reader.decodeOnceFromVideoDevice(
  undefined,
  document.getElementById('preview') as HTMLVideoElement,
);
console.log('QR content:', result.getText());
// e.g. "https://github.com/zxing-js"
```
```

--------------------------------

### BrowserCodeReader.decodeFromConstraints()

Source: https://context7.com/zxing-js/browser/llms.txt

Decodes barcodes using raw `MediaStreamConstraints`. This method provides fine-grained control over camera settings like resolution, frame rate, and facing mode, making it suitable for advanced use cases where default settings are insufficient.

```APIDOC
## BrowserCodeReader — decodeFromConstraints()

### Description
Continuous scan using raw `MediaStreamConstraints`. Useful when you need fine-grained control over camera resolution, frame rate, or facing mode beyond what `decodeFromVideoDevice` offers.

### Method
`async decodeFromConstraints(constraints: MediaStreamConstraints, videoElement: HTMLVideoElement, callback: (result: Result | null, error: Error | null) => void): Promise<IScannerControls>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { BrowserMultiFormatReader } from '@zxing/browser';

const reader = new BrowserMultiFormatReader();

const constraints: MediaStreamConstraints = {
  video: {
    facingMode: { ideal: 'environment' },
    width: { ideal: 1280 },
    height: { ideal: 720 },
    frameRate: { ideal: 30 },
  },
};

const controls = await reader.decodeFromConstraints(
  constraints,
  document.getElementById('preview') as HTMLVideoElement,
  (result, error) => {
    if (result) console.log('Barcode:', result.getText(), '| Format:', result.getBarcodeFormat());
  },
);
```

### Response
#### Success Response (Promise resolves with IScannerControls)
- **IScannerControls** (object) - An object with a `stop()` method to halt the scanning process.

#### Response Example
(See Request Example)
```

--------------------------------

### BrowserCodeReader - scanOneResult()

Source: https://context7.com/zxing-js/browser/llms.txt

Wraps the scan() method in a Promise that resolves on the first successful decode and rejects on a fatal error. Allows configuration for retries on specific exceptions.

```APIDOC
## BrowserCodeReader - scanOneResult()

### Description
Wraps `scan()` in a Promise that resolves on the first successful decode and rejects on a fatal (non-retriable) error. By default retries on `NotFoundException`, `ChecksumException`, and `FormatException`.

### Method Signature
```typescript
async scanOneResult(videoElement: HTMLVideoElement, retryIfNotFound?: boolean, retryIfChecksumError?: boolean, retryIfFormatError?: boolean): Promise<Result>
```

### Parameters
- **videoElement** (HTMLVideoElement) - The video element to scan from.
- **retryIfNotFound** (boolean, optional) - Whether to retry if `NotFoundException` occurs. Defaults to `true`.
- **retryIfChecksumError** (boolean, optional) - Whether to retry if `ChecksumException` occurs. Defaults to `true`.
- **retryIfFormatError** (boolean, optional) - Whether to retry if `FormatException` occurs. Defaults to `true`.

### Request Example
```typescript
import { BrowserQRCodeReader } from '@zxing/browser';

const reader = new BrowserQRCodeReader();
const videoEl = document.getElementById('preview') as HTMLVideoElement;

// Wait for exactly one successful decode
const result = await reader.scanOneResult(
  videoEl,
  true,  // retryIfNotFound (default: true)
  true,  // retryIfChecksumError (default: true)
  true,  // retryIfFormatError (default: true)
);
console.log('First decoded result:', result.getText());
```
```

--------------------------------

### Multi-Format Scanning with BrowserMultiFormatReader

Source: https://context7.com/zxing-js/browser/llms.txt

Decodes multiple barcode formats simultaneously. Supports runtime hint mutation for changing formats without restarting the scanner.

```typescript
import { BrowserMultiFormatReader } from '@zxing/browser';
import { BarcodeFormat, DecodeHintType } from '@zxing/library';

// Restrict to QR and EAN-13 only
const hints = new Map<DecodeHintType, any>();
hints.set(DecodeHintType.POSSIBLE_FORMATS, [BarcodeFormat.QR_CODE, BarcodeFormat.EAN_13]);

const reader = new BrowserMultiFormatReader(hints, { delayBetweenScanAttempts: 300 });

const controls = await reader.decodeFromVideoDevice(
  undefined,
  document.getElementById('preview') as HTMLVideoElement,
  (result, error) => {
    if (result) {
      console.log(`Format: ${result.getBarcodeFormat()}, Text: ${result.getText()}`);
    }
  },
);

// Change accepted formats at runtime (no need to restart the scanner)
reader.setHints(new Map([[DecodeHintType.POSSIBLE_FORMATS, [BarcodeFormat.CODE_128]]]));
// or use the setter shorthand:
reader.possibleFormats = [BarcodeFormat.QR_CODE, BarcodeFormat.DATA_MATRIX];
```

--------------------------------

### IScannerControls

Source: https://context7.com/zxing-js/browser/llms.txt

Interface returned by continuous-scan methods, used to stop scanning and control camera torch and stream track constraints.

```APIDOC
## IScannerControls

### Description
Interface returned by all continuous-scan methods (`decodeFromVideoDevice`, `decodeFromStream`, `decodeFromConstraints`, `decodeFromVideoElement`, `decodeFromVideoUrl`). Used to stop the scan loop and optionally control the camera torch and stream track constraints.

### Methods
- **stop()**: Stops the scanning process.
- **switchTorch(state: boolean)**: Toggles the camera torch (experimental, Chrome on Android only).
- **streamVideoConstraintsGet(callback: (tracks: MediaStreamTrack[]) => T)**: Retrieves current video track constraints.

### Example
```typescript
import { BrowserQRCodeReader, IScannerControls } from '@zxing/browser';

const reader = new BrowserQRCodeReader();
const previewEl = document.getElementById('preview') as HTMLVideoElement;

const controls: IScannerControls = await reader.decodeFromVideoDevice(
  undefined,
  previewEl,
  (result, error, ctrl) => {
    if (result) console.log('Decoded:', result.getText());
    if (error) console.warn('Scan error:', error.message);
  },
);

// Stop scanning after 15 seconds
setTimeout(() => controls.stop(), 15_000);

// Toggle torch (experimental, Chrome on Android only)
if (controls.switchTorch) {
  await controls.switchTorch(true);   // torch ON
  await controls.switchTorch(false);  // torch OFF
}

// Inspect current video track constraints
if (controls.streamVideoConstraintsGet) {
  const constraints = controls.streamVideoConstraintsGet(
    (tracks) => tracks, // identity filter = all tracks
  );
  console.log('Current constraints:', constraints);
}
```
```

--------------------------------

### BrowserCodeReader.decodeFromStream()

Source: https://context7.com/zxing-js/browser/llms.txt

Attaches an existing `MediaStream` to the scanner for decoding. This is useful when the stream is acquired independently, perhaps for recording or other processing, and you want the library to decode frames from it without re-acquiring the stream.

```APIDOC
## BrowserCodeReader — decodeFromStream()

### Description
Attach an already-obtained `MediaStream` to the scanner. Useful when you acquire the stream yourself (e.g., for recording or combining with other processing) and want the library to decode frames from it without acquiring a new stream.

### Method
`async decodeFromStream(stream: MediaStream, videoElement: HTMLVideoElement, callback: (result: Result | null, error: Error | null, controls: IScannerControls) => void): Promise<IScannerControls>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { BrowserQRCodeReader } from '@zxing/browser';

const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
const reader = new BrowserQRCodeReader();

const controls = await reader.decodeFromStream(
  stream,
  document.getElementById('preview') as HTMLVideoElement,
  (result, error, ctrl) => {
    if (result) {
      console.log('Scanned:', result.getText());
      ctrl.stop();
    }
  },
);
```

### Response
#### Success Response (Promise resolves with IScannerControls)
- **IScannerControls** (object) - An object with a `stop()` method to halt the scanning process.

#### Response Example
(See Request Example)
```

--------------------------------

### scan

Source: https://context7.com/zxing-js/browser/llms.txt

Provides a low-level continuous scan loop that operates directly on an `HTMLVideoElement` or `HTMLImageElement`. This method drives the decode-on-interval mechanism used internally by higher-level methods and returns `IScannerControls` synchronously.

```APIDOC
## scan()

### Description
Low-level continuous scan loop operating directly on an `HTMLVideoElement` or `HTMLImageElement`. Drives the decode-on-interval mechanism used internally by all higher-level methods. Returns `IScannerControls` synchronously.

### Method
`scan(element: HTMLVideoElement | HTMLImageElement, callback: (result: Result | null, error: Error | null, controls: IScannerControls) => void, finalizeCallback?: () => void, options?: BrowserCodeReaderOptions): IScannerControls`

### Parameters
#### Path Parameters
- **element** (HTMLVideoElement | HTMLImageElement) - Required - The video or image element to scan.
- **callback** ((result: Result | null, error: Error | null, controls: IScannerControls) => void) - Required - A callback function that receives the decoding result, any error, and scanner controls.
- **finalizeCallback** (() => void) - Optional - A callback function invoked when the scan loop ends.
- **options** (BrowserCodeReaderOptions) - Optional - Configuration options for the reader, such as `delayBetweenScanAttempts` and `delayBetweenScanSuccess`.

### Response
#### Success Response (IScannerControls)
- **IScannerControls** - An object providing control over the scanning process, including a `stop()` method.

### Request Example
```typescript
import { BrowserQRCodeReader } from '@zxing/browser';

const reader = new BrowserQRCodeReader(undefined, {
  delayBetweenScanAttempts: 150,
  delayBetweenScanSuccess: 1000,
});

const videoEl = document.getElementById('preview') as HTMLVideoElement;

const controls = reader.scan(
  videoEl,
  (result, error, ctrl) => {
    if (result) {
      console.log('scan() result:', result.getText());
    }
  },
  () => {
    // finalizeCallback: called when scan loop ends (via stop() or fatal error)
    console.log('Scan loop finalized.');
  },
);

// Stop from a button
document.getElementById('stop')!.onclick = () => controls.stop();
```
```

--------------------------------

### HTMLCanvasElementLuminanceSource

Source: https://context7.com/zxing-js/browser/llms.txt

A LuminanceSource implementation that uses an HTMLCanvasElement as its backing store. This is useful for feeding pixel data into the ZXing decode pipeline or for custom decoding processes.

```APIDOC
## HTMLCanvasElementLuminanceSource

A `LuminanceSource` implementation backed by an `HTMLCanvasElement`. Used internally by `BrowserCodeReader.createBinaryBitmapFromCanvas()` to feed pixel data into the ZXing decode pipeline. Can be used directly for custom decode pipelines.

```typescript
import { HTMLCanvasElementLuminanceSource } from '@zxing/browser';
import { BinaryBitmap, HybridBinarizer } from '@zxing/library';

const canvas = document.getElementById('frame') as HTMLCanvasElement;
// Assumes canvas already has image data drawn onto it

const luminanceSource = new HTMLCanvasElementLuminanceSource(canvas);

// Rotation support — useful for tilted barcodes
if (luminanceSource.isRotateSupported()) {
  const rotated = luminanceSource.rotateCounterClockwise(); // rotate -90°
  // or rotateCounterClockwise45() for -45°
}

// Crop to region of interest
const cropped = luminanceSource.crop(50, 50, 200, 200); // left, top, width, height

// Build a BinaryBitmap and decode manually
const bitmap = new BinaryBitmap(new HybridBinarizer(luminanceSource));
// Pass `bitmap` to any ZXing Reader.decode() call
```
```

--------------------------------

### BrowserQRCodeSvgWriter

Source: https://context7.com/zxing-js/browser/llms.txt

Encodes a given string into a QR code and renders it as an SVG element. It supports writing the SVG directly into a DOM container or returning a standalone SVG element.

```APIDOC
## BrowserQRCodeSvgWriter

Encodes a string into a QR code and renders it as an SVG element. Can append the SVG directly into a DOM container via `writeToDom()`, or return a standalone `SVGSVGElement` via `write()`.

```typescript
import { BrowserQRCodeSvgWriter } from '@zxing/browser';
import { EncodeHintType } from '@zxing/library';

const writer = new BrowserQRCodeSvgWriter();

// --- Standalone SVG (not attached to DOM) ---
const hints = new Map<EncodeHintType, any>();
hints.set(EncodeHintType.ERROR_CORRECTION, 'H'); // H = ~30% recovery capacity
hints.set(EncodeHintType.MARGIN, 2);             // quiet zone: 2 modules

const svgElement: SVGSVGElement = writer.write(
  'https://github.com/zxing-js/browser',
  300, // width in pixels
  300, // height in pixels
  hints,
);
document.body.appendChild(svgElement);

// --- Write directly into a container (CSS selector or HTMLElement) ---
writer.writeToDom(
  '#qr-container',
  'Hello, @zxing/browser!',
  200,
  200,
);
// Equivalent with direct element reference:
const container = document.getElementById('qr-output')!;
writer.writeToDom(container, 'scan me', 150, 150);
```
```

--------------------------------

### Control Scanning with IScannerControls

Source: https://context7.com/zxing-js/browser/llms.txt

Manage continuous barcode scanning using the IScannerControls interface returned by scan methods. This allows stopping the scan, toggling the torch, and inspecting camera constraints.

```typescript
import { BrowserQRCodeReader, IScannerControls } from '@zxing/browser';

const reader = new BrowserQRCodeReader();
const previewEl = document.getElementById('preview') as HTMLVideoElement;

const controls: IScannerControls = await reader.decodeFromVideoDevice(
  undefined,
  previewEl,
  (result, error, ctrl) => {
    if (result) console.log('Decoded:', result.getText());
    if (error) console.warn('Scan error:', error.message);
  },
);

// Stop scanning after 15 seconds
setTimeout(() => controls.stop(), 15000);

// Toggle torch (experimental, Chrome on Android only)
if (controls.switchTorch) {
  await controls.switchTorch(true);   // torch ON
  await controls.switchTorch(false);  // torch OFF
}

// Inspect current video track constraints
if (controls.streamVideoConstraintsGet) {
  const constraints = controls.streamVideoConstraintsGet(
    (tracks) => tracks, // identity filter = all tracks
  );
  console.log('Current constraints:', constraints);
}
```

--------------------------------

### QR Code Scanning with BrowserQRCodeReader

Source: https://context7.com/zxing-js/browser/llms.txt

A QR-code-only reader that inherits from BrowserCodeReader. Useful for specific QR code decoding tasks, including enabling pure barcode mode for printed QR codes.

```typescript
import { BrowserQRCodeReader } from '@zxing/browser';
import { DecodeHintType } from '@zxing/library';

const hints = new Map<DecodeHintType, any>();
// Enable pure barcode mode for printed QR codes
hints.set(DecodeHintType.PURE_BARCODE, true);

const reader = new BrowserQRCodeReader(hints, { delayBetweenScanAttempts: 200 });

// One-shot from webcam
const result = await reader.decodeOnceFromVideoDevice(
  undefined,
  document.getElementById('preview') as HTMLVideoElement,
);
console.log('QR content:', result.getText());
// e.g. "https://github.com/zxing-js"
```

--------------------------------

### BrowserMultiFormatReader

Source: https://context7.com/zxing-js/browser/llms.txt

Decodes all supported 1D and 2D barcode formats simultaneously. Supports runtime hint mutation and format setting.

```APIDOC
## BrowserMultiFormatReader

### Description
Decodes all supported 1D and 2D barcode formats simultaneously (QR, Aztec, DataMatrix, PDF417, Code128, EAN-13, ITF, etc.). Supports runtime hint mutation via `setHints()` and the `possibleFormats` setter.

### Constructor
```typescript
constructor(hints?: Map<DecodeHintType, any>, options?: BrowserCodeReaderOptions)
```

### Methods

#### `decodeFromVideoDevice(cameraId: string | undefined, videoElement: HTMLVideoElement, callback: (result: Result | null, error: Exception | null) => void): Promise<void>`
Starts decoding from a video device and continuously calls the callback with results or errors.

#### `setHints(hints: Map<DecodeHintType, any>): void`
Sets decoding hints at runtime to change accepted formats or other decoding parameters.

#### `possibleFormats: BarcodeFormat[]` (setter)
Shorthand for setting `POSSIBLE_FORMATS` hint.

### Request Example
```typescript
import { BrowserMultiFormatReader } from '@zxing/browser';
import { BarcodeFormat, DecodeHintType } from '@zxing/library';

// Restrict to QR and EAN-13 only
const hints = new Map<DecodeHintType, any>();
hints.set(DecodeHintType.POSSIBLE_FORMATS, [BarcodeFormat.QR_CODE, BarcodeFormat.EAN_13]);

const reader = new BrowserMultiFormatReader(hints, { delayBetweenScanAttempts: 300 });

const controls = await reader.decodeFromVideoDevice(
  undefined,
  document.getElementById('preview') as HTMLVideoElement,
  (result, error) => {
    if (result) {
      console.log(`Format: ${result.getBarcodeFormat()}, Text: ${result.getText()}`);
    }
  },
);

// Change accepted formats at runtime (no need to restart the scanner)
reader.setHints(new Map([[DecodeHintType.POSSIBLE_FORMATS, [BarcodeFormat.CODE_128]]]));
// or use the setter shorthand:
reader.possibleFormats = [BarcodeFormat.QR_CODE, BarcodeFormat.DATA_MATRIX];
```
```

--------------------------------

### Scan One Result with BrowserCodeReader

Source: https://context7.com/zxing-js/browser/llms.txt

Use `scanOneResult` to wait for the first successful decode. It retries automatically on common exceptions by default.

```typescript
import { BrowserQRCodeReader } from '@zxing/browser';

const reader = new BrowserQRCodeReader();
const videoEl = document.getElementById('preview') as HTMLVideoElement;

// Wait for exactly one successful decode
const result = await reader.scanOneResult(
  videoEl,
  true,  // retryIfNotFound (default: true)
  true,  // retryIfChecksumError (default: true)
  true,  // retryIfFormatError (default: true)
);
console.log('First decoded result:', result.getText());
```

--------------------------------

### Aztec Code Scanning with BrowserAztecCodeReader

Source: https://context7.com/zxing-js/browser/llms.txt

Dedicated reader for Aztec codes with an API surface similar to BrowserQRCodeReader. Supports decoding from image URLs and continuous webcam scanning.

```typescript
import { BrowserAztecCodeReader } from '@zxing/browser';

const reader = new BrowserAztecCodeReader();

const result = await reader.decodeFromImageUrl('https://example.com/aztec.png');
console.log('Aztec content:', result.getText());

// Continuous webcam scan
const controls = await reader.decodeFromVideoDevice(
  undefined,
  document.getElementById('preview') as HTMLVideoElement,
  (result, err) => {
    if (result) console.log('Aztec decoded:', result.getText());
  },
);
```

--------------------------------

### Decode PDF417 Barcodes with BrowserPDF417Reader

Source: https://context7.com/zxing-js/browser/llms.txt

Utilize BrowserPDF417Reader for decoding PDF417 barcodes from video devices. The preview element must be present in the DOM. The callback function handles results or errors and provides control to stop the reader.

```typescript
import { BrowserPDF417Reader } from '@zxing/browser';

const reader = new BrowserPDF417Reader();

const controls = await reader.decodeFromVideoDevice(
  undefined,
  document.getElementById('preview') as HTMLVideoElement,
  (result, error, ctrl) => {
    if (result) {
      console.log('PDF417 data:', result.getText());
      ctrl.stop();
    }
  },
);
```

--------------------------------

### decodeFromImageUrl

Source: https://context7.com/zxing-js/browser/llms.txt

Decodes a barcode from a remote image URL. It creates a temporary `<img>` element, loads the image, decodes it, and then destroys the element. Returns a Promise that resolves with the decoding Result.

```APIDOC
## decodeFromImageUrl()

### Description
Decodes a barcode from a remote image URL. Creates a temporary `<img>` element internally, loads the image, decodes it, then destroys the element. Returns `Promise<Result>`.

### Method
`decodeFromImageUrl(imageUrl: string): Promise<Result>`

### Parameters
#### Path Parameters
- **imageUrl** (string) - Required - The URL of the image to decode.

### Response
#### Success Response (Promise<Result>)
- **Result** - An object containing the decoded text and other barcode information.

### Request Example
```typescript
import { BrowserQRCodeReader } from '@zxing/browser';

const reader = new BrowserQRCodeReader();

try {
  const result = await reader.decodeFromImageUrl('https://example.com/qr-code.png');
  console.log('Decoded text:', result.getText());
} catch (err) {
  console.error('Could not decode image:', err);
}
```
```

--------------------------------

### BrowserAztecCodeReader

Source: https://context7.com/zxing-js/browser/llms.txt

Decodes Aztec codes in the browser with an API surface similar to BrowserQRCodeReader.

```APIDOC
## BrowserAztecCodeReader

### Description
Decodes Aztec codes in the browser. Same API surface as `BrowserQRCodeReader`.

### Constructor
```typescript
constructor(hints?: Map<DecodeHintType, any>, options?: BrowserCodeReaderOptions)
```

### Methods

#### `decodeFromImageUrl(imageUrl: string): Promise<Result>`
Decodes an Aztec code from a given image URL.

#### `decodeFromVideoDevice(cameraId: string | undefined, videoElement: HTMLVideoElement, callback: (result: Result | null, error: Exception | null) => void): Promise<void>`
Starts continuous decoding of Aztec codes from a video device.

### Request Example
```typescript
import { BrowserAztecCodeReader } from '@zxing/browser';

const reader = new BrowserAztecCodeReader();

const result = await reader.decodeFromImageUrl('https://example.com/aztec.png');
console.log('Aztec content:', result.getText());

// Continuous webcam scan
const controls = await reader.decodeFromVideoDevice(
  undefined,
  document.getElementById('preview') as HTMLVideoElement,
  (result, err) => {
    if (result) console.log('Aztec decoded:', result.getText());
  },
);
```
```