fix(camera-prop): unneccesary new stream requests

When an object value is passed to the `camera` prop it might change
be reference without actually changing by value causing unneccesary
camera stream requests.

For templates like this:

    <qrcode-stream :camera="{}"></qrcode-stream>

Each re-evaluation will generate a new empty object instance with a
different reference. The new input for `camera` is therefore
strictly different (`===`) from the previous although the
constraints haven't actually changed.

Since this shouldn't cause a new camera stream to be requested,
new and old values for `camera` are deeply compared now.

See #69

Author: gruhn

config/webpack.config.common.js

@@ -20,6 +20,7 @@ module.exports = merge(base, {
     'jsqr': 'jsqr',
     'babel-runtime': 'babel-runtime',
     'webrtc-adapter': 'webrtc-adapter',
+    'lodash': 'lodash',
   },
   plugins: [
     new webpack.optimize.UglifyJsPlugin({

package.json

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

src/components/QrcodeReader.vue

@@ -36,7 +36,7 @@
 <script>
 import { keepScanning } from '../misc/scanner.js'
 import Camera from '../misc/camera.js'
-import { isBoolean } from '../misc/util.js'
+import isBoolean from 'lodash/isBoolean'
 import QrcodeDropZone from './QrcodeDropZone.vue'
 import CommonAPI from '../mixins/CommonAPI.vue'
 

src/components/QrcodeStream.vue

@@ -31,8 +31,11 @@
 <script>
 import { keepScanning } from '../misc/scanner.js'
 import Camera from '../misc/camera.js'
-import { isBoolean, emptyObject } from '../misc/util.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 {
 
@@ -46,7 +49,7 @@ export default {
 
     camera: {
       type: [Object, Boolean],
-      default: emptyObject,
+      default: stubObject,
     },
 
     track: {
@@ -59,6 +62,7 @@ export default {
     return {
       cameraInstance: null,
       destroyed: false,
+      constraints: {},
     }
   },
 
@@ -87,30 +91,6 @@ export default {
       }
     },
 
-    /**
-     * Full constraints object which is passed to `getUserMedia` to request a
-     * camera stream. Properties define if a certain camera is adequate or not.
-     */
-    constraints () {
-      if (isBoolean(this.camera)) {
-        return {
-          audio: false,
-          video: this.camera,
-        }
-      } else {
-        return {
-          audio: false,
-          video: {
-            facingMode: { ideal: 'environment' },
-            width: { min: 360, ideal: 640, max: 1920 },
-            height: { min: 240, ideal: 480, max: 1080 },
-
-            ...this.camera,
-          },
-        }
-      }
-    },
-
     trackRepaintFunction () {
       if (this.track === true) {
         return function (location, ctx) {
@@ -159,13 +139,40 @@ export default {
       }
     },
 
-    constraints: {
+    camera: {
       deep: true,
-
-      handler () {
-        this.$emit('init', this.init())
+      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())
+    },
   },
 
   mounted () {

src/misc/util.js

@@ -5003,6 +5003,11 @@ lodash@^4.0.0, lodash@^4.0.1, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.3.0, lod
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
+lodash@^4.17.11:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
+  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+
 lodash@^4.2.1:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"