refactor(:camera): accept String instead of Object

The camera provides a way to turn the camera off while the
component is still mounted. It also allows customization of the
MediaTrackConstraints object passed to `getUserMedia`. This however
makes this prop:

* harder to understand
* more error prone (Safari breaks for certain inputs)
* needlessly complex (only switching facingMode is really required)

To preserve the main functionality and make it simpler to use,
camera now accepts one of the following string values:

* "rear"  : use rear camera
* "front" : use front camera
* "off"   : turn camera off

BREAKING CHANGE: `:camera` prop does not accept objects or boolean
anymore.

Author: gruhn

config/webpack.config.common.js

@@ -1,33 +1,32 @@
-var webpack = require('webpack')
-var merge = require('webpack-merge')
-var base = require('./webpack.config.base')
-var path = require('path')
+var webpack = require("webpack");
+var merge = require("webpack-merge");
+var base = require("./webpack.config.base");
+var path = require("path");
 
-var outputFile = 'vue-qrcode-reader'
-var globalName = 'VueQrcodeReader'
+var outputFile = "vue-qrcode-reader";
+var globalName = "VueQrcodeReader";
 
 module.exports = merge(base, {
   output: {
-    path: path.resolve(__dirname, '../dist'),
-    filename: outputFile + '.common.js',
-    libraryTarget: 'commonjs2',
+    path: path.resolve(__dirname, "../dist"),
+    filename: outputFile + ".common.js",
+    libraryTarget: "commonjs2"
   },
-  target: 'node',
+  target: "node",
   externals: {
     // Put external libraries like lodash here
     // With their package name
     // Example: 'lodash': 'lodash'
-    'jsqr': 'jsqr',
-    'babel-runtime': 'babel-runtime',
-    'webrtc-adapter': 'webrtc-adapter',
-    'lodash': 'lodash',
+    jsqr: "jsqr",
+    "babel-runtime": "babel-runtime",
+    "webrtc-adapter": "webrtc-adapter"
   },
   plugins: [
     new webpack.optimize.UglifyJsPlugin({
       compress: {
-        warnings: true,
+        warnings: true
       },
-      mangle: true,
-    }),
-  ],
-})
+      mangle: true
+    })
+  ]
+});

package.json

@@ -78,7 +78,6 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "jsqr": "^1.1.0",
-    "lodash": "^4.17.11",
     "webrtc-adapter": "^6.2.1"
   }
 }

src/components/QrcodeStream.vue

@@ -33,10 +33,6 @@ import { keepScanning } from "../misc/scanner.js";
 import { thinSquare } from "../misc/track-func.js";
 import Camera from "../misc/camera.js";
 import CommonAPI from "../mixins/CommonAPI.vue";
-import isEqual from "lodash/isEqual";
-import isBoolean from "lodash/isBoolean";
-import isObject from "lodash/isObject";
-import stubObject from "lodash/stubObject";
 
 export default {
   mixins: [CommonAPI],
@@ -48,8 +44,12 @@ export default {
     },
 
     camera: {
-      type: [Object, Boolean],
-      default: stubObject
+      type: String,
+      default: "rear",
+
+      validator(camera) {
+        return ["rear", "front", "off"].includes(camera);
+      }
     },
 
     track: {
@@ -62,7 +62,6 @@ export default {
     return {
       cameraInstance: null,
       destroyed: false,
-      constraints: {},
       stopScanning: () => {}
     };
   },
@@ -72,7 +71,7 @@ export default {
       return (
         this.paused === false &&
         this.destroyed === false &&
-        this.constraints.video !== false
+        this.camera !== "off"
       );
     },
 
@@ -100,6 +99,32 @@ export default {
       } else {
         return this.track;
       }
+    },
+
+    constraints() {
+      const base = {
+        audio: false,
+        video: {
+          width: { min: 360, ideal: 640, max: 1920 },
+          height: { min: 240, ideal: 480, max: 1080 }
+        }
+      };
+
+      switch (this.camera) {
+        case "rear":
+          base.video.facingMode = { ideal: "environment" };
+
+          return base;
+        case "front":
+          base.video.facingMode = { exact: "user" };
+
+          return base;
+        case "off":
+          return undefined;
+
+        default:
+          return undefined;
+      }
     }
   },
 
@@ -121,37 +146,6 @@ export default {
       }
     },
 
-    camera: {
-      deep: true,
-      immediate: true,
-
-      handler(camera, oldValue) {
-        const deeplyEqual = isEqual(camera, oldValue);
-
-        if (deeplyEqual) {
-          // object reference changed but constraints are actually the same
-          return;
-        } else if (isBoolean(camera)) {
-          this.constraints = {
-            audio: false,
-            video: camera
-          };
-        } else if (isObject(camera)) {
-          this.constraints = {
-            audio: false,
-            video: {
-              facingMode: { ideal: "environment" },
-              width: { min: 360, ideal: 640, max: 1920 },
-              height: { min: 240, ideal: 480, max: 1080 },
-
-              // overrides properties above if given
-              ...camera
-            }
-          };
-        }
-      }
-    },
-
     constraints() {
       this.$emit("init", this.init());
     }
@@ -171,7 +165,7 @@ export default {
     async init() {
       this.beforeResetCamera();
 
-      if (this.constraints.video === false) {
+      if (this.constraints === undefined) {
         this.cameraInstance = null;
       } else {
         this.cameraInstance = await Camera(this.constraints, this.$refs.video);