From fc3ff1a42620fd015f18192a53ccb8eb35d444d5 Mon Sep 17 00:00:00 2001 From: Tony Giorgio Date: Wed, 19 Jul 2023 17:51:52 -0500 Subject: [PATCH] Android camera --- android/app/capacitor.build.gradle | 2 +- android/app/src/main/AndroidManifest.xml | 8 ++-- android/capacitor.settings.gradle | 4 +- package.json | 2 +- pnpm-lock.yaml | 27 ++++++----- src/components/Reader.tsx | 58 ++++++++++++++++++++---- src/root.css | 7 ++- 7 files changed, 80 insertions(+), 28 deletions(-) diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle index 0ddbfda..ebc1035 100644 --- a/android/app/capacitor.build.gradle +++ b/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') } diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index 9efb354..69f9c2e 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -1,5 +1,5 @@ - + - - - + + diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle index 2fa053e..53f8143 100644 --- a/android/capacitor.settings.gradle +++ b/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') diff --git a/package.json b/package.json index abe7358..dccc924 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f8d9778..c32d0c3 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/components/Reader.tsx b/src/components/Reader.tsx index 28be38c..df602ba 100644 --- a/src/components/Reader.tsx +++ b/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 }) {
diff --git a/src/root.css b/src/root.css index 98a6e15..311975f 100644 --- a/src/root.css +++ b/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 {