From 03ea856e0d0fa959e88456598cbb5490012c0fea Mon Sep 17 00:00:00 2001
From: Victor Winberg <victor.m.winberg@gmail.com>
Date: Thu, 27 Jan 2022 07:39:21 +0100
Subject: [PATCH] Add flash (#324)

* Add flash

* Correct deviceId

* Update QRScanner.vue

* Add padding

* Update QRScanner.vue
---
 client/src/components/QRScanner.vue | 64 ++++++++++++++++++++++-------
 1 file changed, 50 insertions(+), 14 deletions(-)

diff --git a/client/src/components/QRScanner.vue b/client/src/components/QRScanner.vue
index 7b6b3b8f..adda63d0 100644
--- a/client/src/components/QRScanner.vue
+++ b/client/src/components/QRScanner.vue
@@ -4,6 +4,10 @@
       <div class="qr-scanner__camera">
         <i class="fas fa-camera-retro"></i> QR SCAN
       </div>
+      <div v-if="hasFlash" class="qr-scanner__flash" @click="toggleFlash">
+        <i v-if="flashOn" class="fas fa-bolt"></i>
+        <i v-else class="far fa-bolt"></i>
+      </div>
     </div>
     <div class="qrscan"><video id="qrscan"></video></div>
   </div>
@@ -23,6 +27,8 @@ export default Vue.extend({
   name: "QRScanner",
   data() {
     return {
+      hasFlash: false,
+      flashOn: false,
       scanner: undefined,
       timeout: -1,
       timeoutMs: 10 * 1000
@@ -47,18 +53,7 @@ export default Vue.extend({
   mounted() {
     if (!this.scanning) return;
 
-    this.scanner = new QRScanner(document.getElementById("qrscan"), qrcode => {
-      if (qrcode) {
-        this.handleQR(qrcode);
-        this.stopScan();
-        clearTimeout(this.timeout);
-      }
-    });
-    this.scanner.start();
-    this.timeout = window.setTimeout(() => {
-      this.handleQR(null);
-      this.stopScan();
-    }, this.timeoutMs);
+    this.initScanner();
   },
   beforeDestroy() {
     this.scanner && this.scanner.destroy();
@@ -66,7 +61,39 @@ export default Vue.extend({
   },
   methods: {
     ...mapMutations("scan", ["stopScan"]),
-    ...mapActions("scan", ["handleQR"])
+    ...mapActions("scan", ["handleQR"]),
+    async initScanner() {
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const cameras = devices.filter(device => device.kind === "videoinput");
+      const camera = cameras[cameras.length - 1];
+      if (!camera) return;
+
+      this.scanner = new QRScanner(
+        document.getElementById("qrscan"),
+        qrcode => {
+          if (qrcode) {
+            this.handleQR(qrcode);
+            this.stopScan();
+            clearTimeout(this.timeout);
+          }
+        },
+        QRScanner._onDecodeError,
+        QRScanner._calculateScanRegion,
+        camera.deviceId
+      );
+      await this.scanner.start();
+      this.hasFlash = await this.scanner.hasFlash();
+
+      this.timeout = window.setTimeout(() => {
+        this.handleQR(null);
+        this.stopScan();
+      }, this.timeoutMs);
+    },
+    async toggleFlash() {
+      if (!this.scanner) return;
+      await this.scanner.toggleFlash();
+      this.flashOn = !this.flashOn;
+    }
   }
 });
 </script>
@@ -108,7 +135,16 @@ export default Vue.extend({
       left: 0;
       font-size: 2rem;
       font-weight: bold;
-      color: $text-color;
+    }
+
+    .qr-scanner__flash {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 40px;
+      height: 40px;
+      padding: 20px;
+      font-size: 2rem;
     }
   }
 }