Zum Inhalt springen
rdlabo.devdocs

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: true weiter, 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.