Android camera

src/components/Reader.tsx

@@ -1,5 +1,6 @@
-import QrScanner from "qr-scanner";
 import { onCleanup, onMount } from "solid-js";
+import { BarcodeScanner, BarcodeFormat, CameraPermissionState, CameraPermissionType, CameraPluginPermissions, PermissionStates } from '@capacitor-community/barcode-scanner';
+import QrScanner from "qr-scanner";
 
 export default function Scanner(props: { onResult: (result: string) => void }) {
     let container: HTMLVideoElement | undefined;
@@ -9,17 +10,58 @@ export default function Scanner(props: { onResult: (result: string) => void }) {
         props.onResult(data);
     };
 
+    const startScan = async () => {
+        // Check camera permission
+        const permissions: PermissionStates = await BarcodeScanner.checkPermissions();
+        if (permissions.camera === "granted") {
+            const callback = (result: ScanResult, err?: any) => {
+                if (err) {
+                    console.error(err);
+                    return;
+                }
+                // if the result has content
+                if (result && result.content) {
+                    handleResult({ data: result.content }); // pass the raw scanned content
+                }
+            };
+            await BarcodeScanner.start({ targetedFormats: [BarcodeFormat.QR_CODE] }, callback);
+        } else if (permissions.camera === "prompt") {
+            // Request permission if it has not been asked before
+            const requestedPermissions: PermissionStates = await BarcodeScanner.requestPermissions();
+            if (requestedPermissions.camera === "granted") {
+                // If user grants permission, start the scan
+                await startScan();
+            }
+        } else if (permissions.camera === "denied") {
+            // Handle the scenario when user denies the permission
+            // Maybe show a user friendly message here
+            console.log('Camera permission was denied');
+        }
+    };
+
+    const stopScan = () => {
+        BarcodeScanner.stop();
+    };
+
     onMount(async () => {
-        if (container) {
-            scanner = new QrScanner(container, handleResult, {
-                returnDetailedScanResult: true
-            });
-            await scanner.start();
+        if (Capacitor.isNativePlatform()) {
+            await startScan();
+        } else {
+            if (container) {
+                scanner = new QrScanner(container, handleResult, {
+                    returnDetailedScanResult: true
+                });
+                await scanner.start();
+            }
         }
     });
 
     onCleanup(() => {
-        scanner?.destroy();
+        if (Capacitor.isNativePlatform()) {
+            stopScan();
+        } else {
+            scanner?.destroy();
+        }
     });
 
     return (
@@ -27,7 +69,7 @@ export default function Scanner(props: { onResult: (result: string) => void }) {
             <div id="video-container">
                 <video
                     ref={container}
-                    class="w-full h-full fixed object-cover bg-gray"
+                    class="w-full h-full fixed object-cover bg-transparent"
                 />
             </div>
         </>