Open camera via a button

assets/js/barcode-scanner.js

@@ -22,32 +22,34 @@ export default {
         }
       },
     };
+    this.el.addEventListener("camera_request", () => {
+      navigator.mediaDevices
+        .getUserMedia(constraints)
+        .then((mediaStream) => {
+          console.debug("Camera access allowed")
+          this.pushEventTo(this.cameraPreview, "camera_allowed", {});
+          this.cameraPreview.srcObject = mediaStream;
+          this.cameraPreview.onloadedmetadata = () => {
+            this.cameraPreview.play();
+            this.scanInterval = window.setInterval(async () => {
+              const barcodes = await barcodeDetector.detect(this.cameraPreview);
+              if (barcodes.length <= 0) return;
 
-    navigator.mediaDevices
-      .getUserMedia(constraints)
-      .then((mediaStream) => {
-        console.debug("Camera access allowed")
-        this.pushEventTo(this.cameraPreview, "camera_allowed", {});
-        this.cameraPreview.srcObject = mediaStream;
-        this.cameraPreview.onloadedmetadata = () => {
-          this.cameraPreview.play();
-          this.scanInterval = window.setInterval(async () => {
-            const barcodes = await barcodeDetector.detect(this.cameraPreview);
-            if (barcodes.length <= 0) return;
+              barcodes.forEach(barcode => {
+                if (!detectedBarcodes.has(barcode.rawValue)) {
+                  this.pushEventTo(this.cameraPreview, "barcode_scanned", { number: barcode.rawValue });
+                  detectedBarcodes.add(barcode.rawValue);
+                };
+              });
+            }, 500)
+          };
+        })
+        .catch((err) => {
+          console.error(`${err.name}: ${err.message}`);
+          this.pushEventTo(this.cameraPreview, "camera_denied", {});
+        });
+    })
 
-            barcodes.forEach(barcode => {
-              if (!detectedBarcodes.has(barcode.rawValue)) {
-                this.pushEventTo(this.cameraPreview, "barcode_scanned", { number: barcode.rawValue });
-                detectedBarcodes.add(barcode.rawValue);
-              };
-            });
-          }, 500)
-        };
-      })
-      .catch((err) => {
-        console.error(`${err.name}: ${err.message}`);
-        this.pushEventTo(this.cameraPreview, "camera_denied", {});
-      });
   },
   destroyed() {
     this.cameraPreview.srcObject.getTracks().forEach(track => track.stop());

lib/music_library_web/live/record_live/barcode_scanner_component.ex

@@ -25,7 +25,28 @@ defmodule MusicLibraryWeb.RecordLive.BarcodeScannerComponent do
       </header>
       <div>
         <p>{@camera}</p>
-        <video id="camera-preview"></video>
+        <button
+          :if={@camera == :pending}
+          type="button"
+          phx-click={JS.dispatch("camera_request", to: "#barcode-scanner")}
+          class="relative block w-full rounded-lg border-2 border-dashed border-zinc-300 p-12 text-center hover:border-zinc-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+        >
+          <svg
+            class="mx-auto size-12 text-zinc-400"
+            stroke="currentColor"
+            fill="none"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
+            />
+          </svg>
+          <span class="mt-2 block text-sm font-semibold text-zinc-900">{gettext("Open camera")}</span>
+        </button>
+        <video class="w-full" id="camera-preview"></video>
       </div>
       <ul>
         <li :for={release <- assigns.releases}>

priv/gettext/default.pot

@@ -634,3 +634,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Scan one or more barcodes"
 msgstr ""
+
+#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:47
+#, elixir-autogen, elixir-format
+msgid "Open camera"
+msgstr ""