Premiers pas

Lisez des codes QR et des codes-barres dans une fenêtre modale native Capacitor.

L’appareil photo fonctionne dans la fenêtre modale ; vous n’avez donc pas à gérer de vue caméra dans vos ressources Web. Utilisez une lecture unique ou plusieurs lectures en continu ; chaque détection fournit event.code.

Documentation : Lire la documentation complète

Installer

npm install @rdlabo/capacitor-codescanner
npx cap sync

Autorisation d’accès à l’appareil photo, requise avant la première lecture

Le plugin utilise l’appareil photo de l’appareil. Sur iOS, ajoutez une description d’utilisation à l’Info.plist de votre application, par exemple ios/App/App/Info.plist :

<key>NSCameraUsageDescription</key>
<string>This app needs camera access to scan QR codes and barcodes.</string>

Android déclare android.permission.CAMERA dans le manifeste du plugin ; le système peut toutefois demander une autorisation à l’exécution lorsque vous présentez le lecteur. Après avoir modifié la configuration native, synchronisez et reconstruisez l’application native avec npx cap sync, puis ouvrez Xcode / Android Studio ou utilisez votre build natif Capacitor habituel.

Utilisation

Consultez CodeScanner. Lancez la lecture depuis une action utilisateur, comme un bouton, après l’installation et la configuration de l’appareil photo.

Quand l’utiliser

Utilisez ce plugin pour disposer d’une fenêtre modale de lecture prête à l’emploi sans créer une interface caméra personnalisée. Il est utile pour :

• Lire les codes QR ou codes-barres de reçus, de produits ou de billets.
• Recueillir plusieurs codes dans une même session avec isMulti: true.

Fonctionnalités

• Éclairage automatique : active par défaut la lampe dans les environnements sombres.
• Retour par vibration : vibre lorsqu’un code est détecté.
• Overlay de zone de détection : affiche un cadre rouge autour de la zone de lecture active.
• Mise en évidence du code détecté : trace un cadre rouge autour du code détecté.
• Bouton de fermeture : bouton de fermeture par défaut dans le coin supérieur droit.
• Mode de lecture multiple : poursuit la lecture jusqu’à ce que l’utilisateur ferme la fenêtre modale lorsque isMulti: true.

Remarques sur les plateformes

• iOS et Android : entièrement pris en charge.
• Web : non pris en charge, car le plugin nécessite un accès natif à l’appareil photo.