Open camera via a button

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}>