Use Babel and ES7 async/await features.

gulpfile.js

@@ -8,26 +8,33 @@ var babelify = require('babelify');
 
 gulp.task('default', ['build', 'watch']);
 
-gulp.task('dist', function () {
-  return browserify('./export.js', { noParse: [require.resolve('./src/zxing')] })
-    .transform(babelify, { ignore: /zxing\.js$/i, presets: ['es2015'] })
+gulp.task('watch', function () {
+  gulp.watch('./src/*.js', ['build']);
+  gulp.watch('./*.js', ['build']);
+});
+
+function build(file) {
+  return browserify(file, {
+      noParse: [require.resolve('./src/zxing')]
+    })
+    .transform(babelify, {
+      ignore: /zxing\.js$/i,
+      presets: ['es2015'],
+      plugins: ['syntax-async-functions', 'transform-regenerator']
+    })
     .bundle()
-    .pipe(source('instascan.js'))
+    .pipe(source('instascan.js'));
+}
+
+gulp.task('dist', function () {
+  return build('./export.js')
     .pipe(buffer())
     .pipe(uglify())
     .pipe(rename({ suffix: '.min' }))
     .pipe(gulp.dest('./dist/'));
 });
 
-gulp.task('watch', function () {
-  gulp.watch('./src/*.js', ['build']);
-  gulp.watch('./*.js', ['build']);
-});
-
 gulp.task('build', function () {
-  return browserify('./export.js', { noParse: [require.resolve('./src/zxing')] })
-    .transform(babelify, { ignore: /zxing\.js$/i, presets: ['es2015'] })
-    .bundle()
-    .pipe(source('instascan.js'))
+  return build('./export.js')
     .pipe(gulp.dest('./dist/'));
 });

index.js

@@ -1,3 +1,6 @@
+require('babel-polyfill');
+require('webrtc-adapter');
+
 var Instascan = {
   Scanner: require('./src/scanner'),
   Camera: require('./src/camera')

package.json

@@ -30,6 +30,8 @@
   },
   "homepage": "https://github.com/schmich/instascan",
   "devDependencies": {
+    "babel-plugin-syntax-async-functions": "^6.8.0",
+    "babel-plugin-transform-regenerator": "^6.9.0",
     "babel-preset-es2015": "^6.9.0",
     "babelify": "^7.3.0",
     "browserify": "^13.0.1",
@@ -40,7 +42,9 @@
     "vinyl-source-stream": "^1.1.0"
   },
   "dependencies": {
+    "babel-polyfill": "^6.9.1",
     "javascript-state-machine": "^2.3.5",
-    "visibilityjs": "^1.2.3"
+    "visibilityjs": "^1.2.3",
+    "webrtc-adapter": "^1.4.0"
   }
 }

src/camera.js

@@ -10,7 +10,7 @@ class Camera {
     this.stream = null;
   }
 
-  start(callback) {
+  async start() {
     var constraints = {
       audio: false,
       video: {
@@ -24,13 +24,8 @@ class Camera {
       }
     };
 
-    navigator.webkitGetUserMedia(constraints, stream => {
-      this.stream = stream;
-      var streamUrl = window.URL.createObjectURL(stream);
-      callback(null, streamUrl);
-    }, err => {
-      callback(err, null);
-    });
+    this.stream = await navigator.mediaDevices.getUserMedia(constraints);
+    return window.URL.createObjectURL(this.stream);
   }
 
   stop() {
@@ -45,18 +40,12 @@ class Camera {
     this.stream = null;
   }
 
-  static getCameras(callback) {
-    navigator.mediaDevices.enumerateDevices()
-      .then(function (devices) {
-        var results = devices
-          .filter(d => d.kind === 'videoinput')
-          .map(d => new Camera(d.deviceId, cleanLabel(d.label)));
-
-        callback(null, results);
-      })
-      .catch(function (err) {
-        callback(err, null);
-      });
+  static async getCameras() {
+    var devices = await navigator.mediaDevices.enumerateDevices();
+
+    return devices
+      .filter(d => d.kind === 'videoinput')
+      .map(d => new Camera(d.deviceId, cleanLabel(d.label)));
   }
 }
 

src/scanner.js

@@ -16,43 +16,47 @@ class ActiveScan {
 
   start() {
     this.active = true;
-    requestAnimationFrame(() => this.scan());
+    requestAnimationFrame(() => this._scan());
   }
 
   stop() {
     this.active = false;
   }
 
-  scan() {
+  _scan() {
     if (!this.active) {
       return;
     }
 
-    requestAnimationFrame(() => this.scan());
+    requestAnimationFrame(() => this._scan());
 
     if (++this.frameCount !== this.scanPeriod) {
       return;
     } else {
       this.frameCount = 0;
     }
 
-    this.analyzer.analyze((result, canvas) => {
-      if (result === this.lastResult) {
-        return;
-      }
+    let analysis = this.analyzer.analyze();
+    if (!analysis) {
+      return;
+    }
 
-      clearTimeout(this.refractoryTimeout);
-      this.refractoryTimeout = setTimeout(() => {
-        this.lastResult = null;
-      }, this.refractoryPeriod);
+    let { result, canvas } = analysis;
+    if (!result || result === this.lastResult) {
+      return;
+    }
 
-      let image = this.captureImage ? canvas.toDataURL('image/webp', 0.8) : null;
+    clearTimeout(this.refractoryTimeout);
+    this.refractoryTimeout = setTimeout(() => {
+      this.lastResult = null;
+    }, this.refractoryPeriod);
 
-      this.lastResult = result;
-      setTimeout(() => {
-        this.emitter.emit('scan', result, image);
-      }, 0);
-    });
+    let image = this.captureImage ? canvas.toDataURL('image/webp', 0.8) : null;
+
+    this.lastResult = result;
+    setTimeout(() => {
+      this.emitter.emit('scan', result, image);
+    }, 0);
   }
 }
 
@@ -80,9 +84,9 @@ class Analyzer {
     });
   }
 
-  analyze(callback) {
+  analyze() {
     if (!this.video.videoWidth) {
-      return;
+      return null;
     }
 
     if (!this.imageBuffer) {
@@ -99,7 +103,7 @@ class Analyzer {
 
       this.canvasContext = this.canvas.getContext('2d');
       this.imageBuffer = ZXing._resize(this.sensorWidth, this.sensorHeight);
-      return;
+      return null;
     }
 
     this.canvasContext.drawImage(
@@ -117,13 +121,15 @@ class Analyzer {
 
     let err = ZXing._decode_qr(this.decodeCallback);
     if (err) {
-      return;
+      return null;
     }
 
     let result = window.zxDecodeResult;
     if (result != null) {
-      callback(result, this.canvas);
+      return { result: result, canvas: this.canvas };
     }
+
+    return null;
   }
 }
 
@@ -168,13 +174,13 @@ class Scanner extends EventEmitter {
           this._disableScan();
           this.emit('inactive');
         },
-        onleavestate: (event, from, to, camera) => {
+        onleavestate: async (event, from, to, camera) => {
           if (to === 'active') {
             if (Visibility.state() !== 'visible' && !this.backgroundScan) {
               return false;
             }
 
-            return this._enableScan(camera);
+            return await this._enableScan(camera);
           }
         },
         onstarted: (event, from, to, camera) => this._fsm.activate(camera)
@@ -208,25 +214,21 @@ class Scanner extends EventEmitter {
     }
   }
 
-  _enableScan(camera) {
+  async _enableScan(camera) {
     this._camera = camera || this._camera;
     if (!this._camera) {
       return false;
     }
 
-    this._camera.start((err, streamUrl) => {
-      if (err) {
-        this._fsm.transition.cancel();
-        this.emit('error', err);
-      } else {
-        this.video.src = streamUrl;
-        this._scan = new ActiveScan(this, this.analyzer, this.captureImage, this.scanPeriod, this.refractoryPeriod);
-        this._scan.start();
-        this._fsm.transition();
-      }
-    });
-
-    return StateMachine.ASYNC;
+    try {
+      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();
+    } catch (err) {
+      this.emit('error', err);
+      return false;
+    }
   }
 
   _disableScan() {