data

client/src/components/QRScanner.vue

@@ -4,6 +4,7 @@
       <div class="qr-scanner__camera">
         <i class="fas fa-camera-retro"></i>
         {{ $t("scanner.title") }}
+        <pre>{{ data }}</pre>
       </div>
       <div v-if="hasFlash" class="qr-scanner__flash" @click="toggleFlash">
         <i v-if="flashOn" class="fas fa-bolt"></i>
@@ -32,7 +33,8 @@ export default Vue.extend({
       flashOn: false,
       scanner: undefined,
       timeout: -1,
-      timeoutMs: 10 * 1000
+      timeoutMs: 10 * 1000,
+      data: "Loading ..."
     };
   },
   computed: mapState("scan", ["scanning"]),
@@ -66,16 +68,18 @@ export default Vue.extend({
     async initScanner() {
       const stream = await navigator.mediaDevices.getUserMedia({
         video: {
-          facingMode: {
-            ideal: "environment"
-          }
+          facingMode: { ideal: "environment" },
+          aspectRatio: { ideal: 9 / 16 }
         }
       });
       const { deviceId } = stream.getVideoTracks()[0].getSettings();
-      // const cameras = await navigator.mediaDevices.enumerateDevices();
-      // const camera = cameras[0];
-      // // Use the second camera if available
-      // const camera = cameras[Math.min(cameras.length, 2) - 1];
+      this.data = `Device ID: ${deviceId}\nTracks: ${
+        stream.getVideoTracks().length
+      }\nSettings: ${JSON.stringify(
+        stream.getVideoTracks()[0].getSettings(),
+        null,
+        2
+      )}`;
       const { qrscan } = this.$refs;
       if (!deviceId || !qrscan) return;