fix: adjust camera selection fix

Issue: #179

Author: gruhn

demo.html

@@ -33,7 +33,7 @@
         {{ errorMessage }}
       </p>
 
-      <qrcode-stream @decode="onDecode" @init="onInit"></qrcode-stream>
+      <qrcode-stream @decode="onDecode" camera="rear" @init="onInit"></qrcode-stream>
     </div>
   </body>
   <script>

src/components/QrcodeStream.vue

@@ -100,12 +100,6 @@ export default {
       } else {
         return this.track;
       }
-    },
-
-    facingMode() {
-      if (this.camera === "front") return "user";
-      else if (this.camera === "rear") return "environment";
-      else return undefined;
     }
   },
 
@@ -159,7 +153,7 @@ export default {
           };
         } else {
           this.cameraInstance = await Camera(this.$refs.video, {
-            facingMode: this.facingMode,
+            camera: this.camera,
             torch: this.torch
           });
 

src/misc/camera.js

@@ -24,7 +24,7 @@ class Camera {
   }
 }
 
-const narrowDownFacingMode = async facingMode => {
+const narrowDownFacingMode = async camera => {
   // Modern phones often have multipe front/rear cameras.
   // Sometimes special purpose cameras like the wide-angle camera are picked
   // by default. Those are not optimal for scanning QR codes but standard
@@ -36,17 +36,32 @@ const narrowDownFacingMode = async facingMode => {
     ({ kind }) => kind === "videoinput"
   );
 
-  if (devices.length > 2) {
+  // if (devices.length > 2) {
+  if (false) {
     const frontCamera = devices[0];
     const rearCamera = devices[devices.length - 1];
 
-    if (facingMode === "front") {
-      return { deviceId: { exact: frontCamera } };
-    } else {
-      return { deviceId: { exact: rearCamera } };
+    switch (camera) {
+      case "auto":
+        return { deviceId: { exact: rearCamera.deviceId } };
+      case "rear":
+        return { deviceId: { exact: rearCamera.deviceId } };
+      case "front":
+        return { deviceId: { exact: frontCamera.deviceId } };
+      default:
+        return undefined;
     }
   } else {
-    return { facingMode };
+    switch (camera) {
+      case "auto":
+        return { facingMode: { ideal: "environment" } };
+      case "rear":
+        return { facingMode: { exact: "environment" } };
+      case "front":
+        return { facingMode: { exact: "user" } };
+      default:
+        return undefined;
+    }
   }
 };
 
@@ -60,7 +75,7 @@ const STREAM_API_NOT_SUPPORTED = !(
 
 let streamApiShimApplied = false;
 
-export default async function(videoEl, { facingMode, torch }) {
+export default async function(videoEl, { camera, torch }) {
   // At least in Chrome `navigator.mediaDevices` is undefined when the page is
   // loaded using HTTP rather than HTTPS. Thus `STREAM_API_NOT_SUPPORTED` is
   // initialized with `false` although the API might actually be supported.
@@ -87,7 +102,7 @@ export default async function(videoEl, { facingMode, torch }) {
     video: {
       width: { min: 360, ideal: 640, max: 1920 },
       height: { min: 240, ideal: 480, max: 1080 },
-      ...(await narrowDownFacingMode(facingMode))
+      ...(await narrowDownFacingMode(camera))
     }
   };