Add lightning invoice payments

src/lib/components/Scanner.svelte

@@ -5,11 +5,38 @@
 
   const {onscan} = $props()
 
+  const changeCamera = async () => {
+    if (camera && scanner) {
+      loading = true
+      try {
+        await scanner.setCamera(camera)
+      } catch (error) {
+        console.error("Failed to switch camera:", error)
+      } finally {
+        loading = false
+      }
+    }
+  }
+
   let video: HTMLVideoElement
   let scanner: QrScanner
   let loading = $state(true)
+  let cameras = $state<QrScanner.Camera[]>([])
+  let camera = $state<string>("")
 
   onMount(() => {
+    QrScanner.listCameras(true)
+      .then(async () => {
+        cameras = await QrScanner.listCameras(true)
+
+        if (cameras.length > 0) {
+          camera = cameras[0].id
+        }
+      })
+      .catch(error => {
+        console.error("Failed to list cameras:", error)
+      })
+
     scanner = new QrScanner(video, r => onscan(r.data), {
       returnDetailedScanResult: true,
     })
@@ -22,11 +49,21 @@
   })
 </script>
 
-<div class="bg-alt flex min-h-48 w-full flex-col items-center justify-center rounded p-px">
+<div class="bg-alt relative flex min-h-48 w-full flex-col items-center justify-center rounded p-px">
   {#if loading}
     <p class="py-20">
       <Spinner loading>Loading your camera...</Spinner>
     </p>
   {/if}
   <video class="m-auto rounded" class:h-0={loading} bind:this={video}></video>
+  {#if cameras.length > 1}
+    <select
+      class="select select-bordered select-sm absolute bottom-1 right-1"
+      bind:value={camera}
+      onchange={changeCamera}>
+      {#each cameras as camera}
+        <option value={camera.id}>{camera.label || `Camera ${camera.id}`}</option>
+      {/each}
+    </select>
+  {/if}
 </div>