Getting Started

Scan QR codes and barcodes with a native Capacitor modal.

The camera runs inside the modal, so you do not manage a camera view in your web assets. Use a single scan or continuous multi-scan; each catch delivers event.code.

Documentation: Read the full documentation

Install

npm install @rdlabo/capacitor-codescanner
npx cap sync

Camera permission (required before first scan)

The plugin uses the device camera. On iOS, add a usage description to your app Info.plist (for example ios/App/App/Info.plist):

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

Android declares android.permission.CAMERA in the plugin manifest; the OS may still prompt at runtime when you present the scanner. After editing native config, sync and rebuild the native app (npx cap sync, then open Xcode / Android Studio or your usual Capacitor native build).

Usage

See CodeScanner. Start the scan from a user action such as a button, after install and camera setup.

When to use

Use this plugin when you want a ready-to-use scanning modal without building a custom camera UI. It is useful for:

• Scanning QR codes or barcodes on receipts, products, or tickets.
• Collecting multiple codes in one session with isMulti: true.

Features

• Automatic light control: turns on the flashlight in dark environments by default.
• Vibration feedback: vibrates when a code is detected.
• Detection area overlay: shows a red frame around the active scan area.
• Detected code highlight: draws a red frame around the detected code.
• Close button: a default close button in the upper right corner.
• Multi-scan mode: keeps scanning until the user closes the modal when isMulti: true.

Platform notes

• iOS and Android: fully supported.
• Web: not supported because the plugin requires native camera access.