iOS 11, Webpack and moar

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": ["last 5 versions", "safari >= 7"]
+      }
+    }]
+  ]
+}

.gitignore

@@ -1,5 +1,7 @@
 node_modules/
 dist/
+lib/
 
+.DS_Store
 .idea/
 yarn.lock

.npmignore

@@ -0,0 +1,4 @@
+assets
+deploy
+docs
+node_modules

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
   - '6'
 install: npm install
-script: gulp release
+script: node_modules/.bin/gulp release
 env:
   global:
     - COMMIT_AUTHOR_NAME: "'Chris Schmich'"

README.md

@@ -5,6 +5,8 @@ Real-time webcam-driven HTML5 QR code scanner. [Try the live demo](https://schmi
 
 *Note:* Chrome requires HTTPS when using the WebRTC API. Any pages using this library should be served over HTTPS.
 
+*Note:* Some browsers (like Edge) require [WebRTC Adapter shim](https://github.com/webrtc/adapter).
+
 ### NPM
 
 `npm install --save instascan`

docs/index.html

@@ -3,7 +3,7 @@
     <title>Instascan &ndash; Demo</title>
     <link rel="icon" type="image/png" href="favicon.png">
     <link rel="stylesheet" href="style.css">
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.3.3/adapter.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/5.0.4/adapter.min.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
     <script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
   </head>

export.js

@@ -1 +1 @@
-window.Instascan = require('./index');
+window.Instascan = require('./src/index');

gulpfile.js

@@ -5,6 +5,29 @@ var source = require('vinyl-source-stream');
 var buffer = require('vinyl-buffer');
 var uglify = require('gulp-uglify');
 var babelify = require('babelify');
+var babel = require('gulp-babel');
+var transform = require('gulp-transform');
+
+var babelOptions = {
+  ignore: /zxing\.js$/i,
+  presets: ['env'],
+  plugins: ['transform-runtime']
+};
+
+var build = function (file) {
+  return browserify(file, { noParse: [ require.resolve('./src/vendor/zxing') ] })
+    .transform(babelify, babelOptions)
+    .bundle()
+    .pipe(source('instascan.js'));
+}
+
+var mockImportsInZXing = function (content, file) {
+  if (/zxing\.js$/i.test(file.relative)) {
+    return content.replace(/require\([^)]+\)/g, '{}');
+  } else {
+    return content;
+  }
+};
 
 gulp.task('default', ['build', 'watch']);
 
@@ -13,28 +36,22 @@ gulp.task('watch', function () {
   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'));
-}
+gulp.task('build-package', function () {
+  return gulp.src('./src/**/*.js')
+    .pipe(transform('utf-8', mockImportsInZXing))
+    .pipe(babel(babelOptions))
+    .pipe(gulp.dest('./lib/'));
+});
 
-gulp.task('release', function () {
+gulp.task('build', ['build-package'], function () {
   return build('./export.js')
-    .pipe(buffer())
-    .pipe(uglify())
-    .pipe(rename({ suffix: '.min' }))
     .pipe(gulp.dest('./dist/'));
 });
 
-gulp.task('build', function () {
+gulp.task('release', ['build-package'], function () {
   return build('./export.js')
+    .pipe(buffer())
+    .pipe(uglify())
+    .pipe(rename({ suffix: '.min' }))
     .pipe(gulp.dest('./dist/'));
 });

package.json

@@ -1,14 +1,13 @@
 {
   "name": "instascan",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Webcam-driven QR code scanner.",
-  "main": "index.js",
+  "main": "lib/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "files": [
-    "src/",
-    "index.js"
+    "src/"
   ],
   "repository": {
     "type": "git",
@@ -31,21 +30,21 @@
   },
   "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",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.6.0",
     "babelify": "^7.3.0",
-    "browserify": "^13.0.1",
+    "browserify": "^14.4.0",
     "gulp": "^3.9.1",
+    "gulp-babel": "^7.0.0",
     "gulp-rename": "^1.2.2",
-    "gulp-uglify": "^1.5.4",
+    "gulp-transform": "^3.0.5",
+    "gulp-uglify": "^3.0.0",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0"
   },
   "dependencies": {
-    "babel-polyfill": "^6.9.1",
-    "fsm-as-promised": "^0.13.0",
-    "visibilityjs": "^1.2.3",
-    "webrtc-adapter": "^1.4.0"
+    "babel-runtime": "^6.26.0",
+    "fsm-as-promised": "^0.14.5",
+    "visibilityjs": "^1.2.4"
   }
 }

src/camera.js

@@ -18,21 +18,15 @@ class Camera {
   }
 
   async start() {
-    let constraints = {
-      audio: false,
-      video: {
-        mandatory: {
-          sourceId: this.id,
-          minWidth: 600,
-          maxWidth: 800,
-          minAspectRatio: 1.6
-        },
-        optional: []
-      }
-    };
-
     this._stream = await Camera._wrapErrors(async () => {
-      return await navigator.mediaDevices.getUserMedia(constraints);
+      return navigator.mediaDevices.getUserMedia({
+        audio: false,
+        video: {
+          deviceId: {
+            exact: this.id
+          }
+        }
+      });
     });
 
     return this._stream;
@@ -54,23 +48,21 @@ class Camera {
     await this._ensureAccess();
 
     let devices = await navigator.mediaDevices.enumerateDevices();
+
     return devices
       .filter(d => d.kind === 'videoinput')
       .map(d => new Camera(d.deviceId, cameraName(d.label)));
   }
 
   static async _ensureAccess() {
-    return await this._wrapErrors(async () => {
-      let access = await navigator.mediaDevices.getUserMedia({ video: true });
-      for (let stream of access.getVideoTracks()) {
-        stream.stop();
-      }
+    return this._wrapErrors(async () => {
+      await navigator.mediaDevices.getUserMedia({ video: true });
     });
   }
 
   static async _wrapErrors(fn) {
     try {
-      return await fn();
+      return fn();
     } catch (e) {
       if (e.name) {
         throw new MediaError(e.name);

src/index.js

@@ -0,0 +1,6 @@
+const Instascan = {
+  Scanner: require('./scanner'),
+  Camera: require('./camera')
+};
+
+module.exports = Instascan;

src/scanner.js

@@ -1,5 +1,5 @@
 const EventEmitter = require('events');
-const ZXing = require('./zxing')();
+const ZXing = require('./vendor/zxing')();
 const Visibility = require('visibilityjs');
 const StateMachine = require('fsm-as-promised');
 
@@ -316,7 +316,10 @@ class Scanner extends EventEmitter {
     }
 
     let video = opts.video || document.createElement('video');
-    video.setAttribute('autoplay', 'autoplay');
+
+    video.setAttribute('autoplay', true);
+    video.setAttribute('playsinline', true);
+    video.setAttribute('muted', true);
 
     return video;
   }