!Instascan Instascan

Real-time webcam-driven HTML5 QR code scanner.

Installing

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

$3

npm install --save instascan

``javascript
var Instascan = require('instascan');
`

$3

Pending. Drop a note if you need Bower support.

$3

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

`html

`

Example

`html











`

API

$3

- Create a new scanner with options.
- opts.continuous: Whether to scan continuously for QR codes. If false, use scanner.scan to manually scan. Default true.
- opts.video: The HTML element to use for the camera's video preview. Must be a

$3

- Activate camera and start scanning using it as the source. Returns promise.
- This must be called in order to use scanner.scan or receive scan events.
- camera: Instance of Instascan.Camera from Instascan.Camera.getCameras.
- Continuation: function (), called when camera is active and scanning has started.

$3

- Stop scanning and deactivate the camera. Returns promise.
- Continuation: function (), called when camera and scanning have stopped.

$3

- Scan video immediately for a QR code.
- QR codes recognized with this method are not raised via the scan event.
- If no QR code is detected, result is null.
- result.content: Scanned content decoded from the QR code.
- result.image: Undefined if scanner.captureImage is false, otherwise, see the scan event for format.

$3

- Raised when a QR code is scanned using the camera in continuous mode (see scanner.continuous).
- callback: function (content, image)
- content: Scanned content decoded from the QR code.
- image: null if scanner.captureImage is false, otherwise, a base64-encoded WebP-compressed data URI of the camera frame used to decode the QR code.

$3

- Raised when the scanner becomes active as the result of scanner.start or the tab gaining focus.
- If opts.video element was specified, it will have the active CSS class.
- callback: function ()

$3

- Raised when the scanner becomes inactive as the result of scanner.stop or the tab losing focus.
- If opts.video element was specified, it will have the inactive CSS class.
- callback: function ()

$3

- Enumerate available video devices. Returns promise.
- Continuation: function (cameras), called when cameras are available.
- cameras: Array of Instascan.Camera instances available for use.

$3

- Unique camera ID provided by the browser.
- These IDs are stable and can be persisted across instances of your application (e.g. in localStorage).

$3

- Camera name, including manufacturer and model, e.g. "Microsoft LifeCam HD-3000".
- Can be null` if the user has not yet allowed camera access, e.g. on first launch of the app.

Compatibility

Instascan works with any browser that supports the getUserMedia API, which currently includes Chome, Firefox, Opera, and Edge. IE and Safari are not supported.

Performance

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

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

- A larger physical code is better. A 2" square code is better than a 1" square code.
- Flat, smooth, matte surfaces are better than curved, rough, glossy surfaces.
- Include a sufficient quiet zone, the white border surrounding QR code. The quiet zone should be at least four times the width of an individual element in your QR code.
- A simpler code is better. You can use this QR code generator to see how your input affects complexity.
- For the same length, numeric content is simpler than ASCII content, which is simpler than Unicode content.
- Shorter content is simpler. If you're encoding a URL, consider using a shortener such as goo.gl or bit.ly.

When scanning, consider the following:

- QR code orientation doesn't matter.
- Higher resolution video is better, but is more CPU intensive.
- Direct, orthogonal scanning is better than scanning at an angle.
- Blurry video greatly reduces scanner performance.
- Auto-focus can cause lags in detection as the camera adjusts focus. Consider disabling it or using a fixed-focus camera with the subject positioned at the focal point.
- Exposure adjustment on cameras can cause lags in detection. Consider disabling it or having a fixed white backdrop.

Example Setup

- Purpose: To scan QR code stickers on paper cards and plastic bags.
- Camera: Microsoft LifeCam HD-3000, 720p, fixed focus, around $30 USD.
- Small support to ensure camera is focused on subject.
- White paper backdrop to mitigate exposure adjustment.

!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.