refactor(qr): streamline barcode scanner implementation

- Remove legacy QR code processing with web workers
- Simplify camera permission handling and initialization
- Improve error handling and state management
- Update to use MLKit Barcode Scanner API consistently
- Fix type safety issues with error handling
- Remove unused camera and worker-related code
- Consolidate scanning logic into cleaner methods

The changes focus on using the native MLKit scanner capabilities
instead of the previous web worker implementation, resulting in
more reliable QR code scanning and better error handling.
This commit is contained in:
Matthew Raymer
2025-04-16 07:42:48 +00:00
parent 8a9f7d4231
commit 56f945d29f
11 changed files with 295 additions and 763 deletions

Binary file not shown.

View File

@@ -15,6 +15,7 @@ dependencies {
implementation project(':capacitor-filesystem')
implementation project(':capacitor-share')
implementation project(':capawesome-capacitor-file-picker')
implementation project(':capacitor-mlkit-barcode-scanning')
}

View File

@@ -16,6 +16,14 @@
}
]
}
},
"MLKitBarcodeScanner": {
"formats": [
"QR_CODE"
],
"detectorSize": 1,
"lensFacing": "back",
"googleBarcodeScannerModuleInstallState": true
}
}
}

View File

@@ -22,5 +22,9 @@
{
"pkg": "@capawesome/capacitor-file-picker",
"classpath": "io.capawesome.capacitorjs.plugins.filepicker.FilePickerPlugin"
},
{
"pkg": "@capacitor-mlkit/barcode-scanning",
"classpath": "io.capawesome.capacitorjs.plugins.mlkit.barcodescanning.BarcodeScannerPlugin"
}
]

View File

@@ -19,3 +19,6 @@ project(':capacitor-share').projectDir = new File('../node_modules/@capacitor/sh
include ':capawesome-capacitor-file-picker'
project(':capawesome-capacitor-file-picker').projectDir = new File('../node_modules/@capawesome/capacitor-file-picker/android')
include ':capacitor-mlkit-barcode-scanning'
project(':capacitor-mlkit-barcode-scanning').projectDir = new File('../node_modules/@capacitor-mlkit/barcode-scanning/android')

View File

@@ -18,6 +18,12 @@ const config: CapacitorConfig = {
}
]
}
},
MLKitBarcodeScanner: {
formats: ['QR_CODE'], // Only enable QR code scanning to improve performance
detectorSize: 1.0, // Use full camera view for detection
lensFacing: 'back', // Default to back camera
googleBarcodeScannerModuleInstallState: true // Enable Google Play Services barcode module installation if needed
}
}
};

View File

@@ -12,6 +12,12 @@ def capacitor_pods
pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
pod 'CapacitorCamera', :path => '../../node_modules/@capacitor/camera'
pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard'
pod 'CapacitorFilesystem', :path => '../../node_modules/@capacitor/filesystem'
pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
pod 'CapawesomeCapacitorFilePicker', :path => '../../node_modules/@capawesome/capacitor-file-picker'
pod 'CapacitorMlkitBarcodeScanning', :path => '../../node_modules/@capacitor-mlkit/barcode-scanning'
end
target 'App' do

23
package-lock.json generated
View File

@@ -13,7 +13,7 @@
"@capacitor/camera": "^6.0.0",
"@capacitor/cli": "^6.2.0",
"@capacitor/clipboard": "^6.0.2",
"@capacitor/core": "^6.2.0",
"@capacitor/core": "^6.2.1",
"@capacitor/filesystem": "^6.0.0",
"@capacitor/ios": "^6.2.0",
"@capacitor/share": "^6.0.3",
@@ -89,6 +89,7 @@
"zod": "^3.24.2"
},
"devDependencies": {
"@capacitor-mlkit/barcode-scanning": "^6.2.0",
"@capacitor/assets": "^3.0.5",
"@playwright/test": "^1.45.2",
"@types/dom-webcodecs": "^0.1.7",
@@ -2607,6 +2608,26 @@
"node": ">=8.9"
}
},
"node_modules/@capacitor-mlkit/barcode-scanning": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/@capacitor-mlkit/barcode-scanning/-/barcode-scanning-6.2.0.tgz",
"integrity": "sha512-XnnErDabpCUty9flugqB646ERejCxrtKcKOJrdoh9ZVLTQXUnyjxUDWOlqHVxrBHy+e86ZgpZX7D5zcaNvS0lQ==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/capawesome-team/"
},
{
"type": "opencollective",
"url": "https://opencollective.com/capawesome"
}
],
"license": "Apache-2.0",
"peerDependencies": {
"@capacitor/core": "^6.0.0"
}
},
"node_modules/@capacitor/android": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@capacitor/android/-/android-6.2.1.tgz",

View File

@@ -52,7 +52,7 @@
"@capacitor/camera": "^6.0.0",
"@capacitor/cli": "^6.2.0",
"@capacitor/clipboard": "^6.0.2",
"@capacitor/core": "^6.2.0",
"@capacitor/core": "^6.2.1",
"@capacitor/filesystem": "^6.0.0",
"@capacitor/ios": "^6.2.0",
"@capacitor/share": "^6.0.3",
@@ -128,6 +128,7 @@
"zod": "^3.24.2"
},
"devDependencies": {
"@capacitor-mlkit/barcode-scanning": "^6.2.0",
"@capacitor/assets": "^3.0.5",
"@playwright/test": "^1.45.2",
"@types/dom-webcodecs": "^0.1.7",

8
src/types/jsqr.d.ts vendored
View File

@@ -1,4 +1,4 @@
declare module 'jsqr' {
declare module "jsqr" {
interface Point {
x: number;
y: number;
@@ -26,9 +26,9 @@ declare module 'jsqr' {
width: number,
height: number,
options?: {
inversionAttempts?: 'dontInvert' | 'onlyInvert' | 'attemptBoth';
}
inversionAttempts?: "dontInvert" | "onlyInvert" | "attemptBoth";
},
): QRCode | null;
export default jsQR;
}
}

File diff suppressed because it is too large Load Diff