next camera

VictorWinberg · Aug 18, 2024 · d1ebeff · d1ebeff
1 parent a4498a1
commit d1ebeff
Showing 1 changed file with 21 additions and 7 deletions.
diff --git a/client/src/components/QRScanner.vue b/client/src/components/QRScanner.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="qr-scanner-wrapper">
     <div class="qr-scanner">
-      <div class="qr-scanner__camera">
+      <div class="qr-scanner__camera" @click="nextCamera">
         <i class="fas fa-camera-retro"></i>
         {{ $t("scanner.title") }}
       </div>
@@ -32,7 +32,8 @@ export default Vue.extend({
       flashOn: false,
       scanner: undefined,
       timeout: -1,
-      timeoutMs: 10 * 1000
+      timeoutMs: 10 * 1000,
+      cameraIndex: 0
     };
   },
   computed: mapState("scan", ["scanning"]),
@@ -65,12 +66,19 @@ export default Vue.extend({
     ...mapActions("scan", ["handleQR"]),
     async initScanner() {
       await navigator.mediaDevices.getUserMedia({
-        video: { facingMode: "environment" }
+        audio: false,
+        video: {
+          facingMode: { ideal: "environment" },
+          aspectRatio: { ideal: 1.7777777778 },
+          frameRate: { ideal: 60, min: 30 },
+          zoom: 1
+        }
       });
-      const cameras = await navigator.mediaDevices.enumerateDevices();
-      const camera = cameras[0];
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const cameras = devices.filter(device => device.kind === "videoinput");
+      const { deviceId } = cameras[this.cameraIndex % cameras.length];
       const { qrscan } = this.$refs;
-      if (!camera || !qrscan) return;
+      if (!deviceId || !qrscan) return;
 
       this.scanner = new QRScanner(
         qrscan,
@@ -83,7 +91,7 @@ export default Vue.extend({
         },
         QRScanner._onDecodeError,
         QRScanner._calculateScanRegion,
-        camera.deviceId
+        "755A2BC07E2D6465D7B5E90BD152774DAC384FEE"
       );
       await this.scanner.start();
       this.hasFlash = await this.scanner.hasFlash();
@@ -97,6 +105,12 @@ export default Vue.extend({
       if (!this.scanner) return;
       await this.scanner.toggleFlash();
       this.flashOn = !this.flashOn;
+    },
+    async nextCamera() {
+      if (!this.scanner) return;
+      this.cameraIndex++;
+      await this.scanner.stop();
+      await this.initScanner();
     }
   }
 });