Package Galaxy

npm package 'instascan'

Popularity: Medium (more popular than 90% of all packages)
Description: Webcam-driven QR code scanner.
Installation: npm install instascan
Last version: 1.0.0 (Download)
Homepage: https://github.com/schmich/instascan
Size: 0 kB
License: MIT
Keywords: qr, code, quick, response, scan, scanner, webcam, realtime

Activity

Last modified: January 26, 2017 1:06 AM (6 years ago)
Versions released in one year: 0
Weekly downloads: 1,828

Versions released
Weekly downloads

What's new in version 1.0.0

Delta between version 0.0.3 and version 1.0.0

Source: Github

Commits:

ba1520a62f7c1d5a05622f331053897cfaa29933, July 18, 2016 7:21 AM:
```
Fix Exception/Error naming.
```

dae9f496b8bba3215377ab771251455eb70fe758, July 18, 2016 7:34 PM:

Fix visibility check when transitioning into the active state. Remove camera setting. Updating the camera should be done using scanner.start.

cf3de588a7f8b99307cbb3456e84909ca683e6ca, July 18, 2016 8:53 PM:

Mark more fields as private. Support changing options on Scanner.

3e4a91ec7c9ce8126cd3bbc270a0dd2c9c7057eb, July 18, 2016 8:57 PM:
```
Make Scanner.stop async.
```
e816929108630f17995ea0b7e91f6a7ed26933de, July 18, 2016 9:21 PM:
```
Fix #25: Add browser support to README.
```
63995744570e6385a5b92116a59ae8860f0c668d, July 18, 2016 9:30 PM:
```
Add installation instructions to README.
```
87bf7d7d6cdc8a24835f864da1336db7ab3d04ad, July 18, 2016 9:42 PM:
```
Support changing of Scanner.mirror property.
```
cecfb7147026b12199e8a7a209ea0dbcdf65c390, July 18, 2016 9:45 PM:
```
Refactor FSM creation into its own method.
```

3628ae9d246fcc8d594c6fec9ec359648eafab79, July 18, 2016 10:31 PM:

Add Scanner.continuous setting to control whether scanning should be done continuously. Add Scanner.scan to force an immediate scan.

a7cd972cf02a70f7ff05ce3d7aba83291d9da876, July 18, 2016 10:43 PM:
```
Add continuous/click-to-scan updates to API.
```
2394ad881eb1a6ecdfba2e70aa3ad11498970dfc, July 19, 2016 12:34 AM:
```
Add additional API notes. Tweak style.
```
7e6340ff23a7a40a342613b733c6e7a493b9cf76, July 19, 2016 12:37 AM:
```
Elaborate on camera.id.
```
f83c09746f0e195091c09c5be7f240d1dbc9a1e3, July 19, 2016 2:01 AM:
```
Fix #20: Add QR considerations to README.
```
3f6eda345a5c88f730545975036f5a46253b1a33, July 19, 2016 2:12 AM:
```
Add QR code to README.
```
00d19ea7627b45eed703b57eb38bc165a85d8b56, July 19, 2016 2:26 AM:
```
Add keyword to package.
```
8e39d0bb49e38cc26df96180340bdf2822bc8ae8, July 19, 2016 4:36 AM:
```
Add example setup to README.
```
bcf1ef26ae16821765ce1c7fc4e70db2a7e5169a, July 19, 2016 4:38 AM:
```
Move compatibility section up.
```
33ef9521549f568f79856d933a31dfc2c753d748, July 19, 2016 5:18 AM:
```
Add HTTPS requirement note.
```
58c7acc85e531961355ebd177ba4cbf12d1a26a3, July 19, 2016 5:20 AM:
```
Fix capitalization.
```
e82dd96cc1af4e18cff286fd27df7b88015c1c5f, July 23, 2016 8:34 AM:
```
Add API cross-references.
```
4323cc40f621fa459012e6d9e361d2f26c9d15cc, July 23, 2016 8:42 AM:
```
Add more cross-references. Clean up some opts documentation.
```
203fc39958bcf8cd40a8c0fed03936ff87882482, July 23, 2016 8:50 AM:
```
Add Bower note.
```

620126fb6b4df25c20790544aa7e31521cff4c7e, August 3, 2016 4:47 AM:

Fix #35: Set active/inactive class on video element based on camera state.

ce261d556e45a3ea92f21f41e2f19856e15c1e37, August 3, 2016 4:51 AM:

Add README notes about active/inactive CSS class on the video element.

7db37b01b5909faac696117cc609037a97b24fdc, August 3, 2016 7:31 AM:

Use average of red, green, and blue components for grayscale QR image component.

b89672724700c3ec317cc5ce2e15878560788e35, January 26, 2017 12:59 AM:
```
var -> let in README
```
5a3492a0d93cc329bb9824b7ab0b0c0878486f0e, January 26, 2017 1:05 AM:
```
Bump to 1.0.0.
```

Files changed:

README.md CHANGED Viewed

@@ -1,5 +1,29 @@
-# Instascan
-Webcam-driven HTML5 QR code scanner.
 ## Example
@@ -8,12 +32,12 @@ Webcam-driven HTML5 QR code scanner.
 <html>
   <head>
     <title>Instascan</title>
-    <script type="text/javascript" src="dist/instascan.min.js"></script>
   </head>
   <body>
     <video id="preview"></video>
     <script type="text/javascript">
-      var scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
       scanner.addListener('scan', function (content, image) {
         console.log(content);
       });
@@ -30,56 +54,106 @@ Webcam-driven HTML5 QR code scanner.
 ## API
-### `new Instascan.Scanner(opts)`
 - Create a new scanner with options.
-- `opts.video`: The HTML element to use for the camera's video preview. Must be a `<video>` element. By default, an invisible element will be created to host the video.
 - `opts.mirror`: Whether to horizontally mirror the video preview. This is helpful when trying to scan a QR code with a user-facing camera. Default `true`.
-- `opts.backgroundScan`: Whether to actively scan when the tab is not active. When `false`, this reduces CPU usage when the tab is not active. Default `false`.
-- `opts.refractoryPeriod`: The period, in milliseconds, before the same QR code will be recognized in succession. Default `5000`.
-- `opts.scanPeriod`: 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).
 - `opts.captureImage`: Whether to include the scanned image data as part of the scan result. See the `scan` event for format details. Default `false`.
-### `scanner.start(camera)`
-- Start scanning using `camera` as the source. Returns promise.
-- `camera`: Instance of `Instascan.Camera` from `Instascan.Camera.getCameras`.
 - Continuation: `function ()`, called when camera is active and scanning has started.
-### `scanner.stop()`
-- Stop scanning. This stops the camera as well.
-### `scanner.addListener('scan', callback)`
-- Raised when a QR code is scanned using the camera.
 - `callback`: `function (content, image)`
 - `content`: Scanned content decoded from the QR code.
-- `image`: `null` if `scanner.captureImage` is `false`, otherwise, a base64-encoded [WebP](https://en.wikipedia.org/wiki/WebP)-compressed data URI of the camera frame used to decode the QR code.
-### `scanner.addListener('active', callback)`
-- Raised when the scanner becomes active as the result of `scanner.start` or the tab gaining focus.
 - `callback`: `function ()`
-### `scanner.addListener('inactive', callback)`
-- Raised when the scanner becomes inactive as the result of `scanner.stop` or the tab losing focus.
 - `callback`: `function ()`
-### `Instascan.Camera.getCameras()`
 - Enumerate available video devices. Returns promise.
 - Continuation: `function (cameras)`, called when cameras are available.
 - `cameras`: Array of `Instascan.Camera` instances available for use.
-### `camera.id`
-- Unique camera ID. Assigned by the browser.
-### `camera.name`
-- 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.
 ## Credits
--- assets/qr.png
--- assets/setup.jpg

+# ![Instascan](https://raw.githubusercontent.com/schmich/instascan/master/assets/qr.png) 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.
+### NPM
+`npm install --save instascan`
+```javascript
+const Instascan = require('instascan');
+```
+### Bower
+Pending. [Drop a note](https://github.com/schmich/instascan/issues/31) if you need Bower support.
+### Minified
+Copy `instascan.min.js` from the [releases](https://github.com/schmich/instascan/releases) page and load with:
+```html
+<script type="text/javascript" src="instascan.min.js"></script>
+```
 ## Example
 <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, image) {
         console.log(content);
       });
 ## API
+### let scanner = new Instascan.Scanner(opts)
 - Create a new scanner with options.
+- `opts.continuous`: Whether to scan continuously for QR codes. If `false`, use [`scanner.scan`](#let-result--scannerscan) to manually scan. Default `true`.
+- `opts.video`: 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.
 - `opts.mirror`: Whether to horizontally mirror the video preview. This is helpful when trying to scan a QR code with a user-facing camera. Default `true`.
 - `opts.captureImage`: Whether to include the scanned image data as part of the scan result. See the `scan` event for format details. Default `false`.
+- `opts.backgroundScan`: 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 `false`.
+- `opts.refractoryPeriod`: Only applies to continuous mode. The period, in milliseconds, before the same QR code will be recognized in succession. Default `5000`.
+- `opts.scanPeriod`: 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).
+### scanner.start(camera)
+- Activate `camera` and start scanning using it as the source. Returns promise.
+- This must be called in order to use [`scanner.scan`](#let-result--scannerscan) or receive [`scan`](#scanneraddlistenerscan-callback) events.
+- `camera`: Instance of `Instascan.Camera` from [`Instascan.Camera.getCameras`](#instascancameragetcameras).
 - Continuation: `function ()`, called when camera is active and scanning has started.
+### scanner.stop()
+- Stop scanning and deactivate the camera. Returns promise.
+- Continuation: `function ()`, called when camera and scanning have stopped.
+### let result = scanner.scan()
+- 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`](#let-scanner--new-instascanscanneropts) is `false`, otherwise, see the [`scan`](#scanneraddlistenerscan-callback) event for format.
+### scanner.addListener('scan', callback)
+- Raised when a QR code is scanned using the camera in continuous mode (see [`scanner.continuous`](#let-scanner--new-instascanscanneropts)).
 - `callback`: `function (content, image)`
 - `content`: Scanned content decoded from the QR code.
+- `image`: `null` if [`scanner.captureImage`](#let-scanner--new-instascanscanneropts) is `false`, otherwise, a base64-encoded [WebP](https://en.wikipedia.org/wiki/WebP)-compressed data URI of the camera frame used to decode the QR code.
+### scanner.addListener('active', callback)
+- Raised when the scanner becomes active as the result of [`scanner.start`](#scannerstartcamera) or the tab gaining focus.
+- If `opts.video` element was specified, it will have the `active` CSS class.
 - `callback`: `function ()`
+### scanner.addListener('inactive', callback)
+- Raised when the scanner becomes inactive as the result of [`scanner.stop`](#scannerstop) or the tab losing focus.
+- If `opts.video` element was specified, it will have the `inactive` CSS class.
 - `callback`: `function ()`
+### Instascan.Camera.getCameras()
 - Enumerate available video devices. Returns promise.
 - Continuation: `function (cameras)`, called when cameras are available.
 - `cameras`: Array of `Instascan.Camera` instances available for use.
+### camera.id
+- Unique camera ID provided by the browser.
+- These IDs are stable and can be persisted across instances of your application (e.g. in localStorage).
+### camera.name
+- 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](http://caniuse.com/#feat=stream), 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](https://www.the-qrcode-generator.com/) 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](https://goo.gl/) or [bit.ly](https://bitly.com/).
+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](http://www.newegg.com/Product/Product.aspx?Item=9SIA4RE40S4991), 720p, fixed focus, around $30 USD.
+- Small support to ensure camera is focused on subject.
+- White paper backdrop to mitigate exposure adjustment.
+![Setup](https://raw.githubusercontent.com/schmich/instascan/master/assets/setup.jpg)
 ## Credits
+++ assets/qr.png
+++ assets/setup.jpg

package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "instascan",
-  "version": "0.0.3",
   "description": "Webcam-driven QR code scanner.",
   "main": "index.js",
   "scripts": {
@@ -21,7 +21,8 @@
     "response",
     "scan",
     "scanner",
-    "webcam"
   ],
   "author": "Chris Schmich <schmch@gmail.com>",
   "license": "MIT",

 {
   "name": "instascan",
+  "version": "1.0.0",
   "description": "Webcam-driven QR code scanner.",
   "main": "index.js",
   "scripts": {
     "response",
     "scan",
     "scanner",
+    "webcam",
+    "realtime"
   ],
   "author": "Chris Schmich <schmch@gmail.com>",
   "license": "MIT",

src/scanner.js CHANGED Viewed

@@ -3,60 +3,82 @@ const ZXing = require('./zxing')();
 const Visibility = require('visibilityjs');
 const StateMachine = require('fsm-as-promised');
-class ActiveScan {
   constructor(emitter, analyzer, captureImage, scanPeriod, refractoryPeriod) {
-    this.active = false;
     this.scanPeriod = scanPeriod;
-    this.frameCount = 0;
-    this.emitter = emitter;
-    this.analyzer = analyzer;
     this.captureImage = captureImage;
     this.refractoryPeriod = refractoryPeriod;
   }
   start() {
-    this.active = true;
     requestAnimationFrame(() => this._scan());
   }
   stop() {
-    this.active = false;
   }
-  _scan() {
-    if (!this.active) {
-      return;
-    }
-    requestAnimationFrame(() => this._scan());
-    if (++this.frameCount !== this.scanPeriod) {
-      return;
-    } else {
-      this.frameCount = 0;
-    }
-    let analysis = this.analyzer.analyze();
     if (!analysis) {
-      return;
     }
     let { result, canvas } = analysis;
-    if (!result || result === this.lastResult) {
-      return;
     }
     clearTimeout(this.refractoryTimeout);
     this.refractoryTimeout = setTimeout(() => {
-      this.lastResult = null;
     }, this.refractoryPeriod);
     let image = this.captureImage ? canvas.toDataURL('image/webp', 0.8) : null;
-    this.lastResult = result;
-    setTimeout(() => {
-      this.emitter.emit('scan', result, image);
-    }, 0);
   }
 }
@@ -116,7 +138,8 @@ class Analyzer {
     let data = this.canvasContext.getImageData(0, 0, this.sensorWidth, this.sensorHeight).data;
     for (var i = 0, j = 0; i < data.length; i += 4, j++) {
-      ZXing.HEAPU8[this.imageBuffer + j] = data[i];
     }
     let err = ZXing._decode_qr(this.decodeCallback);
@@ -137,14 +160,19 @@ class Scanner extends EventEmitter {
   constructor(opts) {
     super();
-    this._scan = null;
-    this._camera = null;
-    this.scanPeriod = opts.scanPeriod || 1;
-    this.refractoryPeriod = opts.refractoryPeriod || (5 * 1000);
-    this.captureImage = opts.captureImage || false;
-    this.backgroundScan = opts.backgroundScan || false;
     this.video = this._configureVideo(opts);
-    this.analyzer = new Analyzer(this.video);
     Visibility.change((e, state) => {
       if (state === 'visible') {
@@ -160,35 +188,23 @@ class Scanner extends EventEmitter {
       }
     });
-    this._fsm = StateMachine.create({
-      initial: 'stopped',
-      events: [
-        { name: 'start', from: 'stopped', to: 'started' },
-        { name: 'stop', from: ['started', 'active', 'inactive'], to: 'stopped' },
-        { name: 'activate', from: ['started', 'inactive'], to: 'active' },
-        { name: 'deactivate', from: ['started', 'active'], to: 'inactive' }
-      ],
-      callbacks: {
-        onleaveactive: () => {
-          this._disableScan();
-          this.emit('inactive');
-        },
-        onenteractive: async (options) => {
-          if (Visibility.state() !== 'visible' && !this.backgroundScan) {
-            return false;
-          }
-          return await this._enableScan(options.args[0]);
-        },
-        onenteredstarted: async (options) => {
-          await this._fsm.activate(options.args[0]);
-        }
-      }
     });
     this.emit('inactive');
   }
   async start(camera = null) {
     if (this._fsm.can('start')) {
       await this._fsm.start(camera);
@@ -198,40 +214,93 @@ class Scanner extends EventEmitter {
     }
   }
-  stop() {
     if (this._fsm.can('stop')) {
-      this._fsm.stop();
     }
   }
-  set camera(camera) {
-    if (this._fsm.current === 'stopped' || this._fsm.current === 'inactive') {
-      this._camera = camera;
     } else {
-      this._fsm.stop();
-      this._fsm.start(camera);
     }
   }
   async _enableScan(camera) {
     this._camera = camera || this._camera;
     if (!this._camera) {
-      throw new Exception('Camera is not defined.');
     }
     let streamUrl = await this._camera.start();
     this.video.src = streamUrl;
-    this._scan = new ActiveScan(this, this.analyzer, this.captureImage, this.scanPeriod, this.refractoryPeriod);
-    this._scan.start();
-    this.emit('active');
   }
   _disableScan() {
     this.video.src = '';
-    if (this._scan) {
-      this._scan.stop();
-      this._scan = null;
     }
     if (this._camera) {
@@ -242,24 +311,63 @@ class Scanner extends EventEmitter {
   _configureVideo(opts) {
     if (opts.video) {
       if (opts.video.tagName !== 'VIDEO') {
-        throw new Exception('Video must be a <video> element.');
       }
     }
     var video = opts.video || document.createElement('video');
     video.setAttribute('autoplay', 'autoplay');
-    if (opts.mirror !== false && opts.video) {
-      video.style.MozTransform = 'scaleX(-1)';
-      video.style.webkitTransform = 'scaleX(-1)';
-      video.style.OTransform = 'scaleX(-1)';
-      video.style.msFilter = 'FlipH';
-      video.style.filter = 'FlipH';
-      video.style.transform = 'scaleX(-1)';
-    }
     return video;
   }
 }
 module.exports = Scanner;

 const Visibility = require('visibilityjs');
 const StateMachine = require('fsm-as-promised');
+class ScanProvider {
   constructor(emitter, analyzer, captureImage, scanPeriod, refractoryPeriod) {
     this.scanPeriod = scanPeriod;
     this.captureImage = captureImage;
     this.refractoryPeriod = refractoryPeriod;
+    this._emitter = emitter;
+    this._frameCount = 0;
+    this._analyzer = analyzer;
+    this._lastResult = null;
+    this._active = false;
   }
   start() {
+    this._active = true;
     requestAnimationFrame(() => this._scan());
   }
   stop() {
+    this._active = false;
   }
+  scan() {
+    return this._analyze(false);
+  }
+  _analyze(skipDups) {
+    let analysis = this._analyzer.analyze();
     if (!analysis) {
+      return null;
     }
     let { result, canvas } = analysis;
+    if (!result) {
+      return null;
+    }
+    if (skipDups && result === this._lastResult) {
+      return null;
     }
     clearTimeout(this.refractoryTimeout);
     this.refractoryTimeout = setTimeout(() => {
+      this._lastResult = null;
     }, this.refractoryPeriod);
     let image = this.captureImage ? canvas.toDataURL('image/webp', 0.8) : null;
+    this._lastResult = result;
+    let payload = { content: result };
+    if (image) {
+      payload.image = image;
+    }
+    return payload;
+  }
+  _scan() {
+    if (!this._active) {
+      return;
+    }
+    requestAnimationFrame(() => this._scan());
+    if (++this._frameCount !== this.scanPeriod) {
+      return;
+    } else {
+      this._frameCount = 0;
+    }
+    let result = this._analyze(true);
+    if (result) {
+      setTimeout(() => {
+        this._emitter.emit('scan', result.content, result.image || null);
+      }, 0);
+    }
   }
 }
     let data = this.canvasContext.getImageData(0, 0, this.sensorWidth, this.sensorHeight).data;
     for (var i = 0, j = 0; i < data.length; i += 4, j++) {
+      let [r, g, b] = [data[i], data[i + 1], data[i + 2]];
+      ZXing.HEAPU8[this.imageBuffer + j] = Math.trunc((r + g + b) / 3);
     }
     let err = ZXing._decode_qr(this.decodeCallback);
   constructor(opts) {
     super();
     this.video = this._configureVideo(opts);
+    this.mirror = (opts.mirror !== false);
+    this.backgroundScan = opts.backgroundScan || false;
+    this._continuous = (opts.continuous !== false);
+    this._analyzer = new Analyzer(this.video);
+    this._camera = null;
+    let captureImage = opts.captureImage || false;
+    let scanPeriod = opts.scanPeriod || 1;
+    let refractoryPeriod = opts.refractoryPeriod || (5 * 1000);
+    this._scanner = new ScanProvider(this, this._analyzer, captureImage, scanPeriod, refractoryPeriod);
+    this._fsm = this._createStateMachine();
     Visibility.change((e, state) => {
       if (state === 'visible') {
       }
     });
+    this.addListener('active', () => {
+      this.video.classList.remove('inactive');
+      this.video.classList.add('active');
+    });
+    this.addListener('inactive', () => {
+      this.video.classList.remove('active');
+      this.video.classList.add('inactive');
     });
     this.emit('inactive');
   }
+  scan() {
+    return this._scanner.scan();
+  }
   async start(camera = null) {
     if (this._fsm.can('start')) {
       await this._fsm.start(camera);
     }
   }
+  async stop() {
     if (this._fsm.can('stop')) {
+      await this._fsm.stop();
     }
   }
+  set captureImage(capture) {
+    this._scanner.captureImage = capture;
+  }
+  get captureImage() {
+    return this._scanner.captureImage;
+  }
+  set scanPeriod(period) {
+    this._scanner.scanPeriod = period;
+  }
+  get scanPeriod() {
+    return this._scanner.scanPeriod;
+  }
+  set refractoryPeriod(period) {
+    this._scanner.refractoryPeriod = period;
+  }
+  get refractoryPeriod() {
+    return this._scanner.refractoryPeriod;
+  }
+  set continuous(continuous) {
+    this._continuous = continuous;
+    if (continuous && this._fsm.current === 'active') {
+      this._scanner.start();
     } else {
+      this._scanner.stop();
     }
   }
+  get continuous() {
+    return this._continuous;
+  }
+  set mirror(mirror) {
+    this._mirror = mirror;
+    if (mirror) {
+      this.video.style.MozTransform = 'scaleX(-1)';
+      this.video.style.webkitTransform = 'scaleX(-1)';
+      this.video.style.OTransform = 'scaleX(-1)';
+      this.video.style.msFilter = 'FlipH';
+      this.video.style.filter = 'FlipH';
+      this.video.style.transform = 'scaleX(-1)';
+    } else {
+      this.video.style.MozTransform = null;
+      this.video.style.webkitTransform = null;
+      this.video.style.OTransform = null;
+      this.video.style.msFilter = null;
+      this.video.style.filter = null;
+      this.video.style.transform = null;
+    }
+  }
+  get mirror() {
+    return this._mirror;
+  }
   async _enableScan(camera) {
     this._camera = camera || this._camera;
     if (!this._camera) {
+      throw new Error('Camera is not defined.');
     }
     let streamUrl = await this._camera.start();
     this.video.src = streamUrl;
+    if (this._continuous) {
+      this._scanner.start();
+    }
   }
   _disableScan() {
     this.video.src = '';
+    if (this._scanner) {
+      this._scanner.stop();
     }
     if (this._camera) {
   _configureVideo(opts) {
     if (opts.video) {
       if (opts.video.tagName !== 'VIDEO') {
+        throw new Error('Video must be a <video> element.');
       }
     }
     var video = opts.video || document.createElement('video');
     video.setAttribute('autoplay', 'autoplay');
     return video;
   }
+  _createStateMachine() {
+    return StateMachine.create({
+      initial: 'stopped',
+      events: [
+        {
+          name: 'start',
+          from: 'stopped',
+          to: 'started'
+        },
+        {
+          name: 'stop',
+          from: ['started', 'active', 'inactive'],
+          to: 'stopped'
+        },
+        {
+          name: 'activate',
+          from: ['started', 'inactive'],
+          to: ['active', 'inactive'],
+          condition: function (options) {
+            if (Visibility.state() === 'visible' || this.backgroundScan) {
+              return 'active';
+            } else {
+              return 'inactive';
+            }
+          }
+        },
+        {
+          name: 'deactivate',
+          from: ['started', 'active'],
+          to: 'inactive'
+        }
+      ],
+      callbacks: {
+        onenteractive: async (options) => {
+          await this._enableScan(options.args[0]);
+          this.emit('active');
+        },
+        onleaveactive: () => {
+          this._disableScan();
+          this.emit('inactive');
+        },
+        onenteredstarted: async (options) => {
+          await this._fsm.activate(options.args[0]);
+        }
+      }
+    });
+  }
 }
 module.exports = Scanner;

Readme

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.

NPM

npm install --save instascan

var 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">
      var scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content, image) {
        console.log(content);
      });

      Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        }
      });
    </script>
  </body>
</html>

API

var scanner = new Instascan.Scanner(opts)

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 <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.
opts.mirror: Whether to horizontally mirror the video preview. This is helpful when trying to scan a QR code with a user-facing camera. Default true.
opts.captureImage: Whether to include the scanned image data as part of the scan result. See the scan event for format details. Default false.
opts.backgroundScan: 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 false.
opts.refractoryPeriod: Only applies to continuous mode. The period, in milliseconds, before the same QR code will be recognized in succession. Default 5000.
opts.scanPeriod: 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).

scanner.start(camera)

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.

scanner.stop()

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

var result = scanner.scan()

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.

scanner.addListener('scan', callback)

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.

scanner.addListener('active', callback)

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 ()

scanner.addListener('inactive', callback)

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 ()

Instascan.Camera.getCameras()

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

camera.id

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

camera.name

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.