Home

Awesome

Instascan Instascan

Real-time webcam-driven HTML5 QR code scanner. Try the live demo.

Installing

Note: Chrome requires HTTPS when using the WebRTC API. Any pages using this library should be served over HTTPS.

NPM

npm install --save instascan

const Instascan = require('instascan');

Bower

Pending. Drop a note if you need Bower support.

Minified

Copy instascan.min.js from the releases page and load with:

<script type="text/javascript" src="instascan.min.js"></script>

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Instascan</title>
    <script type="text/javascript" src="instascan.min.js"></script>
  </head>
  <body>
    <video id="preview"></video>
    <script type="text/javascript">
      let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content) {
        console.log(content);
      });
      Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
    </script>
  </body>
</html>

API

let scanner = new Instascan.Scanner(opts)

Create a new scanner with options:

let opts = {
  // Whether to scan continuously for QR codes. If false, use scanner.scan() to manually scan.
  // If true, the scanner emits the "scan" event when a QR code is scanned. Default true.
  continuous: true,
  
  // The HTML element to use for the camera's video preview. Must be a <video> element.
  // When the camera is active, this element will have the "active" CSS class, otherwise,
  // it will have the "inactive" class. By default, an invisible element will be created to
  // host the video.
  video: document.getElementById('preview'),
  
  // Whether to horizontally mirror the video preview. This is helpful when trying to
  // scan a QR code with a user-facing camera. Default true.
  mirror: true,
  
  // Whether to include the scanned image data as part of the scan result. See the "scan" event
  // for image format details. Default false.
  captureImage: false,
  
  // Only applies to continuous mode. Whether to actively scan when the tab is not active.
  // When false, this reduces CPU usage when the tab is not active. Default true.
  backgroundScan: true,
  
  // Only applies to continuous mode. The period, in milliseconds, before the same QR code
  // will be recognized in succession. Default 5000 (5 seconds).
  refractoryPeriod: 5000,
  
  // Only applies to continuous mode. The period, in rendered frames, between scans. A lower scan period
  // increases CPU usage but makes scan response faster. Default 1 (i.e. analyze every frame).
  scanPeriod: 1
};

scanner.start(camera)

scanner.stop()

let result = scanner.scan()

scanner.addListener('scan', callback)

scanner.addListener('active', callback)

scanner.addListener('inactive', callback)

Instascan.Camera.getCameras()

camera.id

camera.name

Compatibility

Instascan works on non-iOS platforms in any browser that supports the WebRTC/getUserMedia API, which currently includes Chome, Firefox, Opera, and Edge. IE and Safari are not supported.

Instascan does not work on iOS since Apple does not yet support WebRTC in WebKit and forces other browser vendors (Chrome, Firefox, Opera) to use their implementation of WebKit. Apple is actively working on WebRTC support in WebKit.

Performance

Many factors affect how quickly and reliably Instascan can detect QR codes.

If you control creation of the QR code, consider the following:

When scanning, consider the following:

Example Setup

Setup

Credits

Powered by the Emscripten JavaScript build of the C++ port of the ZXing Java library.

License

Copyright © 2016 Chris Schmich
MIT License. See LICENSE for details.