qr-scanner

For projects that are not based on ES6 modules, you can use the UMD build qr-scanner.umd.min.js via a standard script tag.

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

If your project does not use ES6 modules natively, you can load the library using a dynamic import() call.

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

If you are using a module bundler (like Webpack or Rollup) or plain ES6 modules, import QrScanner directly. Note that qr-scanner.min.js is an ES6 module and requires the importing script to be a module (e.g., <script type="module">).

import QrScanner from 'path/to/qr-scanner.min.js'; // if using plain es6 import
import QrScanner from 'qr-scanner'; // if installed via package and bundling with a module bundler like webpack or rollup

To scan QR codes using a live camera stream, follow these steps:

1. Create an HTML <video> element to render the stream:

   <video></video>

2. Initialize a QrScanner instance. To use the modern API (which returns detailed scan results), you must provide an options object. If you omit the options object, the scanner uses a deprecated API that returns only a simple string.

3. Start scanning by calling .start(). Note that your page must be served via HTTPS to access the camera.

4. Stop scanning by calling .stop() if you wish to pause the stream.

5. Clean up by calling .destroy() when the scanner is no longer needed to stop the camera stream and web worker.

If you are using a require-based bundler like Browserify, you can import the library using standard CommonJS syntax.

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

You can install the qr-scanner package using npm or yarn to include it in your project dependencies.

npm install --save qr-scanner
# or
yarn add qr-scanner

If you need to modify the source code in the /src folder, you can build the project yourself. This requires Node.js. The project provides prebuilt files qr-scanner.min.js and qr-scanner-worker.min.js for standard use, but manual building is necessary for custom development.

yarn
yarn build

Use QrScanner.scanImage(image, [options]) to scan a static image source. This method returns a Promise that resolves with the scan result or throws if no QR code is found.

Supported Sources: HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, OffscreenCanvas, File/Blob, Data URIs, or URLs (if same-origin or CORS enabled).

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

On supported browsers and devices, you can control the camera's flashlight.

Note: It is recommended to call hasFlash() after the scanner has successfully started to avoid unnecessary permission prompts.

The library provides utility methods to check for camera availability and list specific devices.

• Check availability: Use QrScanner.hasCamera() to see if a camera exists.
• List cameras: Use QrScanner.listCameras() to get an array of cameras with id and label.
• Request labels: Pass true to listCameras(true) to request camera labels (this may prompt the user for permission).
• Switch camera: Use qrScanner.setCamera(facingModeOrDeviceId) to change the active camera using a device ID or a facing mode ('user' or 'environment').