### Initialize QrScanner with Options (New API)

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Creates a QrScanner instance using the new API by providing an options object to the constructor. This enables detailed scan results and is the recommended approach. The example shows a basic setup with a video element and a callback for decoded results.

```js
const qrScanner = new QrScanner(
    videoElem,
    result => console.log('decoded qr code:', result),
    { /* your options or returnDetailedScanResult: true if you're not specifying any other options */ },
);
```

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

### Install QR Scanner Library

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Instructions for installing the QR Scanner library using popular package managers like npm and Yarn, or by directly copying the minified files.

```bash
npm install --save qr-scanner
```

```bash
yarn add qr-scanner
```

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

### Prepare HTML Video Element for Web Cam Scanning

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Describes the initial HTML setup required for web camera scanning, specifically creating a <video> element where the live video stream will be rendered.

```html
<video></video>
```

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

### Require QR Scanner in CommonJS Environments

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Provides examples for importing the QR Scanner library using require() syntax, commonly used in CommonJS environments or with bundlers like Browserify.

```javascript
const QrScanner = require('qr-scanner'); // if installed via package
```

```javascript
const QrScanner = require('path/to/qr-scanner.umd.min.js'); // if not installed via package
```

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

### Build QR Scanner Project from Source

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

To build the QR scanner project from its source code, Node.js is required. First, install the necessary build packages using yarn. Then, execute the yarn build command to compile the project, generating qr-scanner.min.js and qr-scanner-worker.min.js.

```batch
yarn

yarn build
```

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

### Start Live QR Code Scanning (JavaScript)

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Initiates the QR code scanning process using the device's camera. This method prompts the user for camera permission and requires the page to be served via HTTPS for Web Cam streams.

```JavaScript
qrScanner.start();
```

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

### Get Available Cameras with QrScanner.listCameras

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

This method asynchronously retrieves a list of available cameras on the device, identified by their ID and label. Optionally, requesting camera labels may prompt the user for camera access permissions. It's recommended to call this after a QrScanner instance has successfully started to leverage existing permissions.

```javascript
QrScanner.listCameras(); // async; without requesting camera labels
QrScanner.listCameras(true); // async; requesting camera labels, potentially asking the user for permission
```

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

### Use QR Scanner in HTML Module Script Tag

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Example of embedding the QR Scanner import and usage directly within an HTML <script type="module"> tag, enabling browser-native ES6 module loading.

```html
<script type="module">
    import QrScanner from 'path/to/qr-scanner.min.js';
    // do something with QrScanner
</script>
```

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

### Stop Live QR Code Scanning (JavaScript)

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Halts the ongoing QR code scanning process. Scanning can be resumed later by calling `start()` again.

```JavaScript
qrScanner.stop();
```

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

### CSS Styles for QR Scanner UI and Highlight Regions

Source: https://github.com/nimiq/qr-scanner/blob/master/demo/index.html

This CSS defines visual styles for the QR scanner's user interface, including general element spacing, video container layout, and specific highlight styles for the scan region and detected QR code outlines. It provides examples for default and custom highlight appearances, such as border-radius and stroke properties.

```CSS
div { margin-bottom: 16px; }
#video-container { line-height: 0; }
#video-container.example-style-1 .scan-region-highlight-svg, #video-container.example-style-1 .code-outline-highlight { stroke: #64a2f3 !important; }
#video-container.example-style-2 { position: relative; width: max-content; height: max-content; overflow: hidden; }
#video-container.example-style-2 .scan-region-highlight { border-radius: 30px; outline: rgba(0, 0, 0, .25) solid 50vmax; }
#video-container.example-style-2 .scan-region-highlight-svg { display: none; }
#video-container.example-style-2 .code-outline-highlight { stroke: rgba(255, 255, 255, .5) !important; stroke-width: 15 !important; stroke-dasharray: none !important; }
#flash-toggle { display: none; }
hr { margin-top: 32px; }
input[type="file"]
```

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

### Manage Flashlight Support with QrScanner

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

This set of methods provides functionality to check for and control the camera's flashlight on supported browsers. hasFlash() checks for support, isFlashOn() checks current status, and turnFlashOn(), turnFlashOff(), or toggleFlash() control the flashlight. It's advisable to call hasFlash() after the scanner has started to avoid unnecessary camera stream activation.

```javascript
qrScanner.hasFlash(); // check whether the browser and used camera support turning the flash on; async.
qrScanner.isFlashOn(); // check whether the flash is on
qrScanner.turnFlashOn(); // turn the flash on if supported; async
qrScanner.turnFlashOff(); // turn the flash off if supported; async
qrScanner.toggleFlash(); // toggle the flash if supported; async.
```

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

### QrScanner Constructor Options and Callback Result Formats

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Detailed documentation for the optional third parameter of the QrScanner constructor, which is an options object. This section lists all supported options, their descriptions, and default values, influencing behavior such as error handling, camera selection, scan throttling, and result formatting. It also describes the different formats of results passed to the callback based on whether an options object was provided.

```APIDOC
QrScanner Options:
  onDecodeError: Handler to be invoked on decoding errors. The default is `QrScanner._onDecodeError`.
  preferredCamera: Preference for the camera to be used. The preference can be either a device id as returned by `listCameras` or a facing mode specified as `'environment'` or `'user'`. The default is `'environment'`. Note that there is no guarantee that the preference can actually be fulfilled.
  maxScansPerSecond: This option can be used to throttle the scans for less battery consumption. The default is 25. If supported by the browser, the scan rate is never higher than the camera's frame rate to avoid unnecessary duplicate scans on the same frame.
  calculateScanRegion: A method that determines a region to which scanning should be restricted as a performance improvement. This region can optionally also be scaled down before performing the scan as an additional performance improvement. The region is specified as `x`, `y`, `width` and `height`; the dimensions for the downscaled region as `downScaledWidth` and `downScaledHeight`. Note that the aspect ratio between `width` and `height` and `downScaledWidth` and `downScaledHeight` should remain the same. By default, the scan region is restricted to a centered square of two thirds of the video width or height, whichever is smaller, and scaled down to a 400x400 square.
  highlightScanRegion: Set this option to `true` for rendering an outline around the scan region on the video stream. This uses an absolutely positioned `div` that covers the scan region. This `div` can either be supplied as option `overlay`, or automatically created and then accessed via `qrScanner.$overlay`. It can be freely styled via CSS, e.g. by setting an outline, border, background color, etc.
  highlightCodeOutline: Set this option to `true` for rendering an outline around detected QR codes. This uses an absolutely positioned `div` on which an SVG for rendering the outline will be placed. This `div` can either be supplied as option `overlay`, or be accessed via `qrScanner.$overlay`. The SVG can be freely styled via CSS, e.g. by setting the fill color, stroke color, stroke width, etc. For more special needs, you can also use the `cornerPoints` directly for rendering an outline or the points yourself.
  overlay: A custom `div` that can be supplied for use for `highlightScanRegion` and `highlightCodeOutline`. The `div` should be a sibling of `videoElem` in the DOM. If this option is supplied, the default styles for `highlightCodeOutline` are not applied as the expectation is that the element already has some custom style applied to it.
  returnDetailedScanResult: Enforce reporting detailed scan results.

QrScanner Callback Result Formats:
  If no options object provided (deprecated):
    Result: string (QR code content)
  If options object provided:
    Result: object
      data: string (QR code content)
      cornerPoints: object (corner points of the read QR code's outline on the camera stream)

To avoid usage of the deprecated API if no other options are needed, supply `{ returnDetailedScanResult: true }`.
```

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

### Initialize and Control Webcam QR Scanning

Source: https://github.com/nimiq/qr-scanner/blob/master/demo/index.html

This JavaScript snippet sets up the `QrScanner` library for real-time QR code detection using a webcam. It includes all necessary DOM element references, initializes the scanner with a video element, defines callbacks for scan results and errors, and configures highlight options. It also implements logic to check and toggle camera flash, list available cameras, and handle various UI interactions such as camera selection, inversion mode, and scanner start/stop.

```JavaScript
import QrScanner from "../qr-scanner.min.js";
const video = document.getElementById('qr-video');
const videoContainer = document.getElementById('video-container');
const camHasCamera = document.getElementById('cam-has-camera');
const camList = document.getElementById('cam-list');
const camHasFlash = document.getElementById('cam-has-flash');
const flashToggle = document.getElementById('flash-toggle');
const flashState = document.getElementById('flash-state');
const camQrResult = document.getElementById('cam-qr-result');
const camQrResultTimestamp = document.getElementById('cam-qr-result-timestamp');
const fileSelector = document.getElementById('file-selector');
const fileQrResult = document.getElementById('file-qr-result');

// ####### Web Cam Scanning #######
const scanner = new QrScanner(video, result => setResult(camQrResult, result), {
  onDecodeError: error => {
    camQrResult.textContent = error;
    camQrResult.style.color = 'inherit';
  },
  highlightScanRegion: true,
  highlightCodeOutline: true,
});

const updateFlashAvailability = () => {
  scanner.hasFlash().then(hasFlash => {
    camHasFlash.textContent = hasFlash;
    flashToggle.style.display = hasFlash ? 'inline-block' : 'none';
  });
};

scanner.start().then(() => {
  updateFlashAvailability();
  // List cameras after the scanner started to avoid listCamera's stream and the scanner's stream being requested
  // at the same time which can result in listCamera's unconstrained stream also being offered to the scanner.
  // Note that we can also start the scanner after listCameras, we just have it this way around in the demo to
  // start the scanner earlier.
  QrScanner.listCameras(true).then(cameras => cameras.forEach(camera => {
    const option = document.createElement('option');
    option.value = camera.id;
    option.text = camera.label;
    camList.add(option);
  }));
});

QrScanner.hasCamera().then(hasCamera => camHasCamera.textContent = hasCamera);

// for debugging
window.scanner = scanner;

document.getElementById('scan-region-highlight-style-select').addEventListener('change', (e) => {
  videoContainer.className = e.target.value;
  scanner._updateOverlay(); // reposition the highlight because style 2 sets position: relative
});

document.getElementById('show-scan-region').addEventListener('change', (e) => {
  const input = e.target;
  const label = input.parentNode;
  label.parentNode.insertBefore(scanner.$canvas, label.nextSibling);
  scanner.$canvas.style.display = input.checked ? 'block' : 'none';
});

document.getElementById('inversion-mode-select').addEventListener('change', event => {
  scanner.setInversionMode(event.target.value);
});

camList.addEventListener('change', event => {
  scanner.setCamera(event.target.value).then(updateFlashAvailability);
});

flashToggle.addEventListener('click', () => {
  scanner.toggleFlash().then(() => flashState.textContent = scanner.isFlashOn() ? 'on' : 'off');
});

document.getElementById('start-button').addEventListener('click', () => {
  scanner.start();
});

document.getElementById('stop-button').addEventListener('click', () => {
  scanner.stop();
});
```

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

### Dynamically Import QR Scanner ES6 Module

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Shows how to use dynamic import() for projects not primarily based on ES6 modules, allowing asynchronous loading of the QrScanner module.

```javascript
import('path/to/qr-scanner.min.js').then((module) => {
    const QrScanner = module.default;
    // do something with QrScanner
});
```

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

### Include QR Scanner UMD Build in HTML

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Illustrates how to include the UMD (Universal Module Definition) build of QR Scanner directly in an HTML file using a standard <script> tag, suitable for non-module environments.

```html
<script src="path/to/qr-scanner.umd.min.js"></script>
<script>
    // do something with QrScanner
</script>
```

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

### Initialize QrScanner without Options (Deprecated Old API)

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Creates a QrScanner instance without providing an options object, which currently defaults to the old API returning simple string results. This method is deprecated and will be removed in future releases. It is shown for backwards compatibility only.

```js
const qrScanner = new QrScanner(
    videoElem,
    result => console.log('decoded qr code:', result),
    // No options provided. This will use the old api and is deprecated in the current version until next major version.
);
```

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

### Import QR Scanner as ES6 Module

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Demonstrates how to import the QrScanner class using ES6 module syntax, suitable for projects bundled with tools like Webpack or Rollup, or for plain ES6 imports.

```javascript
import QrScanner from 'path/to/qr-scanner.min.js'; // if using plain es6 import
```

```javascript
import QrScanner from 'qr-scanner'; // if installed via package and bundling with a module bundler like webpack or rollup
```

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

### QrScanner.scanImage Options and Return Types (APIDOC)

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Details the optional parameters for `QrScanner.scanImage` and explains the different return types based on whether an options object is provided. Options include `scanRegion`, `qrEngine`, `canvas`, `disallowCanvasResizing`, `alsoTryWithoutScanRegion`, and `returnDetailedScanResult`.

```APIDOC
QrScanner.scanImage(image, options?: object): Promise<string | { data: string, cornerPoints: object[] }>
  Parameters:
    image: Supported image sources (HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, OffscreenCanvas, File, Blob, Data URIs, URLs pointing to an image).
    options (optional): An object containing configuration for the scan.
      Properties:
        scanRegion: object
          Description: A region defined by x, y, width, and height to restrict the search for a QR code. Can be scaled down by providing downScaledWidth and downScaledHeight.
          Default: The region spans the whole image and is not scaled down.
        qrEngine: QrScanner.QrEngine
          Description: A manually created QR scanner engine instance to be reused. Improves performance for multiple image scans. Can be created via QrScanner.createQrEngine(QrScanner.WORKER_PATH).
          Default: No engine is reused.
        canvas: HTMLCanvasElement
          Description: A manually created canvas to be reused. Improves performance for multiple image scans. Can be created via a <canvas> tag or document.createElement('canvas').
          Default: No canvas is reused.
        disallowCanvasResizing: boolean
          Description: If true, requests a provided canvas for reuse not to be resized, irrespective of source image or region dimensions. Note: canvas and source region should have the same aspect ratio to avoid image distortion.
          Default: Canvas size is adapted to the scan region dimensions or down scaled scan region.
        alsoTryWithoutScanRegion: boolean
          Description: If true, requests a second scan on the entire image if a scanRegion was provided and no QR code was found within that region.
          Default: No second scan is attempted.
        returnDetailedScanResult: boolean
          Description: If true, enforces reporting detailed scan results (object with 'data' and 'cornerPoints').
          Default: False (unless no options object provided, then simple string result is returned for backwards compatibility).

  Return Values:
    If no options object was provided: string - The read QR code's content (deprecated, will be removed).
    If an options object was provided: object - An object with properties 'data' (string content) and 'cornerPoints' (array of corner points).
  Throws: If no QR code could be read.
```

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

### Perform File-based QR Code Scanning

Source: https://github.com/nimiq/qr-scanner/blob/master/demo/index.html

This JavaScript snippet demonstrates how to scan a QR code from an image file selected by the user. It listens for changes on a file input element, retrieves the selected file, and then uses `QrScanner.scanImage` to process the image. The result, or an error message if no QR code is found, is displayed using the `setResult` helper function.

```JavaScript
// ####### File Scanning #######
fileSelector.addEventListener('change', event => {
  const file = fileSelector.files[0];
  if (!file) {
    return;
  }
  QrScanner.scanImage(file, { returnDetailedScanResult: true })
    .then(result => setResult(fileQrResult, result))
    .catch(e => setResult(fileQrResult, { data: e || 'No QR code found.' }));
});
```

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

### Check for Camera Availability (JavaScript)

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Provides an asynchronous utility method to check if the device has a camera, useful for conditionally offering QR web cam scanning functionality to users.

```JavaScript
QrScanner.hasCamera(); // async
```

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

### CSS Styling for Block Display and Margin

Source: https://github.com/nimiq/qr-scanner/blob/master/demo/index.html

This CSS snippet sets an element to display as a block and applies a bottom margin of 16 pixels. It is commonly used to control layout and spacing of HTML elements.

```css
{ display: block; margin-bottom: 16px; }
```

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

### Scan QR Code from a Single Image (JavaScript)

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Scans a single image for QR codes. This method supports various image sources like HTML elements, File/Blob objects, Data URIs, and URLs. It returns a Promise that resolves with the QR code content or rejects if no QR code is found.

```JavaScript
QrScanner.scanImage(image)
    .then(result => console.log(result))
    .catch(error => console.log(error || 'No QR code found.'));
```

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

### Clean Up QrScanner Instance with destroy()

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

When the QR scanner is no longer needed, call the destroy() method to release resources. This action stops the camera stream, terminates the web worker, and cleans up event listeners. After destruction, the QR scanner instance will become dysfunctional.

```javascript
qrScanner.destroy();
qrScanner = null;
```

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

### Adjust Color Correction with QrScanner.setGrayscaleWeights

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Improve contrast for QR codes of specific colors by adjusting the grayscale computation weights for red, green, and blue channels. The red, green, and blue values should sum up to 256 if useIntegerApproximation is true, or 1 otherwise. Default values are based on BT.601 standards.

```javascript
qrScanner.setGrayscaleWeights(red, green, blue, useIntegerApproximation = true);
```

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

### Specify Preferred Camera with QrScanner.setCamera

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

Use this method to set the preferred camera for scanning. The preference can be a specific device ID obtained from listCameras or a facing mode like 'environment' or 'user'. While a preference can be set, there is no guarantee that the requested camera will be available or used.

```javascript
qrScanner.setCamera(facingModeOrDeviceId); // async
```

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

### Helper Function to Display QR Scan Results

Source: https://github.com/nimiq/qr-scanner/blob/master/demo/index.html

This JavaScript function `setResult` is a utility to update the UI with the detected QR code data. It logs the result to the console, updates a specified HTML element's text content and timestamp, and applies a temporary visual highlight to indicate a successful scan.

```JavaScript
function setResult(label, result) {
  console.log(result.data);
  label.textContent = result.data;
  camQrResultTimestamp.textContent = new Date().toString();
  label.style.color = 'teal';
  clearTimeout(label.highlightTimeout);
  label.highlightTimeout = setTimeout(() => label.style.color = 'inherit', 100);
}
```

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

### Configure Color Inversion Mode with QrScanner.setInversionMode

Source: https://github.com/nimiq/qr-scanner/blob/master/README.md

This method allows changing the QR code scanning behavior regarding color. By default, the scanner looks for dark QR codes on a bright background. You can set the inversionMode to 'original', 'invert' (for bright QR codes on dark backgrounds), or 'both' to scan for either type.

```javascript
qrScanner.setInversionMode(inversionMode);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.