error handling on wallet/scanqr

ng-app/src/locales/en.json

@@ -358,7 +358,8 @@
     "ExportWalletTimeOut": "The wallet-export session has expired. Try again.",
     "ConnectionError": "Could not connect to the server.",
     "IncompatibleQrCode": "You scanned a NextGraph QR-Code that is of the wrong type.",
-    "NotARendezVous": "You scanned an invalid QR-Code."
+    "NotARendezVous": "You scanned an invalid QR-Code.",
+    "camera_unavailable": "Camera is unavailable."
   },
   "connectivity": {
     "stopped": "Stopped",

ng-app/src/routes/ScanQR.svelte

@@ -18,14 +18,14 @@
   import { onMount, onDestroy } from "svelte";
   import { t } from "svelte-i18n";
   import { scanned_qr_code } from "../store";
-  import { ArrowLeft } from "svelte-heros-v2";
+  import { ArrowLeft, ExclamationTriangle } from "svelte-heros-v2";
   import { Spinner } from "flowbite-svelte";
-
   let tauri_platform = import.meta.env.TAURI_PLATFORM;
   let mobile = tauri_platform == "android" || tauri_platform == "ios";
 
   let webScanner;
   let nativeScanner;
+  let error = false;
 
   function on_qr_scanned(content) {
     scanned_qr_code.set(content);
@@ -64,12 +64,17 @@
           on_qr_scanned(decoded_text);
         });
       } catch (e) {
+        try {
           webScanner = new Html5Qrcode ("scanner-div");
           await webScanner.start({ facingMode: "environment" }, { fps: 10, qrbox: { width: 300, height: 300 }, formatsToSupport: [0] }, (decoded_text, decoded_result) => {
             //console.log(decoded_result);
             // Handle scan result
             on_qr_scanned(decoded_text);
           });
+        } catch (e) {
+          webScanner = null;
+          error = true;
+        }
       }
 
       // // Add scanner to Screen.
@@ -118,10 +123,18 @@
   <div>
     <h2 class="text-xl mb-6">{$t("pages.scan_qr.scanning")}</h2>
   </div>
-  <Spinner />
+  {#if !error}<Spinner />{/if}
   <!-- Web Scanner -->
   <div id="scanner-div"></div>
 
+  {#if error}
+    <div class="mx-6 max-w-6xl lg:px-8 mx-auto px-4 text-red-800">
+      <ExclamationTriangle class="animate-bounce mt-10 h-16 w-16 mx-auto" />
+      
+        {@html $t("errors.camera_unavailable")}
+      
+    </div>
+  {/if}
   <div class="mx-auto max-w-xs">
     <button
       on:click={() => window.history.go(-1)}