Open camera via a button

assets/js/barcode-scanner.js

@@ -22,7 +22,7 @@ export default {
         }
       },
     };
-
+    this.el.addEventListener("camera_request", () => {
       navigator.mediaDevices
         .getUserMedia(constraints)
         .then((mediaStream) => {
@@ -48,6 +48,8 @@ export default {
           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 ""