From b09ded15a882a4b114da88b06a547015f74be496 Mon Sep 17 00:00:00 2001
From: Niklas Gruhn <niklas@gruhn.me>
Date: Fri, 12 Jun 2020 13:41:25 +0200
Subject: [PATCH] fix: narrow down camera selection

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
media constraints don't allow us to specify which camera we want exactly.
However, we can obtain a list of all video input devices with

  navigator.mediaDevices.enumerateDevices()

Picking the first entry as the default front camera and the last entry
as the default rear camera seems to be a valid heuristic.

Issue: #179
---
 demo.html                       |  6 ++--
 src/components/QrcodeStream.vue | 43 +++---------------------
 src/misc/camera.js              | 59 ++++++++++++++++++++++++++++++---
 3 files changed, 63 insertions(+), 45 deletions(-)

diff --git a/demo.html b/demo.html
index 16249c51..03f5164a 100644
--- a/demo.html
+++ b/demo.html
@@ -8,8 +8,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <script src="https://unpkg.com/vue@2/dist/vue.min.js"></script>
-    <script src="https://unpkg.com/vue-qrcode-reader@2/dist/vue-qrcode-reader.browser.js"></script>
-    <link rel="stylesheet" href="https://unpkg.com/vue-qrcode-reader@2/dist/vue-qrcode-reader.css">
+    <script src="./dist/vue-qrcode-reader.browser.js"></script>
+    <link rel="stylesheet" href="./dist/vue-qrcode-reader.css">
 
     <style>
       p {
@@ -33,7 +33,7 @@
         {{ errorMessage }}
       </p>
 
-      <qrcode-stream :torch="true" @init="onInit"></qrcode-stream>
+      <qrcode-stream @decode="onDecode" camera="rear" @init="onInit"></qrcode-stream>
     </div>
   </body>
   <script>
diff --git a/src/components/QrcodeStream.vue b/src/components/QrcodeStream.vue
index c155099b..7327a345 100644
--- a/src/components/QrcodeStream.vue
+++ b/src/components/QrcodeStream.vue
@@ -100,36 +100,6 @@ 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 "auto":
-          base.video.facingMode = { ideal: "environment" };
-
-          return base;
-        case "rear":
-          base.video.facingMode = { exact: "environment" };
-
-          return base;
-        case "front":
-          base.video.facingMode = { exact: "user" };
-
-          return base;
-        case "off":
-          return undefined;
-
-        default:
-          return undefined;
-      }
     }
   },
 
@@ -175,20 +145,17 @@ export default {
       const promise = (async () => {
         this.beforeResetCamera();
 
-        if (this.constraints === undefined) {
+        if (this.camera === "off") {
           this.cameraInstance = null;
 
           return {
             capabilities: {}
           };
         } else {
-          this.cameraInstance = await Camera(
-            this.constraints,
-            this.$refs.video,
-            {
-              torch: this.torch
-            }
-          );
+          this.cameraInstance = await Camera(this.$refs.video, {
+            camera: this.camera,
+            torch: this.torch
+          });
 
           const capabilities = this.cameraInstance.getCapabilities();
 
diff --git a/src/misc/camera.js b/src/misc/camera.js
index dff3f1c4..76bf71a4 100644
--- a/src/misc/camera.js
+++ b/src/misc/camera.js
@@ -24,6 +24,46 @@ class Camera {
   }
 }
 
+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
+  // media constraints don't allow us to specify which camera we want exactly.
+  // However, explicitly picking the first entry in the list of all videoinput
+  // devices for as the default front camera and the last entry as the default
+  // rear camera seems to be a workaround.
+  const devices = (await navigator.mediaDevices.enumerateDevices()).filter(
+    ({ kind }) => kind === "videoinput"
+  );
+
+  if (devices.length > 2) {
+    const frontCamera = devices[0];
+    const rearCamera = devices[devices.length - 1];
+
+    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 {
+    switch (camera) {
+      case "auto":
+        return { facingMode: { ideal: "environment" } };
+      case "rear":
+        return { facingMode: { exact: "environment" } };
+      case "front":
+        return { facingMode: { exact: "user" } };
+      default:
+        return undefined;
+    }
+  }
+};
+
 const INSECURE_CONTEXT = window.isSecureContext !== true;
 
 const STREAM_API_NOT_SUPPORTED = !(
@@ -34,13 +74,13 @@ const STREAM_API_NOT_SUPPORTED = !(
 
 let streamApiShimApplied = false;
 
-export default async function(constraints, videoEl, advancedConstraints) {
+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.
-  // So although `getUserMedia` already should have a build-in mechanism to
+  // So although `getUserMedia` already should have a built-in mechanism to
   // detect insecure context (by throwing `NotAllowedError`), we have to do a
-  // manual check before even calling `getUserMedia`.
+  // manual check before even calling `getUserMedia`.
   if (INSECURE_CONTEXT) {
     throw new InsecureContextError();
   }
@@ -49,11 +89,22 @@ export default async function(constraints, videoEl, advancedConstraints) {
     throw new StreamApiNotSupportedError();
   }
 
+  // This is a brower API only shim. It patches the global window object which
+  // is not available during SSR. So we lazily apply this shim at runtime.
   if (streamApiShimApplied === false) {
     adapterFactory({ window });
     streamApiShimApplied = true;
   }
 
+  const constraints = {
+    audio: false,
+    video: {
+      width: { min: 360, ideal: 640, max: 1920 },
+      height: { min: 240, ideal: 480, max: 1080 },
+      ...(await narrowDownFacingMode(camera))
+    }
+  };
+
   const stream = await navigator.mediaDevices.getUserMedia(constraints);
 
   if (videoEl.srcObject !== undefined) {
@@ -70,7 +121,7 @@ export default async function(constraints, videoEl, advancedConstraints) {
 
   await eventOn(videoEl, "loadeddata");
 
-  if (advancedConstraints.torch) {
+  if (torch) {
     const [track] = stream.getVideoTracks();
 
     try {