Erste Schritte
Scannen Sie QR-Codes und Barcodes mit einem nativen Capacitor-Modal.
Die Kamera läuft innerhalb des Modals. Sie müssen daher keine Kameraansicht in Ihren Web-Assets verwalten. Verwenden Sie einen Einzelscan oder fortlaufende Mehrfachscans; jeder erkannte Code wird über event.code übermittelt.
Dokumentation: Vollständige Dokumentation lesen
Installation
npm install @rdlabo/capacitor-codescanner
npx cap sync
Kameraberechtigung (vor dem ersten Scan erforderlich)
Das Plugin verwendet die Gerätekamera. Fügen Sie unter iOS eine Nutzungsbeschreibung in die Info.plist Ihrer Anwendung ein, beispielsweise in ios/App/App/Info.plist:
<key>NSCameraUsageDescription</key>
<string>This app needs camera access to scan QR codes and barcodes.</string>
Unter Android deklariert das Plugin-Manifest android.permission.CAMERA. Das Betriebssystem kann dennoch zur Laufzeit beim Öffnen des Scanners nach der Berechtigung fragen. Synchronisieren und bauen Sie die native Anwendung nach Änderungen an der nativen Konfiguration neu: mit npx cap sync und anschließend über Xcode / Android Studio oder Ihren üblichen nativen Capacitor-Build.
Verwendung
Lesen Sie CodeScanner. Starten Sie den Scan nach Installation und Kameraeinrichtung durch eine Benutzeraktion, beispielsweise über eine Schaltfläche.
Einsatzbereiche
Verwenden Sie dieses Plugin, wenn Sie ein sofort einsetzbares Scanner-Modal benötigen und keine eigene Kameraoberfläche erstellen möchten. Es eignet sich für:
- Das Scannen von QR-Codes oder Barcodes auf Belegen, Produkten oder Tickets.
- Das Erfassen mehrerer Codes in einer Sitzung mit
isMulti: true.
Funktionen
- Automatische Beleuchtung: Schaltet bei Dunkelheit standardmäßig das Kameralicht ein.
- Vibrationsfeedback: Vibriert, wenn ein Code erkannt wird.
- Markierung des Erkennungsbereichs: Zeigt einen roten Rahmen um den aktiven Scanbereich.
- Hervorhebung erkannter Codes: Zeichnet einen roten Rahmen um den erkannten Code.
- Schließen-Schaltfläche: Standardmäßig oben rechts vorhanden.
- Mehrfachscan-Modus: Scannt bei
isMulti: trueweiter, bis der Benutzer das Modal schließt.
Plattformhinweise
- iOS und Android: Vollständig unterstützt.
- Web: Nicht unterstützt, da das Plugin nativen Kamerazugriff benötigt.