Browse Source

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.
qrcode-capacitor
Matthew Raymer 4 weeks ago
parent
commit
56f945d29f
  1. BIN
      android/.gradle/file-system.probe
  2. 1
      android/app/capacitor.build.gradle
  3. 8
      android/app/src/main/assets/capacitor.config.json
  4. 4
      android/app/src/main/assets/capacitor.plugins.json
  5. 3
      android/capacitor.settings.gradle
  6. 6
      capacitor.config.ts
  7. 6
      ios/App/Podfile
  8. 23
      package-lock.json
  9. 3
      package.json
  10. 8
      src/types/jsqr.d.ts
  11. 978
      src/views/ContactQRScanShowView.vue

BIN
android/.gradle/file-system.probe

Binary file not shown.

1
android/app/capacitor.build.gradle

@ -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')
}

8
android/app/src/main/assets/capacitor.config.json

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

4
android/app/src/main/assets/capacitor.plugins.json

@ -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"
}
]

3
android/capacitor.settings.gradle

@ -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')

6
capacitor.config.ts

@ -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
}
}
};

6
ios/App/Podfile

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

@ -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",

3
package.json

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

@ -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;
}
}

978
src/views/ContactQRScanShowView.vue

File diff suppressed because it is too large
Loading…
Cancel
Save