Html5 Qrcode

https://scanapp.org/html5-qrcode-docs/docs/
Admin
Html5 Qrcode is a JavaScript library for scanning QR codes and barcodes using a device's camera or...
Tokens:10,148
Snippets:64
Trust Score:7.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Installation

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Instructions on how to install the html5-qrcode library using npm or by including the minified Javascript file directly.

```APIDOC
## Installation

### Install using npm
```
npm install --save-dev html5-qrcode
```

### Include minified Javascript directly
```html
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
```

**Note:** If installed via npm but not using a module loader, the minified script can be found at `node_modules/html5-qrcode/html5-qrcode.min.js`.
```

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

### Install html5-qrcode using npm

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Installs the html5-qrcode library as a development dependency in your project using npm. This is the recommended method for projects using module bundlers or Node.js.

```bash
npm install --save-dev html5-qrcode
```

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

### Setup HTML Container

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

How to set up the necessary HTML container element for the QR code scanner UI.

```APIDOC
## Setup a target HTML container

Implement an `HTML` container element, like a `<div>`, where the QR scanning UI will be rendered.

```html
<div id="reader" width="600px"></div>
```

**Recommendation:** Avoid setting a fixed height for the container, as it should adapt to the video feed's aspect ratio. The library will respect the provided width or use a default.
```

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

### Pro Mode Scanner - Start Scanning

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Use `Html5Qrcode` for custom UI implementation, allowing direct control over camera access and scanning.

```APIDOC
## Start scanner using Javascript - Pro Mode

`Html5Qrcode` allows for custom UI implementation and fine-grained control over the scanning process.

### Fetching Available Cameras
This static method retrieves a list of available cameras. It will trigger a user permission request if not already granted.

```javascript
// This method will trigger user permissions
Html5Qrcode.getCameras().then(devices => {
  /**
   * devices would be an array of objects of type:
   * { id: "id", label: "label" }
   */
  if (devices && devices.length) {
    var cameraId = devices[0].id;
    // Use this cameraId to start scanning.
    console.log(`Using camera with id: ${cameraId}`);
  }
}).catch(err => {
  // handle err
  console.error("Error getting cameras:", err);
});
```

**Important Security Notes:**
- Direct camera access requires user consent and must be served over a secure origin (HTTPS).
- Requesting camera access on page load can lead to user rejection; consider user-initiated requests.
```

```APIDOC
### Starting the Scanner with a Camera
Once you have a `cameraId`, you can start the scanner using the `Html5Qrcode#start` method.

```javascript
// Initialize Html5Qrcode with the element ID and optional verbose logging
const html5QrCode = new Html5Qrcode("reader", /* verbose= */ false);

// Start scanning
html5QrCode.start(
  cameraId, // The camera ID obtained from getCameras()
  { // Optional configuration object
    fps: 10,              // Frames per second for scanning
    qrbox: { width: 250, height: 250 } // Optional bounding box UI
  },
  (decodedText, decodedResult) => { // Success callback
    console.log(`Scan successful: ${decodedText}`, decodedResult);
    // Do something when a code is read
  },
  (errorMessage) => { // Failure callback
    // Parse error, usually better to ignore it.
    console.warn(`Scan error: ${errorMessage}`);
  })
.catch((err) => { // Error handling for start() method
  // Start failed, handle it.
  console.error("Html5Qrcode.start failed:", err);
});
```

You can optionally enable verbose logging by passing `true` as the second argument to the `Html5Qrcode` constructor:

```javascript
const html5QrCode = new Html5Qrcode("reader", /* verbose= */ true);
```
```

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

### Easy Mode: Start html5-qrcode Scanner with UI

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Initializes and renders the Html5QrcodeScanner in 'easy mode'. This provides a complete user interface for scanning QR codes using the device's camera or by uploading an image file. It requires a target HTML element ID and optional configuration for frames per second (fps) and the scanning area size (qrbox).

```javascript
function onScanSuccess(decodedText, decodedResult) {
  // handle the scanned code as you like, for example:
  console.log(`Code matched = ${decodedText}`, decodedResult);
}

function onScanFailure(error) {
  // handle scan failure, usually better to ignore and keep scanning.
  // for example:
  console.warn(`Code scan error = ${error}`);
}

let html5QrcodeScanner = new Html5QrcodeScanner(
  "reader",
  { fps: 10, qrbox: {width: 250, height: 250} },
  /* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);
```

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

### Easy Mode Scanner

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Implement an end-to-end QR code scanner with a default user interface using `Html5QrcodeScanner`.

```APIDOC
## Start scanner using Javascript - Easy Mode

`Html5QrcodeScanner` provides a convenient way to implement a scanner with a built-in UI for camera or file-based scanning.

### Configuration and Rendering
```javascript
function onScanSuccess(decodedText, decodedResult) {
  // Handle the scanned code
  console.log(`Code matched = ${decodedText}`, decodedResult);
}

function onScanFailure(error) {
  // Handle scan failure, often best to ignore and continue scanning
  console.warn(`Code scan error = ${error}`);
}

// Initialize the scanner
let html5QrcodeScanner = new Html5QrcodeScanner(
  "reader", // Element ID
  { fps: 10, qrbox: {width: 250, height: 250} }, // Configuration object
  /* verbose= */ false // Set to true for verbose logging
);

// Render the scanner UI
html5QrcodeScanner.render(onScanSuccess, onScanFailure);
```
```

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

### Include html5-qrcode Javascript Directly

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Includes the minified html5-qrcode Javascript file directly into your HTML using a script tag. This method is suitable for projects not using module loaders.

```html
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
```

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

### Setup Target HTML Container for QR Scanner

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Defines an HTML container element, typically a div, where the QR code scanning UI will be rendered by the html5-qrcode library. The width can be specified, but the height should ideally be omitted to allow the library to adjust based on the video feed.

```html
<div id="reader" width="600px"></div>
```

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

### Start Camera Scanning (start)

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Initiates QR code scanning using the device's camera. It takes camera identifiers and callback functions for success and error events.

```APIDOC
## POST /start

### Description
Starts scanning QR codes or barcodes using the device's camera. Requires camera permissions and provides callbacks for successful scans and errors.

### Method
POST

### Endpoint
/start

### Parameters
#### Request Body
- **cameraIdOrConfig** (string | MediaTrackConstraints) - Required - The camera ID or a `MediaTrackConstraints` object to specify camera properties.
- **configuration** (Html5QrcodeCameraScanConfig) - Optional - Extra configurations to tune the code scanner.
- **qrCodeSuccessCallback** (QrcodeSuccessCallback) - Required - Callback function invoked when a QR code or barcode is found.
- **qrCodeErrorCallback** (QrcodeErrorCallback) - Required - Callback function invoked when no QR code or barcode is found.

### Request Example
```json
{
  "cameraIdOrConfig": "defaultCameraId",
  "configuration": {
    "fps": 30
  },
  "qrCodeSuccessCallback": "(decodedText, decodedResult) => console.log(decodedText)",
  "qrCodeErrorCallback": "(errorMessage) => console.error(errorMessage)"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates that the scanning has started successfully.

#### Error Response (400)
- **errorMessage** (string) - Describes the error that occurred (e.g., permission denied, API not supported).

#### Response Example (Success)
```json
{
  "status": "Scanning started"
}
```
```

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

### Start QR Code Scanning with Facing Mode - JavaScript

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Initiates QR code scanning using the Html5Qrcode library. It allows specifying camera facing modes ('user' for front, 'environment' for back) as alternatives to exact camera IDs. Configuration options like FPS and QR box size can be passed. This method is useful for mobile devices where users might want to choose between front and back cameras.

```javascript
const html5QrCode = new Html5Qrcode("reader"); 
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
    /* handle success */
};
const config = { fps: 10, qrbox: { width: 250, height: 250 } };

// If you want to prefer front camera
html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);

// If you want to prefer back camera
html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);

// Select front camera or fail with `OverconstrainedError`.
html5QrCode.start({ facingMode: { exact: "user"} }, config, qrCodeSuccessCallback);

// Select back camera or fail with `OverconstrainedError`.
html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);
```

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

### Pro Mode: Start QR Code Scanning with Custom UI

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Initiates QR code scanning using the Html5Qrcode class, designed for custom user interfaces. It requires the ID of the HTML container, the camera ID obtained from getCameras(), and optional configuration for scanning parameters like fps and qrbox. Success and failure callback functions are provided to handle decoded data and errors.

```javascript
const html5QrCode = new Html5Qrcode(/* element id */ "reader");
html5QrCode.start(
  cameraId,
  {
    fps: 10,    // Optional, frame per seconds for qr code scanning
    qrbox: { width: 250, height: 250 }  // Optional, if you want bounded box UI
  },
  (decodedText, decodedResult) => {
    // do something when code is read
  },
  (errorMessage) => {
    // parse error, ignore it.
  })
.catch((err) => {
  // Start failed, handle it.
});
```

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

### Pro Mode: Get Camera List for Scanning

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Asynchronously retrieves a list of available camera devices using the static Html5Qrcode.getCameras() method. This is a prerequisite for starting the scanner in 'pro mode' when you want to implement a custom user interface. It returns a Promise that resolves with an array of camera objects, each containing an 'id' and 'label'.

```javascript
// This method will trigger user permissions
Html5Qrcode.getCameras().then(devices => {
  /**
   * devices would be an array of objects of type:
   * { id: "id", label: "label" }
   */
  if (devices && devices.length) {
    var cameraId = devices[0].id;
    // .. use this to start scanning.
  }
}).catch(err => {
  // handle err
});
```

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

### Import html5-qrcode Classes with Module Loaders

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Imports specific classes from the html5-qrcode library when using module loaders like Webpack or Rollup, or when working with TypeScript. Allows for selective inclusion of library features.

```javascript
// To use Html5QrcodeScanner (more info below)
import {Html5QrcodeScanner} from "html5-qrcode";

// To use Html5Qrcode (more info below)
import {Html5Qrcode} from "html5-qrcode";
```

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

### Pro Mode: Enable Verbose Logging for Html5Qrcode

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Initializes the Html5Qrcode class with verbose logging enabled. When verbose mode is true, the library will output detailed logs to the browser's console, which can be helpful for debugging scanning issues.

```javascript
const html5QrCode = new Html5Qrcode("reader", /* verbose= */ true);
```

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

### Start Camera QR Code Scanning (start)

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Initiates QR code scanning from a specified camera. It accepts camera identifiers or configuration, along with optional scanning parameters and callbacks for successful scans and errors. The returned promise may fail due to permission issues or unsupported browser APIs.

```typescript
start(cameraIdOrConfig: string | MediaTrackConstraints, configuration?: Html5QrcodeCameraScanConfig, qrCodeSuccessCallback?: QrcodeSuccessCallback, qrCodeErrorCallback?: QrcodeErrorCallback): Promise<null>
```

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

### HTML Structure for QR Code Scanning - HTML

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Defines the basic HTML structure required for the html5-qrcode library to function. It includes a `div` element with an ID (e.g., 'reader') to act as the viewfinder for the camera feed, and a script tag to include the html5-qrcode JavaScript library. Optional width and height attributes can be set for the container.

```html
<div id="reader" width="600px" height="600px"></div>
<script src="./dist/html5-qrcode.js"></script>
```

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

### Html5Qrcode: Start Camera Scan

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Starts the camera-based QR code scanning process. This method requires the ID of the HTML element to render the scanner UI and configuration options. It returns a Promise that resolves upon successful start or rejects if an error occurs, such as failure to access the camera or invalid configuration. Callers should handle potential errors related to camera permissions and device availability.

```typescript
start(elementId: string, config?: Html5QrcodeFullConfig): Promise<void>
```

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

### File Input for QR Code Scanning - HTML

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Provides HTML input elements for selecting image files to scan QR codes. It includes a standard file input and an alternative using the 'capture' attribute, which is intended for smartphone cameras to allow direct capture. This enables file-based QR code scanning functionality.

```html
<input type="file" id="qr-input-file" accept="image/*">
<!-- 
  Or add captured if you only want to enable smartphone camera, PC browsers will ignore it.
-->

<input type="file" id="qr-input-file" accept="image/*" capture>
```

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

### Get Available Cameras (getCameras)

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Retrieves a list of all camera devices supported by the user's device.

```APIDOC
## GET /getCameras

### Description
Retrieves a list of all available camera devices on the user's system.

### Method
GET

### Endpoint
/getCameras

### Parameters
None

### Response
#### Success Response (200)
- **cameras** (Array<CameraDevice>) - An array of objects, where each object represents a camera device.
  - **id** (string) - The unique identifier for the camera.
  - **label** (string) - A user-friendly label for the camera (e.g., "Back Camera", "Front Camera").

#### Response Example
```json
{
  "cameras": [
    {
      "id": "camera1-abcdef12345",
      "label": "Built-in FaceTime Camera"
    },
    {
      "id": "camera2-ghijkl67890",
      "label": "External USB Webcam"
    }
  ]
}
```
```

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

### File-Based QR Code Scanning - JavaScript

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Handles QR code scanning from a selected image file using the Html5Qrcode library. It attaches an event listener to a file input element. When a file is selected, it calls the `scanFile` method, which processes the image and returns the decoded text. Error handling is included for failed scans. Note that this method currently only returns the decoded text, with a beta API offering more details.

```javascript
const html5QrCode = new Html5Qrcode(/* element id */ "reader");
// File based scanning
const fileinput = document.getElementById('qr-input-file');
fileinput.addEventListener('change', e => {
  if (e.target.files.length == 0) {
    // No file selected, ignore 
    return;
  }
  
  const imageFile = e.target.files[0];
  // Scan QR Code
  html5QrCode.scanFile(imageFile, true)
  .then(decodedText => {
    // success, use decodedText
    console.log(decodedText);
  })
  .catch(err => {
    // failure, handle it.
    console.log(`Error scanning file. Reason: ${err}`)
  });
});
```

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

### Get Available Cameras (getCameras)

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Retrieves a list of all camera devices available on the user's system. This static method returns a promise that resolves with an array of `CameraDevice` objects.

```typescript
static getCameras(): Promise<CameraDevice[]>
```

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

### Html5QrcodeScanner Methods

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5QrcodeScanner

This section details the various methods available for controlling and interacting with the Html5QrcodeScanner, including applying video constraints, clearing the scanner, getting track capabilities and settings, managing scan state, pausing, rendering, and resuming the scan.

```APIDOC
## Html5QrcodeScanner Methods

### applyVideoConstraints

#### Description
Applies video constraints to the running video track from the camera. This method should only be called if the scanner state is SCANNING or PAUSED.

#### Method
`applyVideoConstraints`

#### Endpoint
N/A

#### Parameters
- **videoConstaints** (MediaTrackConstraints) - Required - The video constraints to apply.

#### Returns
`Promise<void>` - A Promise which succeeds if the passed constraints are applied, fails otherwise.

#### Throws
Error if the scanning is not in the running state.

#### Defined in
`html5-qrcode-scanner.ts:428`

### clear

#### Description
Removes the QR Code scanner UI and cleans up resources.

#### Method
`clear`

#### Endpoint
N/A

#### Returns
`Promise<void>` - Promise which succeeds if the cleanup is complete successfully, fails otherwise.

#### Defined in
`html5-qrcode-scanner.ts:335`

### getRunningTrackCapabilities

#### Description
Returns the capabilities of the running video track. Note: Should only be called if the scanner state is SCANNING or PAUSED.

#### Method
`getRunningTrackCapabilities`

#### Endpoint
N/A

#### Returns
`MediaTrackCapabilities` - The capabilities of a running video track.

#### Throws
Error if the scanning is not in the running state.

#### Defined in
`html5-qrcode-scanner.ts:393`

### getRunningTrackSettings

#### Description
Returns the object containing the current values of each constrainable property of the running video track. Note: Should only be called if the scanner state is SCANNING or PAUSED.

#### Method
`getRunningTrackSettings`

#### Endpoint
N/A

#### Returns
`MediaTrackSettings` - The supported settings of the running video track.

#### Throws
Error if the scanning is not in the running state.

#### Defined in
`html5-qrcode-scanner.ts:410`

### getState

#### Description
Gets the current state of the camera scan.

#### Method
`getState`

#### Endpoint
N/A

#### Returns
`Html5QrcodeScannerState` - The current state of the scanner.

#### Defined in
`html5-qrcode-scanner.ts:325`

### pause

#### Description
Pauses the ongoing scan. This method should only be called if a camera scan is ongoing.

#### Method
`pause`

#### Endpoint
N/A

#### Parameters
- **shouldPauseVideo** (boolean) - Optional (default = false) - If true, the video track will also be paused.

#### Returns
`void`

#### Throws
Error if the method is called when the scanner is not in the scanning state.

#### Defined in
`html5-qrcode-scanner.ts:294`

### render

#### Description
Renders the User Interface for the QR code scanner.

#### Method
`render`

#### Endpoint
N/A

#### Parameters
- **qrCodeSuccessCallback** (QrcodeSuccessCallback) - Required - Callback function called when a QR code or supported barcode is found.
- **qrCodeErrorCallback** (QrcodeErrorCallback) - Optional - Callback function called when no QR code or supported barcode is found.

#### Returns
`void`

#### Defined in
`html5-qrcode-scanner.ts:241`

### resume

#### Description
Resumes a previously paused scan. If the video was paused, it will also resume. This method should only be called if the camera scan is ongoing and was previously paused.

#### Method
`resume`

#### Endpoint
N/A

#### Returns
`void`

#### Throws
Error if the method is called when the scanner is not in the paused state.

#### Defined in
`html5-qrcode-scanner.ts:316`
```

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

### Stop QR Code Scanning - JavaScript

Source: https://scanapp.org/html5-qrcode-docs/docs/intro

Stops the ongoing QR code scanning process initiated by the Html5Qrcode library. This method safely tears down the video feed and camera objects. It returns a Promise that resolves when the scanning is stopped successfully or rejects if the stop operation fails. It's crucial to call this method to release camera resources when scanning is no longer needed.

```javascript
html5QrCode.stop().then((ignore) => {
  // QR Code scanning is stopped.
}).catch((err) => {
  // Stop failed, handle it.
});
```

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

### Html5Qrcode: Get Cameras

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Retrieves a list of available cameras on the device that can be used for scanning. This method is asynchronous and returns a Promise that resolves with an array of objects, each representing a camera with its unique ID and label. This information is essential for allowing users to select a specific camera if multiple are available.

```typescript
getCameras(): Promise<Array<{ id: string; label: string }>>
```

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

### Stop Camera Scanning (stop)

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Stops the video stream and QR code scanning process initiated by the `start` method.

```APIDOC
## POST /stop

### Description
Stops the ongoing QR code video stream and scanning process.

### Method
POST

### Endpoint
/stop

### Parameters
None

### Response
#### Success Response (200)
- **message** (string) - Confirmation that the video stream has been safely closed.

#### Response Example
```json
{
  "message": "Video stream closed successfully."
}
```
```

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

### Get Running Track Settings of Html5QrcodeScanner

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5QrcodeScanner

Returns the current values of the constrainable properties for the running video track. This method should be called when the scanner is in a 'SCANNING' or 'PAUSED' state and returns MediaTrackSettings.

```typescript
getRunningTrackSettings(): MediaTrackSettings
```

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

### Get Torch Capability - TypeScript

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/interfaces/CameraCapabilities

Retrieves the torch capability of the camera. This method returns a BooleanCameraCapability indicating if the torch feature is available. Defined in camera/core.ts.

```typescript
torchFeature(): BooleanCameraCapability
```

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

### Get Zoom Capability - TypeScript

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/interfaces/CameraCapabilities

Retrieves the zoom capability of the camera. This method returns a RangeCameraCapability indicating the zoom range supported by the camera. Defined in camera/core.ts.

```typescript
zoomFeature(): RangeCameraCapability
```

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

### Get State of Html5QrcodeScanner

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5QrcodeScanner

Retrieves the current state of the camera scan. The state is returned as an Html5QrcodeScannerState enum value.

```typescript
getState(): Html5QrcodeScannerState
```

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

### Get Running Track Capabilities of Html5QrcodeScanner

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5QrcodeScanner

Retrieves the capabilities of the currently running video track. This method is intended for use when the scanner is in a 'SCANNING' or 'PAUSED' state and returns MediaTrackCapabilities.

```typescript
getRunningTrackCapabilities(): MediaTrackCapabilities
```

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

### Html5Qrcode: Get Running Track Camera Capabilities

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Retrieves the CameraCapabilities of the currently running video track. This method should only be called when scanning is in progress. It returns a CameraCapabilities object representing the capabilities of the active camera. An error is thrown if the scanner is not in a running state.

```typescript
getRunningTrackCameraCapabilities(): CameraCapabilities
```

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

### Set QR Code Scanning Frame Rate

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/interfaces/Html5QrcodeCameraScanConfig

Defines the expected frame rate for QR code scanning. For example, `{ fps: 2 }` indicates that scanning will occur every 500 milliseconds.

```typescript
/**
 * Optional, Expected framerate of qr code scanning. example `{ fps: 2 }` means the scanning would be done every `500 ms`.
 */
fps?: undefined | number;
```

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

### Html5QrcodeScannerState Enumeration Members (TypeScript)

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/enums/Html5QrcodeScannerState

Defines the possible states of the Html5QrcodeScanner. Each member represents a distinct status of the scanner, such as not being started, being paused, actively scanning, or in an unknown state. These states are crucial for managing the scanner's lifecycle and behavior.

```typescript
enum Html5QrcodeScannerState {
    UNKNOWN = 0,
    NOT_STARTED = 1,
    SCANNING = 2,
    PAUSED = 3
}
```

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

### Html5Qrcode Constructor

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Initializes the Html5Qrcode scanner with a specified HTML element and configuration.

```APIDOC
## new Html5Qrcode(elementId, configOrVerbosityFlag?)

### Description
Initialize the code scanner.

### Method
Constructor

### Parameters
#### Path Parameters
- **elementId** (string) - Required - Id of the HTML element.
- **configOrVerbosityFlag?** (boolean | Html5QrcodeFullConfig) - Optional - Configuration object or a boolean verbosity flag. Defaults to default values if not passed. Boolean flag is deprecated.

### Defined in
html5-qrcode.ts:313
```

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

### Instantiate Html5QrcodeScanner

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5QrcodeScanner

Creates an instance of the Html5QrcodeScanner class. Requires an HTML element ID and optional configuration and verbose logging settings.

```typescript
new Html5QrcodeScanner(elementId, config, verbose)
```

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

### Html5QrcodeScanner Constructor

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5QrcodeScanner

Initializes a new instance of the Html5QrcodeScanner class. This constructor is used to set up the QR scanner with the specified HTML element ID, configuration, and verbosity.

```APIDOC
## new Html5QrcodeScanner

### Description
Creates an instance of the Html5QrcodeScanner class.

### Method
`new`

### Endpoint
N/A (Constructor)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **elementId** (string) - Required - Id of the HTML element where the scanner UI will be rendered.
- **config** (Html5QrcodeScannerConfig | undefined) - Optional - Extra configurations to tune the code scanner.
- **verbose** (boolean | undefined) - Optional - If true, all logs will be printed to the console.

### Request Example
```javascript
const html5qrcode = new Html5QrcodeScanner('reader', { fps: 10, qrbox: { width: 250, height: 250 } }, true);
```

### Response
#### Success Response (200)
N/A (Constructor)

#### Response Example
N/A (Constructor)
```

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

### Html5Qrcode Methods

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Provides a collection of methods for controlling and querying the Html5Qrcode scanner's state and functionality.

```APIDOC
## applyVideoConstraints(videoConstraints)

### Description
Apply a video constraints on running video track from camera.
Important:
  1. Must be called only if the camera based scanning is in progress.
  2. Changing aspectRatio while scanner is running is not yet supported.

### Method
`applyVideoConstraints`

### Endpoint
N/A (Class Method)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
- **Promise<void>** - A Promise which succeeds if the passed constraints are applied, fails otherwise.

#### Response Example
N/A

### Throws
Error if the scanning is not in the running state.

### Defined in
html5-qrcode.ts:829
```

```APIDOC
## clear()

### Description
Clears the existing canvas.
Note: in case of ongoing web cam based scan, it needs to be explicitly closed before calling this method, else it will throw exception.

### Method
`clear`

### Endpoint
N/A (Class Method)

### Parameters
N/A

### Returns
`void`

### Defined in
html5-qrcode.ts:758
```

```APIDOC
## getRunningTrackCameraCapabilities()

### Description
Returns CameraCapabilities of the running video track.
TODO(minhazav): Document this API, currently hidden.

### Method
`getRunningTrackCameraCapabilities`

### Endpoint
N/A (Class Method)

### Parameters
N/A

### Returns
`CameraCapabilities` - Capabilities of the running camera.

### Throws
Error if the scanning is not in the running state.

### Defined in
html5-qrcode.ts:811
```

```APIDOC
## getRunningTrackCapabilities()

### Description
Returns the capabilities of the running video track. Read more: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getConstraints
Important:
  1. Must be called only if the camera based scanning is in progress.

### Method
`getRunningTrackCapabilities`

### Endpoint
N/A (Class Method)

### Parameters
N/A

### Returns
`MediaTrackCapabilities` - Capabilities of the running camera.

### Throws
Error if the scanning is not in the running state.

### Defined in
html5-qrcode.ts:782
```

```APIDOC
## getRunningTrackSettings()

### Description
Returns the object containing the current values of each constrainable property of the running video track. Read more: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getSettings
Important:
  1. Must be called only if the camera based scanning is in progress.

### Method
`getRunningTrackSettings`

### Endpoint
N/A (Class Method)

### Parameters
N/A

### Returns
`MediaTrackSettings` - Settings of the running media track.

### Throws
Error if the scanning is not in the running state.

### Defined in
html5-qrcode.ts:799
```

```APIDOC
## getState()

### Description
Gets state of the camera scan.

### Method
`getState`

### Endpoint
N/A (Class Method)

### Parameters
N/A

### Returns
`Html5QrcodeScannerState` - State of type ScannerState.

### Defined in
html5-qrcode.ts:539
```

```APIDOC
## pause(shouldPauseVideo?)

### Description
Pauses the ongoing scan.

### Method
`pause`

### Endpoint
N/A (Class Method)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **shouldPauseVideo?** (boolean) - Optional (default = false) - If true the video will be paused.

### Returns
`void`

### Throws
Error if method is called when scanner is not in scanning state.

### Defined in
html5-qrcode.ts:480
```

```APIDOC
## resume()

### Description
Resumes the paused scan. If the video was previously paused by setting `shouldPauseVideo` to `true`, calling this method will resume the video. Caller will start getting results in success and error callbacks.

### Method
`resume`

### Endpoint
N/A (Class Method)

### Parameters
N/A

### Returns
`void`

### Throws
Error if method is called when scanner is not in paused state.

### Defined in
html5-qrcode.ts:508
```

```APIDOC
## scanFile(imageFile, showImage?)

### Description
Scans an Image File for QR Code. This feature is mutually exclusive to camera-based scanning, you should call stop() if the camera-based scanning was ongoing.

### Method
`scanFile`

### Endpoint
N/A (Class Method)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **imageFile** (File) - Required - The image file to scan.
- **showImage?** (boolean) - Optional - Whether to display the image during scanning.

### Returns
`Promise<string>` - A promise that resolves with the QR code data if found.

### Defined in
html5-qrcode.ts:556
```

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

### Html5Qrcode: Scan File V2

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

An advanced version of the `scanFile` method, likely offering more control or returning richer data. Similar to `scanFile`, it's mutually exclusive with camera-based scanning and requires stopping the camera first if active. The exact return type and parameters beyond the image file are not detailed here but are expected to provide enhanced file scanning capabilities.

```typescript
scanFileV2(imageFile: File, ...): Promise<any>
```

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

### Initialize Html5Qrcode Scanner

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Initializes the Html5Qrcode scanner. It takes the ID of the HTML element where the scanner UI will be rendered and an optional configuration object or verbosity flag. The configuration allows for detailed customization of the scanner's behavior. Use of the boolean verbosity flag is deprecated.

```typescript
new Html5Qrcode(elementId, configOrVerbosityFlag?)
```

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

### Scan QR Code from Image File (scanFileV2)

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

An updated method for scanning QR codes from an image file, returning a `Promise<Html5QrcodeResult>`. This method is intended as a replacement for `scanFile` and is currently in development. It's important to call `stop()` if camera-based scanning was active before using this method.

```typescript
scanFileV2(imageFile: File, showImage?: boolean): Promise<Html5QrcodeResult>
```

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

### Apply Video Constraints to Html5QrcodeScanner

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5QrcodeScanner

Applies video constraints to the running video track of the camera. This method should only be called when the scanner is in a 'SCANNING' or 'PAUSED' state. It returns a Promise that resolves upon successful application of constraints.

```typescript
applyVideoConstraints(videoConstaints: MediaTrackConstraints): Promise<void>
```

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

### Render Html5QrcodeScanner UI

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5QrcodeScanner

Renders the user interface for the QR Code scanner. This method requires success and optional error callback functions to handle scan results.

```typescript
render(qrCodeSuccessCallback: QrcodeSuccessCallback, qrCodeErrorCallback?: QrcodeErrorCallback): void
```

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

### Html5QrcodeCameraScanConfig Properties

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/interfaces/Html5QrcodeCameraScanConfig

This section details the configurable properties for the Html5QrcodeCameraScanConfig, which allows customization of camera scanning behavior.

```APIDOC
## Html5QrcodeCameraScanConfig

### Description
Configuration type for scanning QR code with camera.

### Properties

#### aspectRatio
- **aspectRatio** (number) - Optional - Desired aspect ratio for the video feed. Ideal aspect ratios are 4:3 or 16:9. Passing a very wrong aspect ratio could lead to the video feed not showing up.

#### disableFlip
- **disableFlip** (boolean) - Optional - If `true`, flipped QR Codes won't be scanned. Only use this if you are sure the camera cannot give a mirrored feed and you are facing performance constraints.

#### fps
- **fps** (number) - Optional - Expected framerate of QR code scanning. Example: `{ fps: 2 }` means the scanning would be done every `500 ms`.

#### qrbox
- **qrbox** (number | object | function) - Optional - Edge size, dimension, or calculator function for the QR scanning box. The value or computed value should be smaller than the width and height of the full region. This would make the scanner look like a shaded region within the video feed. An instance of `QrDimensions` can be passed to construct a non-square rendering of the scanner box. You can also pass a function of type `QrDimensionFunction` that takes the width and height of the video stream and returns QR box size of type `QrDimensions`. If this value is not set, no shaded QR box will be rendered, and the scanner will scan the entire area of the video stream.

#### videoConstraints
- **videoConstraints** (object) - Optional - @beta. This config is not well supported yet. When passed, this will override other parameters like 'cameraIdOrConfig' or configurations like 'aspectRatio'. 'videoConstraints' should be of type `MediaTrackConstraints` as defined in [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) and is used to specify a variety of video or camera controls like: `aspectRatio`, `facingMode`, `frameRate`, etc.
```

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

### Scan QR Code from Image File (scanFile)

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

This method scans a provided image file for QR codes. It returns a promise that resolves with the decoded QR code string on success or an error message on failure.

```APIDOC
## POST /scanFile

### Description
Scans a local image file for QR codes and returns the decoded string or an error message.

### Method
POST

### Endpoint
/scanFile

### Parameters
#### Request Body
- **imageFile** (File) - Required - A local file with image content.
- **showImage** (boolean) - Optional - If true, the image will be rendered on the given element.

### Request Example
```json
{
  "imageFile": "<binary data>",
  "showImage": true
}
```

### Response
#### Success Response (200)
- **qrCodeString** (string) - The decoded QR code string.

#### Error Response (400)
- **errorMessage** (string) - A message indicating why the QR code could not be decoded or the image could not be loaded.

#### Response Example (Success)
```json
{
  "qrCodeString": "https://example.com"
}
```

#### Response Example (Failure)
```json
{
  "errorMessage": "QR Code decode failed: not enough patterns found in image."
}
```
```

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

### Scan QR Code from Image File (scanFileV2)

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

An updated method to scan an image file for QR codes, returning an Html5QrcodeResult object. This is a work-in-progress feature.

```APIDOC
## POST /scanFileV2

### Description
Scans an image file for QR codes and returns an `Html5QrcodeResult` object. This method is mutually exclusive with camera-based scanning.

### Method
POST

### Endpoint
/scanFileV2

### Parameters
#### Request Body
- **imageFile** (File) - Required - A local file with image content.
- **showImage** (boolean) - Optional - If true, the image will be rendered on the given element.

### Request Example
```json
{
  "imageFile": "<binary data>",
  "showImage": false
}
```

### Response
#### Success Response (200)
- **result** (Html5QrcodeResult) - An object containing the scan results.

#### Response Example
```json
{
  "result": {
    "decodedText": "https://example.com",
    "qrCodeData": {
      "version": 10,
      "mode": "Byte",
      "errorCorrectionLevel": "M"
    }
  }
}
```
```

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

### Html5Qrcode: Scan File

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Scans an image file for QR codes. This functionality is separate from camera-based scanning; if a camera scan is active, it must be stopped first. This method returns a Promise that resolves with the decoded string content of the QR code found in the image file, or rejects if an error occurs. An optional boolean parameter `showImage` can be passed to display the image during scanning.

```typescript
scanFile(imageFile: File, showImage?: boolean): Promise<string>
```

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

### Resume Html5QrcodeScanner

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5QrcodeScanner

Resumes a previously paused QR code scan. If the video was also paused, it will resume as well. This method should only be called when the scanner is in a 'PAUSED' state and will throw an error otherwise.

```typescript
resume(): void
```

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

### Specify Camera Video Constraints

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/interfaces/Html5QrcodeCameraScanConfig

Allows overriding other camera configurations by providing MediaTrackConstraints. This is an experimental feature that can specify various camera controls like aspectRatio, facingMode, and frameRate.

```typescript
/**
 * Optional, @beta(this config is not well supported yet).
 * Important: When passed this will override other parameters like 'cameraIdOrConfig' or configurations like 'aspectRatio'. 'videoConstraints' should be of type MediaTrackConstraints as defined in https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints and is used to specify a variety of video or camera controls like: aspectRatio, facingMode, frameRate, etc.
 */
videoConstraints?: MediaTrackConstraints;
```

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

### Define QR Code Scanning Box Dimensions

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/interfaces/Html5QrcodeCameraScanConfig

Specifies the size, dimensions, or a calculation function for the QR code scanning box. The computed value must be less than the video feed's width and height. If not set, the entire video feed area is scanned.

```typescript
/**
 * Optional, edge size, dimension or calculator function for QR scanning box, the value or computed value should be smaller than the width and height of the full region.
 * This would make the scanner look like this:
 * ```
 *      ----------------------  
 *      |********************|
 *      |******,,,,,,,,,*****|	      <--- shaded region  
 *      |******|       |*****|	          <--- non shaded region would be  
 *      |******|       |*****|	          used for QR code scanning.
 *      |******|_______|*****|
 *      |********************|
 *      |********************|
 *      ----------------------  
 * 
 * ```
 * 
 * Instance of QrDimensions can be passed to construct a non square rendering of scanner box. You can also pass in a function of type QrDimensionFunction that takes in the width and height of the video stream and return QR box size of type QrDimensions.
 * If this value is not set, no shaded QR box will be rendered and the scanner will scan the entire area of video stream.
 */
qrbox?: number | QrDimensions | QrDimensionFunction;
```

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

### Configure QR Code Aspect Ratio

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/interfaces/Html5QrcodeCameraScanConfig

Sets the desired aspect ratio for the video feed during QR code scanning. Ideal values are 4:3 or 16:9. Incorrect values might prevent the video feed from displaying.

```typescript
/**
 * Optional, Desired aspect ratio for the video feed. Ideal aspect ratios are 4:3 or 16:9.
 * Passing very wrong aspect ratio could lead to video feed not showing up.
 */
aspectRatio?: number;
```

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

### Clear Html5QrcodeScanner UI

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5QrcodeScanner

Removes the QR Code scanner's user interface. This asynchronous method returns a Promise that resolves upon successful cleanup.

```typescript
clear(): Promise<void>
```

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

### Html5QrcodeSupportedFormats Enumeration Definition

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/enums/Html5QrcodeSupportedFormats

This TypeScript code defines the Html5QrcodeSupportedFormats enumeration, which lists all the barcode formats supported by the html5-qrcode library. Each member of the enumeration corresponds to a specific barcode type and is assigned a unique numerical value. This enumeration is crucial for specifying which formats the scanner should attempt to detect.

```typescript
export enum Html5QrcodeSupportedFormats {
  QR_CODE = 0,
  AZTEC = 1,
  CODABAR = 2,
  CODE_39 = 3,
  CODE_93 = 4,
  CODE_128 = 5,
  DATA_MATRIX = 6,
  MAXICODE = 7,
  ITF = 8,
  EAN_13 = 9,
  EAN_8 = 10,
  PDF_417 = 11,
  RSS_14 = 12,
  RSS_EXPANDED = 13,
  UPC_A = 14,
  UPC_E = 15,
  UPC_EAN_EXTENSION = 16
}
```

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

### Html5Qrcode: Pause Scan

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Pauses the ongoing scan process. Optionally, the video stream can also be paused by setting `shouldPauseVideo` to true. This method throws an error if called when the scanner is not in a scanning state. It returns void.

```typescript
pause(shouldPauseVideo?: boolean): void
```

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

### Html5Qrcode: Stop Scan

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Stops the ongoing QR code scanning process, whether it's camera-based or file-based. This method is crucial for releasing camera resources and cleaning up the scanner's state. It returns a Promise that resolves when the scan is successfully stopped, or rejects if an error occurs during the process. Ensure this is called when the scanner is no longer needed to prevent resource leaks.

```typescript
stop(): Promise<void>
```

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

### Html5Qrcode: Clear Canvas

Source: https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode

Clears the existing canvas used by the scanner. If a webcam-based scan is in progress, it must be explicitly stopped before calling this method to avoid exceptions. This method returns void.

```typescript
clear(): void
```
Tokens:
Raw