Android camera

android/app/capacitor.build.gradle

@@ -9,7 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-    implementation project(':capacitor-camera')
+    implementation project(':capacitor-community-barcode-scanner')
     implementation project(':capacitor-clipboard')
 
 }

android/app/src/main/AndroidManifest.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
 
     <application
         android:allowBackup="true"
@@ -7,6 +7,7 @@
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
+        android:hardwareAccelerated="true"
         android:theme="@style/AppTheme">
 
         <activity
@@ -38,10 +39,9 @@
     <!-- Permissions -->
 
     <uses-permission android:name="android.permission.INTERNET" />
-    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
-    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
-    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.VIBRATE" />
+    <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />
     <uses-feature android:name="android.hardware.camera" />
     <uses-permission android:name="android.permission.READ_CLIPBOARD" />
     <uses-permission android:name="android.permission.WRITE_CLIPBOARD" />

android/capacitor.settings.gradle

@@ -2,8 +2,8 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/.pnpm/@capacitor+android@5.2.1_@capacitor+core@5.2.1/node_modules/@capacitor/android/capacitor')
 
-include ':capacitor-camera'
-project(':capacitor-camera').projectDir = new File('../node_modules/.pnpm/@capacitor+camera@5.0.6_@capacitor+core@5.2.1/node_modules/@capacitor/camera/android')
+include ':capacitor-community-barcode-scanner'
+project(':capacitor-community-barcode-scanner').projectDir = new File('../node_modules/.pnpm/github.com+capacitor-community+barcode-scanner@fa543b640a5336e6f3909490d9cb1f22b7aeb216_@capacitor+core@5.2.1/node_modules/@capacitor-community/barcode-scanner/android')
 
 include ':capacitor-clipboard'
 project(':capacitor-clipboard').projectDir = new File('../node_modules/.pnpm/@capacitor+clipboard@5.0.6_@capacitor+core@5.2.1/node_modules/@capacitor/clipboard/android')

package.json

@@ -37,8 +37,8 @@
         "workbox-window": "^6.6.0"
     },
     "dependencies": {
+        "@capacitor-community/barcode-scanner": "github:capacitor-community/barcode-scanner#ml-kit",
         "@capacitor/android": "^5.2.1",
-        "@capacitor/camera": "^5.0.6",
         "@capacitor/clipboard": "^5.0.6",
         "@capacitor/core": "^5.2.1",
         "@kobalte/core": "^0.9.8",

pnpm-lock.yaml

@@ -1,12 +1,12 @@
 lockfileVersion: '6.0'
 
 dependencies:
+  '@capacitor-community/barcode-scanner':
+    specifier: github:capacitor-community/barcode-scanner#ml-kit
+    version: github.com/capacitor-community/barcode-scanner/fa543b640a5336e6f3909490d9cb1f22b7aeb216(@capacitor/core@5.2.1)
   '@capacitor/android':
     specifier: ^5.2.1
     version: 5.2.1(@capacitor/core@5.2.1)
-  '@capacitor/camera':
-    specifier: ^5.0.6
-    version: 5.0.6(@capacitor/core@5.2.1)
   '@capacitor/clipboard':
     specifier: ^5.0.6
     version: 5.0.6(@capacitor/core@5.2.1)
@@ -1351,14 +1351,6 @@ packages:
       - typescript
     dev: true
 
-  /@capacitor/camera@5.0.6(@capacitor/core@5.2.1):
-    resolution: {integrity: sha512-X9WhbFz3dGv58JyfoAFGk/KN0oacEA+ReZkRc+JMRef0GUDfzlqEhqY4kP0i9nKH2koOFNdq4Pmya/Wu3mQXMg==}
-    peerDependencies:
-      '@capacitor/core': ^5.0.0
-    dependencies:
-      '@capacitor/core': 5.2.1
-    dev: false
-
   /@capacitor/cli@3.9.0:
     resolution: {integrity: sha512-NkbVZhYb0oPdh/XArE2ZmOwPFJbla5meShGhv3DxKCXeKn1rt92ile+2xOgtB/j+mL7f9cqQzTQM/11sGQzMAg==}
     engines: {node: '>=12.4.0'}
@@ -8024,6 +8016,19 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  github.com/capacitor-community/barcode-scanner/fa543b640a5336e6f3909490d9cb1f22b7aeb216(@capacitor/core@5.2.1):
+    resolution: {tarball: https://codeload.github.com/capacitor-community/barcode-scanner/tar.gz/fa543b640a5336e6f3909490d9cb1f22b7aeb216}
+    id: github.com/capacitor-community/barcode-scanner/fa543b640a5336e6f3909490d9cb1f22b7aeb216
+    name: '@capacitor-community/barcode-scanner'
+    version: 5.0.0-beta.2
+    prepare: true
+    requiresBuild: true
+    peerDependencies:
+      '@capacitor/core': ^5.0.0
+    dependencies:
+      '@capacitor/core': 5.2.1
+    dev: false
+
 settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false

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

src/root.css

@@ -3,11 +3,15 @@
 @tailwind utilities;
 
 body {
-    @apply text-white bg-neutral-900;
+    @apply text-white;
     overscroll-behavior-y: none;
     min-height: 100.3%;
 }
 
+html {
+    @apply bg-neutral-900;
+}
+
 #mutiny-logo {
     image-rendering: pixelated;
 }
@@ -41,6 +45,7 @@ p:not(:last-child) {
     width: max-content;
     height: max-content;
     overflow: hidden;
+    @apply bg-transparent;
 }
 
 #video-container .scan-region-highlight {