fix: request permission to access camera

frontend/components/App/ScannerModal.vue

@@ -57,6 +57,17 @@
     errorMessage.value = t("scanner.error");
   };
 
+  const checkPermissionsError = async () => {
+    if (navigator.permissions) {
+      const permissionStatus = await navigator.permissions.query({ name: "camera" as PermissionName });
+      if (permissionStatus.state === "denied") {
+        errorMessage.value = t("scanner.permission_denied");
+        console.error("Camera permission denied");
+        return true;
+      }
+    }
+  };
+
   const startScanner = async () => {
     errorMessage.value = null;
     if (!(navigator && navigator.mediaDevices && "enumerateDevices" in navigator.mediaDevices)) {
@@ -64,6 +75,10 @@
       return;
     }
 
+    if (await checkPermissionsError()) {
+      return;
+    }
+
     try {
       const devices = await codeReader.listVideoInputDevices();
       sources.value = devices;

frontend/layouts/default.vue

@@ -137,7 +137,7 @@
                 </Button>
               </div>
               <div>
-                <Button size="icon" @click="openDialog('scanner')">
+                <Button size="icon" @click="openScanner">
                   <MdiQrcodeScan />
                 </Button>
               </div>
@@ -207,6 +207,7 @@
   import { useDialog } from "~/components/ui/dialog-provider";
   import { Input } from "~/components/ui/input";
   import { Button } from "~/components/ui/button";
+  import { toast } from "@/components/ui/sonner";
 
   const { t, locale } = useI18n();
   const username = computed(() => authCtx.user?.name || "User");
@@ -241,6 +242,23 @@
     }
   };
 
+  const openScanner = () => {
+    // request permission
+    if (navigator.mediaDevices) {
+      navigator.mediaDevices
+        .getUserMedia({ video: true })
+        .then(() => {
+          openDialog("scanner");
+        })
+        .catch(err => {
+          console.error(err);
+          toast.error(t("scanner.permission_denied"));
+        });
+    } else {
+      toast.error(t("scanner.unsupported"));
+    }
+  };
+
   // Preload currency format
   useFormatCurrency();
 

frontend/locales/en.json

@@ -378,7 +378,8 @@
         "no_sources": "No video sources available",
         "select_video_source": "Pick a video source",
         "title": "Scanner",
-        "unsupported": "Media Stream API is not supported without HTTPS"
+        "unsupported": "Media Stream API is not supported without HTTPS",
+        "permission_denied": "Camera permission denied, please allow access to the camera in your browser settings"
     },
     "tools": {
         "actions": "Inventory Actions",