--- description: Capacitor Barcode Scanner plugin to scan barcodes and QR codes on Android, iOS, and Web using the camera or images, with batch and embedded scanning. title: Capacitor Barcode Scanner Plugin - Capawesome image: https://capawesome.io/docs/assets/images/social/sdks/capacitor/barcode-scanner.png --- [Skip to content ](#capacitor-barcode-scanner-plugin) [📲 Introducing **Build Sharing** — get your builds onto testers' devices with a link & QR code. No account required. ](/blog/share-mobile-app-builds-with-testers/) * [ SDKs ](/docs/sdks/) * [ iOS ](#ios) * [ Web ](#web) * [ Configuration ](#configuration) * [ Usage ](#usage) * [ API ](#api) * [ Type Aliases ](#type-aliases) * [ Enums ](#enums) * [ Supported Barcode Formats ](#supported-barcode-formats) * [ Migration from ML Kit Barcode Scanning ](#migration-from-ml-kit-barcode-scanning) * [ FAQ ](#faq) * [ Related Plugins ](#related-plugins) * [ Newsletter ](#newsletter) * [ Changelog ](#changelog) * [ Breaking Changes ](#breaking-changes) * [ License ](#license) * [ Barometer ](/docs/sdks/capacitor/barometer/) * [ Battery ](/docs/sdks/capacitor/battery/) * [ Biometrics ](/docs/sdks/capacitor/biometrics/) * [ Bluetooth Low Energy ](/docs/sdks/capacitor/bluetooth-low-energy/) * [ Calendar ](/docs/sdks/capacitor/calendar/) * [ Clipboard ](/docs/sdks/capacitor/clipboard/) * [ Cloudinary ](/docs/sdks/capacitor/cloudinary/) * [ Compass ](/docs/sdks/capacitor/compass/) * [ Contacts ](/docs/sdks/capacitor/contacts/) * [ Crisp ](/docs/sdks/capacitor/crisp/) * [ Datetime Picker ](/docs/sdks/capacitor/datetime-picker/) * [ Device Info ](/docs/sdks/capacitor/device-info/) * [ Dialog ](/docs/sdks/capacitor/dialog/) * [ Document Scanner ](/docs/sdks/capacitor/document-scanner/) * [ Electron ](/docs/sdks/capacitor/electron/) * [ Exif ](/docs/sdks/capacitor/exif/) * [ Facebook Sign-In ](/docs/sdks/capacitor/facebook-sign-in/) * [ File Compressor ](/docs/sdks/capacitor/file-compressor/) * [ File Manager ](/docs/sdks/capacitor/file-manager/) * [ File Opener ](/docs/sdks/capacitor/file-opener/) * [ File Picker ](/docs/sdks/capacitor/file-picker/) * [ File Transfer ](/docs/sdks/capacitor/file-transfer/) * [ Firebase ](/docs/sdks/capacitor/firebase/) * [ Formbricks ](/docs/sdks/capacitor/formbricks/) * [ Geocoder ](/docs/sdks/capacitor/geocoder/) * [ Geofences ](/docs/sdks/capacitor/geofences/) * [ Google Sign-In ](/docs/sdks/capacitor/google-sign-in/) * [ Grafana Faro ](/docs/sdks/capacitor/grafana-faro/) * [ Gyroscope ](/docs/sdks/capacitor/gyroscope/) * [ Haptics ](/docs/sdks/capacitor/haptics/) * [ Health ](/docs/sdks/capacitor/health/) * [ Home Indicator ](/docs/sdks/capacitor/home-indicator/) * [ In-App Browser ](/docs/sdks/capacitor/in-app-browser/) * [ Install Referrer ](/docs/sdks/capacitor/install-referrer/) * [ Intercom ](/docs/sdks/capacitor/intercom/) * [ Intune ](/docs/sdks/capacitor/intune/) * [ Keep Awake ](/docs/sdks/capacitor/keep-awake/) * [ libSQL ](/docs/sdks/capacitor/libsql/) * [ Light Sensor ](/docs/sdks/capacitor/light-sensor/) * [ Live Update ](/docs/sdks/capacitor/live-update/) * [ LLM ](/docs/sdks/capacitor/llm/) * [ Localization ](/docs/sdks/capacitor/localization/) * [ Mail Composer ](/docs/sdks/capacitor/mail-composer/) * [ Managed Configurations ](/docs/sdks/capacitor/managed-configurations/) * [ MapLibre ](/docs/sdks/capacitor/maplibre/) * [ Maps Launcher ](/docs/sdks/capacitor/maps-launcher/) * [ Media Session ](/docs/sdks/capacitor/media-session/) * [ ML Kit ](/docs/sdks/capacitor/mlkit/) * [ Navigation Bar ](/docs/sdks/capacitor/navigation-bar/) * [ Network ](/docs/sdks/capacitor/network/) * [ NFC ](/docs/sdks/capacitor/nfc/) * [ Node.js ](/docs/sdks/capacitor/nodejs/) * [ OAuth ](/docs/sdks/capacitor/oauth/) * [ Passkeys ](/docs/sdks/capacitor/passkeys/) * [ Password Autofill ](/docs/sdks/capacitor/password-autofill/) * [ PDF Generator ](/docs/sdks/capacitor/pdf-generator/) * [ PDF Viewer ](/docs/sdks/capacitor/pdf-viewer/) * [ Pedometer ](/docs/sdks/capacitor/pedometer/) * [ Permissions ](/docs/sdks/capacitor/permissions/) * [ Phone Dialer ](/docs/sdks/capacitor/phone-dialer/) * [ Photo Editor ](/docs/sdks/capacitor/photo-editor/) * [ Photo Manipulator ](/docs/sdks/capacitor/photo-manipulator/) * [ PixLive ](/docs/sdks/capacitor/pixlive/) * [ PostHog ](/docs/sdks/capacitor/posthog/) * [ Printer ](/docs/sdks/capacitor/printer/) * [ Privacy Screen ](/docs/sdks/capacitor/privacy-screen/) * [ Proximity Sensor ](/docs/sdks/capacitor/proximity-sensor/) * [ Purchases ](/docs/sdks/capacitor/purchases/) * [ RealtimeKit ](/docs/sdks/capacitor/realtimekit/) * [ Root Detection ](/docs/sdks/capacitor/root-detection/) * [ Screen Brightness ](/docs/sdks/capacitor/screen-brightness/) * [ Screen Orientation ](/docs/sdks/capacitor/screen-orientation/) * [ Screen Reader ](/docs/sdks/capacitor/screen-reader/) * [ Screenshot ](/docs/sdks/capacitor/screenshot/) * [ Secure Preferences ](/docs/sdks/capacitor/secure-preferences/) * [ Settings Launcher ](/docs/sdks/capacitor/settings-launcher/) * [ Shake ](/docs/sdks/capacitor/shake/) * [ Silent Mode ](/docs/sdks/capacitor/silent-mode/) * [ SIM ](/docs/sdks/capacitor/sim/) * [ SMS Composer ](/docs/sdks/capacitor/sms-composer/) * [ Speech Recognition ](/docs/sdks/capacitor/speech-recognition/) * [ Speech Synthesis ](/docs/sdks/capacitor/speech-synthesis/) * [ Share Target ](/docs/sdks/capacitor/share-target/) * [ Square Mobile Payments ](/docs/sdks/capacitor/square-mobile-payments/) * [ SQLite ](/docs/sdks/capacitor/sqlite/) * [ Superwall ](/docs/sdks/capacitor/superwall/) * [ System WebView ](/docs/sdks/capacitor/system-webview/) * [ Tauri ](/docs/sdks/capacitor/tauri/) * [ Text Interaction ](/docs/sdks/capacitor/text-interaction/) * [ Text Zoom ](/docs/sdks/capacitor/text-zoom/) * [ Thermal State ](/docs/sdks/capacitor/thermal-state/) * [ Toast ](/docs/sdks/capacitor/toast/) * [ Torch ](/docs/sdks/capacitor/torch/) * [ Vault ](/docs/sdks/capacitor/vault/) * [ Volume ](/docs/sdks/capacitor/volume/) * [ Wallet ](/docs/sdks/capacitor/wallet/) * [ Watch ](/docs/sdks/capacitor/watch/) * [ Wifi ](/docs/sdks/capacitor/wifi/) * [ YouTube Player ](/docs/sdks/capacitor/youtube-player/) * [ Zip ](/docs/sdks/capacitor/zip/) * [ Cordova ](/docs/sdks/cordova/) * [ Cloud ](/docs/cloud/) * [ Integrations ](/docs/cloud/live-updates/integrations/) * Concepts * Reference * [ Troubleshooting ](/docs/cloud/live-updates/troubleshooting/) * [ FAQ ](/docs/cloud/live-updates/faq/) * [ Native Builds ](/docs/cloud/native-builds/) * [ Set Up Environments ](/docs/cloud/native-builds/environments/) * [ Set Up Native Configurations ](/docs/cloud/native-builds/native-configurations/) * [ Auto-Increment Build Numbers ](/docs/cloud/native-builds/auto-incrementing-build-numbers/) * [ Configure the Web Build Script ](/docs/cloud/native-builds/web-build-script/) * [ Build from a Monorepo ](/docs/cloud/native-builds/monorepo/) * [ Use pnpm, Yarn, or bun ](/docs/cloud/native-builds/package-managers/) * [ Install Private npm Packages ](/docs/cloud/native-builds/npm-private-registry/) * [ Override the Java Version ](/docs/cloud/native-builds/override-java-version/) * [ Custom iOS Provisioning Profiles ](/docs/cloud/native-builds/custom-ios-provisioning-profiles/) * [ Build without Git ](/docs/cloud/native-builds/build-without-git/) * [ Access Git Behind a Firewall ](/docs/cloud/native-builds/firewall-access/) * [ Integrations ](/docs/cloud/native-builds/integrations/) * Reference * [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/) * [ FAQ ](/docs/cloud/native-builds/faq/) * [ App Store Publishing ](/docs/cloud/app-store-publishing/) * [ Submit a Build ](/docs/cloud/app-store-publishing/submit-a-build/) * [ Submit Automatically After a Build ](/docs/cloud/app-store-publishing/submit-automatically/) * [ Troubleshooting ](/docs/cloud/app-store-publishing/troubleshooting/) * [ FAQ ](/docs/cloud/app-store-publishing/faq/) * [ Automations ](/docs/cloud/automations/) * [ Reference ](/docs/cloud/automations/reference/) * [ Troubleshooting ](/docs/cloud/automations/troubleshooting/) * [ FAQ ](/docs/cloud/automations/faq/) * [ Assist ](/docs/cloud/assist/) * [ CLI ](/docs/cloud/cli/) * APIs and SDKs * [ Webhooks ](/docs/cloud/webhooks/) * [ Integrations ](/docs/cloud/integrations/) * Notifications * Account * [ Organization ](/docs/cloud/organizations/) * [ Two-Factor Enforcement ](/docs/cloud/organizations/two-factor-authentication/) * [ Network Restrictions ](/docs/cloud/organizations/network-restrictions/) * [ Audit Logs ](/docs/cloud/organizations/audit-logs/) * [ Billing ](/docs/cloud/organizations/billing/) * [ License Keys ](/docs/cloud/license-keys/) * [ AI ](/docs/ai/) * [ Insiders ](/docs/insiders/) * [ Billing & Plans ](/docs/insiders/billing-and-plans/) * [ FAQ ](/docs/insiders/faq/) * [ License ](https://capawesome.io/legal/eula/) * [ Support ](/docs/support/) * [ Contributing ](/docs/contributing/) * Contributing code * [ Code of Conduct ](/docs/contributing/code-of-conduct/) * [ Questions ](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#creating-a-discussion) * [ Blog ](/blog/) * Categories * [ iOS ](#ios) * [ Web ](#web) * [ Configuration ](#configuration) * [ Usage ](#usage) * [ API ](#api) * [ Type Aliases ](#type-aliases) * [ Enums ](#enums) * [ Supported Barcode Formats ](#supported-barcode-formats) * [ Migration from ML Kit Barcode Scanning ](#migration-from-ml-kit-barcode-scanning) * [ FAQ ](#faq) * [ Related Plugins ](#related-plugins) * [ Newsletter ](#newsletter) * [ Changelog ](#changelog) * [ Breaking Changes ](#breaking-changes) * [ License ](#license) Build and Ship Mobile Apps Faster Cloud builds, OTA live updates, and automated store releases — everything your mobile team needs in one platform. [Start for free ](https://console.cloud.capawesome.io/?utm%5Fsource=docs&utm%5Fmedium=sidebar%5Fcta&utm%5Fcampaign=docs%5Fcta) [See our plans ](https://capawesome.io/pricing/?utm%5Fsource=docs&utm%5Fmedium=sidebar%5Fcta&utm%5Fcampaign=docs%5Fcta) # Capacitor Barcode Scanner Plugin[¶](#capacitor-barcode-scanner-plugin "Permanent link") Capacitor plugin for scanning barcodes and QR codes with a themeable fullscreen scanner or an embedded camera view on Android, iOS, and Web. [ ![Deliver Live Updates to your Capacitor app with Capawesome Cloud](../../../assets/external/cloud.capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.69628c3f.png) ](https://cloud.capawesome.io/) ## Features[¶](#features "Permanent link") The Capacitor Barcode Scanner plugin provides a premium barcode scanning experience with two presentation modes. Here are some of the key features: * 🖥️ **Ready-Made UI**: Fullscreen scanner with viewfinder, torch and flip camera buttons. * 🎨 **Themeable**: Customize the accent color, title, instructions, and buttons of the scanner UI. * 📦 **Batch Scanning**: Collect multiple barcodes in one session before returning them all at once. * 🖼️ **Embedded View**: Render the camera natively inside any frame of your app layout. * ⏯️ **Pause & Resume**: Pause and resume the barcode detection without stopping the camera. * 🔦 **Torch & Zoom**: Control the flashlight and the camera zoom during a scan session. * 🎯 **Detection Area**: Restrict the barcode detection to a region of interest. * 🔁 **Deduplication**: Configurable timeout before the same barcode is emitted again. * 🏷️ **13 Barcode Formats**: QR code, Aztec, Codabar, Code 39, Code 93, Code 128, Data Matrix, EAN-8, EAN-13, ITF, PDF417, UPC-A, and UPC-E. * 📷 **Image Reading**: Read barcodes from image files. * 🍎 **Zero Dependencies on iOS**: Built on AVFoundation and Vision only, so there are no third-party pods and no simulator issues. * 🤖 **Offline on Android**: Uses the bundled ML Kit model, so scanning works offline and without Google Play services. * 🌐 **Web Support**: Embedded scanning and image reading via the `BarcodeDetector` API. * 🤝 **Compatibility**: Works hand in hand with the [Document Scanner](https://capawesome.io/docs/sdks/capacitor/document-scanner/), [Torch](https://capawesome.io/docs/sdks/capacitor/torch/) and [File Picker](https://capawesome.io/docs/sdks/capacitor/file-picker/) plugins. * 📦 **CocoaPods & SPM**: Supports CocoaPods and Swift Package Manager for iOS. * 🔁 **Up-to-date**: Always supports the latest Capacitor version. * ⭐️ **Support**: Priority support from the Capawesome Team. * ✨ **Handcrafted**: Built from the ground up with care and expertise, not forked or AI-generated. Missing a feature? Just [open an issue](https://github.com/capawesome-team/capacitor-plugins/issues) and we'll take a look! ## Use Cases[¶](#use-cases "Permanent link") The Barcode Scanner plugin is typically used whenever an app needs to capture barcode or QR code data, for example: * **Retail and inventory**: Scan product barcodes for stock management or price lookup. * **Ticketing and events**: Validate QR codes on tickets, also in batch mode at the entrance. * **Logistics**: Scan parcel labels (Code 128, ITF, PDF417) in a continuous embedded scanner. * **Payments and links**: Let users scan QR codes to open links or initiate payments. ## Compatibility[¶](#compatibility "Permanent link") | Plugin Version | Capacitor Version | Status | | -------------- | ----------------- | -------------- | | 0.x.x | \>=8.x.x | Active support | ## Demo[¶](#demo "Permanent link") | Android | iOS | | ------- | --- | ## Installation[¶](#installation "Permanent link") This plugin is only available to [Capawesome Insiders](https://capawesome.io/insiders/). First, make sure you have the Capawesome npm registry set up. You can do this by running the following commands: `[](#%5F%5Fcodelineno-0-1)npm config set @capawesome-team:registry https://npm.registry.capawesome.io [](#%5F%5Fcodelineno-0-2)npm config set //npm.registry.capawesome.io/:_authToken ` **Attention**: Replace `` with the license key you received from Polar. If you don't have a license key yet, you can get one by becoming a [Capawesome Insider](https://capawesome.io/insiders/). Next, you can use our **AI-Assisted Setup** to install the plugin. Add the [Capawesome Skills](https://github.com/capawesome-team/skills) to your AI tool using the following command: `[](#%5F%5Fcodelineno-1-1)npx skills add capawesome-team/skills --skill capacitor-plugins ` Then use the following prompt: `` [](#%5F%5Fcodelineno-2-1)Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome-team/capacitor-barcode-scanner` plugin in my project. `` If you prefer **Manual Setup**, install the plugin by running the following commands and follow the platform-specific instructions below: `[](#%5F%5Fcodelineno-3-1)npm install @capawesome-team/capacitor-barcode-scanner [](#%5F%5Fcodelineno-3-2)npx cap sync ` ### Android[¶](#android "Permanent link") The plugin declares the camera permission in its own manifest, so no manifest changes are required. #### Proguard[¶](#proguard "Permanent link") If you are using Proguard, you need to add the following rules to your `proguard-rules.pro` file: `[](#%5F%5Fcodelineno-4-1)-keep class io.capawesome.capacitorjs.plugins.** { *; } ` #### Variables[¶](#variables "Permanent link") If needed, you can define the following project variables in your app’s `variables.gradle` file to change the default version of the dependencies: * `$androidxCameraVersion` version of the `androidx.camera` dependencies (default: `1.6.1`) * `$mlkitBarcodeScanningVersion` version of `com.google.mlkit:barcode-scanning` (default: `17.3.0`) This can be useful if you encounter dependency conflicts with other plugins in your project. The plugin uses the **bundled** ML Kit barcode scanning model. Scanning works offline and does not require Google Play services, but the model increases your app size by a few megabytes. The default dependency versions are compatible with the 16 KB page size requirement of Google Play. ### iOS[¶](#ios "Permanent link") Add the `NSCameraUsageDescription` key to the `Info.plist` file of your app to explain why your app needs access to the camera: `[](#%5F%5Fcodelineno-5-1)NSCameraUsageDescription [](#%5F%5Fcodelineno-5-2)The app needs access to the camera to scan barcodes. ` If the key is missing, `scan(...)` and `startScan(...)` reject with a clear error message. ### Web[¶](#web "Permanent link") The web implementation is based on the [BarcodeDetector](https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector) API, which is not available in all browsers. For browsers without built-in support, we recommend the [barcode-detector](https://www.npmjs.com/package/barcode-detector) polyfill: `[](#%5F%5Fcodelineno-6-1)import 'barcode-detector/side-effects'; ` The polyfill is intentionally **not** bundled with this plugin, so you stay in control of your bundle size. ## Configuration[¶](#configuration "Permanent link") No configuration required for this plugin. ## Usage[¶](#usage "Permanent link") The plugin offers two presentation modes: a ready-made, themeable native fullscreen scanner (`scan(...)`) and an embedded camera view that is rendered natively inside a frame of your app layout (`startScan(...)`). The following examples show how to check the availability and permissions, scan barcodes with both modes, and read barcodes from image files. ### Check the availability and permissions[¶](#check-the-availability-and-permissions "Permanent link") Check whether barcode scanning is available on the device and request the camera permission before you start a scan session: `[](#%5F%5Fcodelineno-7-1)import { BarcodeScanner } from '@capawesome-team/capacitor-barcode-scanner'; [](#%5F%5Fcodelineno-7-2) [](#%5F%5Fcodelineno-7-3)const isAvailable = async () => { [](#%5F%5Fcodelineno-7-4) const { available } = await BarcodeScanner.isAvailable(); [](#%5F%5Fcodelineno-7-5) return available; [](#%5F%5Fcodelineno-7-6)}; [](#%5F%5Fcodelineno-7-7) [](#%5F%5Fcodelineno-7-8)const requestPermissions = async () => { [](#%5F%5Fcodelineno-7-9) const { camera } = await BarcodeScanner.requestPermissions(); [](#%5F%5Fcodelineno-7-10) return camera; [](#%5F%5Fcodelineno-7-11)}; ` If the user has denied the camera permission, open the native app settings page so that the user can grant it: `[](#%5F%5Fcodelineno-8-1)import { BarcodeScanner } from '@capawesome-team/capacitor-barcode-scanner'; [](#%5F%5Fcodelineno-8-2) [](#%5F%5Fcodelineno-8-3)const openSettings = async () => { [](#%5F%5Fcodelineno-8-4) await BarcodeScanner.openSettings(); [](#%5F%5Fcodelineno-8-5)}; ` ### Scan a barcode with the fullscreen scanner[¶](#scan-a-barcode-with-the-fullscreen-scanner "Permanent link") Open the ready-made fullscreen scanner and customize its user interface. Only barcodes that are fully inside the viewfinder are detected. The promise resolves with the first detected barcode: `[](#%5F%5Fcodelineno-9-1)import { [](#%5F%5Fcodelineno-9-2) BarcodeFormat, [](#%5F%5Fcodelineno-9-3) BarcodeScanner, [](#%5F%5Fcodelineno-9-4)} from '@capawesome-team/capacitor-barcode-scanner'; [](#%5F%5Fcodelineno-9-5) [](#%5F%5Fcodelineno-9-6)const scanSingleBarcode = async () => { [](#%5F%5Fcodelineno-9-7) const { barcodes } = await BarcodeScanner.scan({ [](#%5F%5Fcodelineno-9-8) formats: [BarcodeFormat.QrCode, BarcodeFormat.Ean13], [](#%5F%5Fcodelineno-9-9) ui: { [](#%5F%5Fcodelineno-9-10) accentColor: '#59C7F9', [](#%5F%5Fcodelineno-9-11) instructions: 'Point your camera at a barcode.', [](#%5F%5Fcodelineno-9-12) title: 'Scan Barcode', [](#%5F%5Fcodelineno-9-13) }, [](#%5F%5Fcodelineno-9-14) }); [](#%5F%5Fcodelineno-9-15) return barcodes[0]; [](#%5F%5Fcodelineno-9-16)}; ` ### Scan multiple barcodes in one session[¶](#scan-multiple-barcodes-in-one-session "Permanent link") Enable the batch mode to let the user collect multiple barcodes. The promise resolves with all of them when the user taps the done button: `[](#%5F%5Fcodelineno-10-1)import { BarcodeScanner } from '@capawesome-team/capacitor-barcode-scanner'; [](#%5F%5Fcodelineno-10-2) [](#%5F%5Fcodelineno-10-3)const scanMultipleBarcodes = async () => { [](#%5F%5Fcodelineno-10-4) const { barcodes } = await BarcodeScanner.scan({ [](#%5F%5Fcodelineno-10-5) batch: true, [](#%5F%5Fcodelineno-10-6) }); [](#%5F%5Fcodelineno-10-7) return barcodes; [](#%5F%5Fcodelineno-10-8)}; ` ### Scan barcodes with the embedded camera view[¶](#scan-barcodes-with-the-embedded-camera-view "Permanent link") Start an embedded scan session to render the camera preview inside a frame of your app layout. Detected barcodes are emitted continuously via the `barcodesScanned` event until you call `stopScan()`. The camera preview is a **native view**. By default, it is rendered **above** the web view, which means that HTML elements cannot overlap the camera preview. Use a placeholder element to reserve the space in your layout and to measure the frame: `[](#%5F%5Fcodelineno-11-1)import { [](#%5F%5Fcodelineno-11-2) BarcodeScanner, [](#%5F%5Fcodelineno-11-3) LensFacing, [](#%5F%5Fcodelineno-11-4)} from '@capawesome-team/capacitor-barcode-scanner'; [](#%5F%5Fcodelineno-11-5) [](#%5F%5Fcodelineno-11-6)const getScanFrame = () => { [](#%5F%5Fcodelineno-11-7) const rect = document.querySelector('#scanner').getBoundingClientRect(); [](#%5F%5Fcodelineno-11-8) return { x: rect.x, y: rect.y, width: rect.width, height: rect.height }; [](#%5F%5Fcodelineno-11-9)}; [](#%5F%5Fcodelineno-11-10) [](#%5F%5Fcodelineno-11-11)const startEmbeddedScan = async () => { [](#%5F%5Fcodelineno-11-12) await BarcodeScanner.addListener('barcodesScanned', (event) => { [](#%5F%5Fcodelineno-11-13) console.log('Scanned barcodes:', event.barcodes); [](#%5F%5Fcodelineno-11-14) }); [](#%5F%5Fcodelineno-11-15) await BarcodeScanner.startScan({ [](#%5F%5Fcodelineno-11-16) frame: getScanFrame(), [](#%5F%5Fcodelineno-11-17) lensFacing: LensFacing.Back, [](#%5F%5Fcodelineno-11-18) }); [](#%5F%5Fcodelineno-11-19)}; [](#%5F%5Fcodelineno-11-20) [](#%5F%5Fcodelineno-11-21)const stopEmbeddedScan = async () => { [](#%5F%5Fcodelineno-11-22) await BarcodeScanner.stopScan(); [](#%5F%5Fcodelineno-11-23) await BarcodeScanner.removeAllListeners(); [](#%5F%5Fcodelineno-11-24)}; ` ### Overlay HTML elements over the embedded camera view[¶](#overlay-html-elements-over-the-embedded-camera-view "Permanent link") Set `placement` to `PreviewPlacement.Behind` to render the camera preview **behind** the web view. This way, HTML elements can overlap the camera preview, for example to draw a viewfinder or detection markers. The camera preview is only visible where your app is transparent. The placeholder element used to measure the frame, all its ancestors and the `body` must have a transparent background over the frame area: `[](#%5F%5Fcodelineno-12-1)body, [](#%5F%5Fcodelineno-12-2)#scanner { [](#%5F%5Fcodelineno-12-3) background: transparent; [](#%5F%5Fcodelineno-12-4)} ` With Ionic Framework UI components, also set `--background: transparent` on the surrounding `ion-content` element. `[](#%5F%5Fcodelineno-13-1)import { [](#%5F%5Fcodelineno-13-2) BarcodeScanner, [](#%5F%5Fcodelineno-13-3) PreviewPlacement, [](#%5F%5Fcodelineno-13-4)} from '@capawesome-team/capacitor-barcode-scanner'; [](#%5F%5Fcodelineno-13-5) [](#%5F%5Fcodelineno-13-6)const startEmbeddedScanBehindWebView = async () => { [](#%5F%5Fcodelineno-13-7) await BarcodeScanner.startScan({ [](#%5F%5Fcodelineno-13-8) frame: getScanFrame(), [](#%5F%5Fcodelineno-13-9) placement: PreviewPlacement.Behind, [](#%5F%5Fcodelineno-13-10) }); [](#%5F%5Fcodelineno-13-11)}; ` ### Update the frame of the embedded camera view[¶](#update-the-frame-of-the-embedded-camera-view "Permanent link") When the layout of your app changes (for example after an orientation change), update the frame of the active scan session: `[](#%5F%5Fcodelineno-14-1)import { BarcodeScanner } from '@capawesome-team/capacitor-barcode-scanner'; [](#%5F%5Fcodelineno-14-2) [](#%5F%5Fcodelineno-14-3)window.addEventListener('resize', async () => { [](#%5F%5Fcodelineno-14-4) await BarcodeScanner.setScanFrame({ frame: getScanFrame() }); [](#%5F%5Fcodelineno-14-5)}); ` ### Read barcodes from an image[¶](#read-barcodes-from-an-image "Permanent link") Read barcodes from an image file, for example from an image the user picked with the [File Picker](https://capawesome.io/docs/sdks/capacitor/file-picker/) plugin: `[](#%5F%5Fcodelineno-15-1)import { BarcodeScanner } from '@capawesome-team/capacitor-barcode-scanner'; [](#%5F%5Fcodelineno-15-2) [](#%5F%5Fcodelineno-15-3)const readBarcodesFromImage = async (path: string) => { [](#%5F%5Fcodelineno-15-4) const { barcodes } = await BarcodeScanner.readBarcodesFromImage({ [](#%5F%5Fcodelineno-15-5) path, [](#%5F%5Fcodelineno-15-6) }); [](#%5F%5Fcodelineno-15-7) return barcodes; [](#%5F%5Fcodelineno-15-8)}; ` ## API[¶](#api "Permanent link") * [checkPermissions()](#checkpermissions) * [getZoomRatioRange()](#getzoomratiorange) * [isAvailable()](#isavailable) * [openSettings()](#opensettings) * [pauseScan()](#pausescan) * [readBarcodesFromImage(...)](#readbarcodesfromimage) * [requestPermissions()](#requestpermissions) * [resumeScan()](#resumescan) * [scan(...)](#scan) * [setScanFrame(...)](#setscanframe) * [setTorchEnabled(...)](#settorchenabled) * [setZoomRatio(...)](#setzoomratio) * [startScan(...)](#startscan) * [stopScan()](#stopscan) * [addListener('barcodesScanned', ...)](#addlistenerbarcodesscanned-) * [addListener('scanError', ...)](#addlistenerscanerror-) * [removeAllListeners()](#removealllisteners) * [Interfaces](#interfaces) * [Type Aliases](#type-aliases) * [Enums](#enums) ### checkPermissions()[¶](#checkpermissions "Permanent link") `[](#%5F%5Fcodelineno-16-1)checkPermissions() => Promise ` Check the current camera permission status. On **Web**, the permission status is queried on a best-effort basis. Some browsers do not support the camera permission query and always return `prompt`. **Returns:** `Promise<[PermissionStatus](#permissionstatus)>` **Since:** 0.0.1 --- ### getZoomRatioRange()[¶](#getzoomratiorange "Permanent link") `[](#%5F%5Fcodelineno-17-1)getZoomRatioRange() => Promise ` Get the minimum and maximum zoom ratio supported by the camera. The promise rejects with the `NOT_SCANNING` error code if no scan session started with `startScan(...)` is active. Only available on Android and iOS. **Returns:** `Promise<[GetZoomRatioRangeResult](#getzoomratiorangeresult)>` **Since:** 0.0.1 --- ### isAvailable()[¶](#isavailable "Permanent link") `[](#%5F%5Fcodelineno-18-1)isAvailable() => Promise ` Check whether barcode scanning is available on the device. On **Android** and **iOS**, this resolves to `true` if the device has a camera. On **Web**, this resolves to `true` if the browser supports camera access and the `BarcodeDetector` API is available (natively or via a polyfill). **Returns:** `Promise<[IsAvailableResult](#isavailableresult)>` **Since:** 0.0.1 --- ### openSettings()[¶](#opensettings "Permanent link") `[](#%5F%5Fcodelineno-19-1)openSettings() => Promise ` Open the native app settings page so that the user can grant the camera permission. Only available on Android and iOS. **Since:** 0.0.1 --- ### pauseScan()[¶](#pausescan "Permanent link") `[](#%5F%5Fcodelineno-20-1)pauseScan() => Promise ` Pause the barcode detection of the active scan session. The camera preview stays visible but no more `barcodesScanned` events are emitted until `resumeScan()` is called. The promise rejects with the `NOT_SCANNING` error code if no scan session is active. **Since:** 0.0.1 --- ### readBarcodesFromImage(...)[¶](#readbarcodesfromimage "Permanent link") `[](#%5F%5Fcodelineno-21-1)readBarcodesFromImage(options: ReadBarcodesFromImageOptions) => Promise ` Read barcodes from an image file. | Param | Type | | ----------- | ------------------------------------------------------------- | | **options** | [ReadBarcodesFromImageOptions](#readbarcodesfromimageoptions) | **Returns:** `Promise<[ReadBarcodesFromImageResult](#readbarcodesfromimageresult)>` **Since:** 0.0.1 --- ### requestPermissions()[¶](#requestpermissions "Permanent link") `[](#%5F%5Fcodelineno-22-1)requestPermissions() => Promise ` Request the camera permission. **Returns:** `Promise<[PermissionStatus](#permissionstatus)>` **Since:** 0.0.1 --- ### resumeScan()[¶](#resumescan "Permanent link") `[](#%5F%5Fcodelineno-23-1)resumeScan() => Promise ` Resume the barcode detection of the active scan session after it has been paused with `pauseScan()`. The promise rejects with the `NOT_SCANNING` error code if no scan session is active. **Since:** 0.0.1 --- ### scan(...)[¶](#scan "Permanent link") `[](#%5F%5Fcodelineno-24-1)scan(options?: ScanOptions | undefined) => Promise ` Open the ready-made fullscreen scanner user interface. In single-shot mode (default), the promise resolves with the first detected barcode. In batch mode, the user collects multiple barcodes and the promise resolves with all of them when the user taps the done button. Only barcodes that are fully inside the viewfinder are detected. The promise rejects with the `SCAN_CANCELED` error code if the user closes the scanner without a result. Only available on Android and iOS. | Param | Type | | ----------- | --------------------------- | | **options** | [ScanOptions](#scanoptions) | **Returns:** `Promise<[ScanResult](#scanresult)>` **Since:** 0.0.1 --- ### setScanFrame(...)[¶](#setscanframe "Permanent link") `[](#%5F%5Fcodelineno-25-1)setScanFrame(options: SetScanFrameOptions) => Promise ` Update the frame of the active scan session, for example after an orientation change or when the layout of your app changes. The promise rejects with the `NOT_SCANNING` error code if no scan session is active. | Param | Type | | ----------- | ------------------------------------------- | | **options** | [SetScanFrameOptions](#setscanframeoptions) | **Since:** 0.0.1 --- ### setTorchEnabled(...)[¶](#settorchenabled "Permanent link") `[](#%5F%5Fcodelineno-26-1)setTorchEnabled(options: SetTorchEnabledOptions) => Promise ` Enable or disable the torch (flashlight) during an active scan session. The promise rejects with the `NOT_SCANNING` error code if no scan session started with `startScan(...)` is active. Only available on Android and iOS. | Param | Type | | ----------- | ------------------------------------------------- | | **options** | [SetTorchEnabledOptions](#settorchenabledoptions) | **Since:** 0.0.1 --- ### setZoomRatio(...)[¶](#setzoomratio "Permanent link") `[](#%5F%5Fcodelineno-27-1)setZoomRatio(options: SetZoomRatioOptions) => Promise ` Set the zoom ratio of the camera during an active scan session. The promise rejects with the `NOT_SCANNING` error code if no scan session started with `startScan(...)` is active. Only available on Android and iOS. | Param | Type | | ----------- | ------------------------------------------- | | **options** | [SetZoomRatioOptions](#setzoomratiooptions) | **Since:** 0.0.1 --- ### startScan(...)[¶](#startscan "Permanent link") `[](#%5F%5Fcodelineno-28-1)startScan(options: StartScanOptions) => Promise ` Start an embedded scan session. The camera preview is rendered natively in the given frame. Use a placeholder element to measure the frame (e.g. with `getBoundingClientRect()`) and reserve the space in your layout. By default, the camera preview is rendered **above** the web view so that HTML elements cannot overlap it. Set `placement` to `PreviewPlacement.Behind` to render the camera preview **behind** the web view so that HTML elements can overlap it (see the `placement`property for the requirements). Detected barcodes are emitted via the `barcodesScanned` event until `stopScan()` is called. The promise rejects with the `ALREADY_SCANNING` error code if a scan session is already active. | Param | Type | | ----------- | ------------------------------------- | | **options** | [StartScanOptions](#startscanoptions) | **Since:** 0.0.1 --- ### stopScan()[¶](#stopscan "Permanent link") `[](#%5F%5Fcodelineno-29-1)stopScan() => Promise ` Stop the active scan session and remove the camera preview. The promise rejects with the `NOT_SCANNING` error code if no scan session is active. **Since:** 0.0.1 --- ### addListener('barcodesScanned', ...)[¶](#addlistenerbarcodesscanned "Permanent link") `[](#%5F%5Fcodelineno-30-1)addListener(eventName: 'barcodesScanned', listenerFunc: (event: BarcodesScannedEvent) => void) => Promise ` Called when barcodes are detected during an active scan session. | Param | Type | | ---------------- | -------------------------------------------------------------- | | **eventName** | 'barcodesScanned' | | **listenerFunc** | (event: [BarcodesScannedEvent](#barcodesscannedevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.0.1 --- ### addListener('scanError', ...)[¶](#addlistenerscanerror "Permanent link") `[](#%5F%5Fcodelineno-31-1)addListener(eventName: 'scanError', listenerFunc: (event: ScanErrorEvent) => void) => Promise ` Called when an error occurs during an active scan session. | Param | Type | | ---------------- | -------------------------------------------------- | | **eventName** | 'scanError' | | **listenerFunc** | (event: [ScanErrorEvent](#scanerrorevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.0.1 --- ### removeAllListeners()[¶](#removealllisteners "Permanent link") `[](#%5F%5Fcodelineno-32-1)removeAllListeners() => Promise ` Remove all listeners for this plugin. **Since:** 0.0.1 --- ### Interfaces[¶](#interfaces "Permanent link") #### PermissionStatus[¶](#permissionstatus "Permanent link") | Prop | Type | Description | Since | | ---------- | ----------------------------------- | ---------------------------- | ----- | | **camera** | [PermissionState](#permissionstate) | The camera permission state. | 0.0.1 | #### GetZoomRatioRangeResult[¶](#getzoomratiorangeresult "Permanent link") | Prop | Type | Description | Since | | ------- | ------ | ----------------------- | ----- | | **max** | number | The maximum zoom ratio. | 0.0.1 | | **min** | number | The minimum zoom ratio. | 0.0.1 | #### IsAvailableResult[¶](#isavailableresult "Permanent link") | Prop | Type | Description | Since | | ------------- | ------- | ----------------------------------------------------------- | ----- | | **available** | boolean | Whether or not barcode scanning is available on the device. | 0.0.1 | #### ReadBarcodesFromImageResult[¶](#readbarcodesfromimageresult "Permanent link") | Prop | Type | Description | Since | | ------------ | ----------- | ---------------------- | ----- | | **barcodes** | Barcode\[\] | The detected barcodes. | 0.0.1 | #### Barcode[¶](#barcode "Permanent link") | Prop | Type | Description | Since | | ---------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----- | | **bytes** | number\[\] \| null | The raw bytes of the barcode. Only available on Android. On iOS and Web, this is always null. | 0.0.1 | | **cornerPoints** | \[number, number\]\[\] \| null | The four corner points of the barcode in clockwise order starting at the top-left corner. During an embedded scan session, the corner points are in CSS pixels relative to the top-left corner of the scan frame. During a fullscreen scan session, the corner points are in CSS pixels relative to the top-left corner of the screen. For readBarcodesFromImage(...), the corner points are in pixels relative to the top-left corner of the image. This value might be null if the corner points cannot be determined. | 0.0.1 | | **displayValue** | string | The barcode value in a human-readable format. | 0.0.1 | | **format** | [BarcodeFormat](#barcodeformat) | The format of the barcode. | 0.0.1 | | **rawValue** | string | The barcode value as it was encoded in the barcode. | 0.0.1 | #### ReadBarcodesFromImageOptions[¶](#readbarcodesfromimageoptions "Permanent link") | Prop | Type | Description | Since | | ----------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ----- | | **formats** | BarcodeFormat\[\] | The barcode formats to detect. If not set, all supported formats are detected. Improve the performance by only setting the formats you need. | 0.0.1 | | **path** | string | The path of the image file to read the barcodes from. On **Web**, this must be a URL that can be fetched by the browser. | 0.0.1 | #### ScanResult[¶](#scanresult "Permanent link") | Prop | Type | Description | Since | | ------------ | ----------- | ----------------------------------------------------------------------------- | ----- | | **barcodes** | Barcode\[\] | The scanned barcodes. In single-shot mode, this contains exactly one element. | 0.0.1 | #### ScanOptions[¶](#scanoptions "Permanent link") | Prop | Type | Description | Default | Since | | -------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----- | | **batch** | boolean | Whether or not to scan multiple barcodes in one session. If true, the scanner collects the detected barcodes and resolves when the user taps the done button. If false, the scanner resolves with the first detected barcode. | false | 0.0.1 | | **formats** | BarcodeFormat\[\] | The barcode formats to detect. If not set, all supported formats are detected. Improve the performance by only setting the formats you need. | | 0.0.1 | | **lensFacing** | [LensFacing](#lensfacing) | The camera lens to use. | LensFacing.Back | 0.0.1 | | **ui** | [ScanUiOptions](#scanuioptions) | Options to customize the scanner user interface. | | 0.0.1 | #### ScanUiOptions[¶](#scanuioptions "Permanent link") | Prop | Type | Description | Default | Since | | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----- | | **accentColor** | string | The accent color of the scanner user interface as a hex color code (e.g. #59C7F9). The accent color is applied to the viewfinder corners and the done button. | | 0.0.1 | | **beep** | boolean | Whether or not to play a beep sound when a barcode is detected. | false | 0.0.1 | | **hapticFeedback** | boolean | Whether or not to trigger a haptic feedback when a barcode is detected. | true | 0.0.1 | | **instructions** | string | The instructions text displayed below the title. | | 0.0.1 | | **showFlipCameraButton** | boolean | Whether or not to show the flip camera button. | false | 0.0.1 | | **showTorchButton** | boolean | Whether or not to show the torch button. | true | 0.0.1 | | **title** | string | The title displayed at the top of the scanner user interface. | | 0.0.1 | #### SetScanFrameOptions[¶](#setscanframeoptions "Permanent link") | Prop | Type | Description | Since | | --------- | ----------------------- | ---------------------------------- | ----- | | **frame** | [ScanFrame](#scanframe) | The new frame of the scan session. | 0.0.1 | #### ScanFrame[¶](#scanframe "Permanent link") | Prop | Type | Description | Since | | ---------- | ------ | -------------------------------------------------------------------------------------------- | ----- | | **height** | number | The height of the frame in CSS pixels. | 0.0.1 | | **width** | number | The width of the frame in CSS pixels. | 0.0.1 | | **x** | number | The x coordinate of the frame in CSS pixels relative to the top-left corner of the viewport. | 0.0.1 | | **y** | number | The y coordinate of the frame in CSS pixels relative to the top-left corner of the viewport. | 0.0.1 | #### SetTorchEnabledOptions[¶](#settorchenabledoptions "Permanent link") | Prop | Type | Description | Since | | ----------- | ------- | ----------------------------------- | ----- | | **enabled** | boolean | Whether or not to enable the torch. | 0.0.1 | #### SetZoomRatioOptions[¶](#setzoomratiooptions "Permanent link") | Prop | Type | Description | Since | | --------- | ------ | ---------------------------------------------------------------------------------------- | ----- | | **ratio** | number | The zoom ratio to set. Must be a value within the range returned by getZoomRatioRange(). | 0.0.1 | #### StartScanOptions[¶](#startscanoptions "Permanent link") | Prop | Type | Description | Default | Since | | -------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----- | | **detectionArea** | [DetectionArea](#detectionarea) | The area within the scan frame in which barcodes are detected. Barcodes that are detected outside of this area are ignored. If not set, barcodes are detected in the entire scan frame. | | 0.0.1 | | **duplicateTimeout** | number | The time in milliseconds after which the same barcode is emitted again. | 1500 | 0.0.1 | | **formats** | BarcodeFormat\[\] | The barcode formats to detect. If not set, all supported formats are detected. Improve the performance by only setting the formats you need. | | 0.0.1 | | **frame** | [ScanFrame](#scanframe) | The frame in which the camera preview is rendered. The coordinates are in CSS pixels relative to the top-left corner of the viewport. | | 0.0.1 | | **lensFacing** | [LensFacing](#lensfacing) | The camera lens to use. | LensFacing.Back | 0.0.1 | | **placement** | [PreviewPlacement](#previewplacement) | Where the camera preview is rendered relative to the web view. With [PreviewPlacement.Above](#previewplacement), HTML elements cannot overlap the camera preview. With [PreviewPlacement.Behind](#previewplacement), HTML elements can overlap the camera preview, for example to draw a viewfinder or detection markers. The camera preview is only visible where your app is transparent. The placeholder element used to measure the frame, all its ancestors and the body must have a transparent background over the frame area. | PreviewPlacement.Above | 0.0.1 | #### DetectionArea[¶](#detectionarea "Permanent link") | Prop | Type | Description | Since | | ---------- | ------ | ------------------------------------------------------------------------------------------------------- | ----- | | **height** | number | The height of the detection area in CSS pixels. | 0.0.1 | | **width** | number | The width of the detection area in CSS pixels. | 0.0.1 | | **x** | number | The x coordinate of the detection area in CSS pixels relative to the top-left corner of the scan frame. | 0.0.1 | | **y** | number | The y coordinate of the detection area in CSS pixels relative to the top-left corner of the scan frame. | 0.0.1 | #### PluginListenerHandle[¶](#pluginlistenerhandle "Permanent link") | Prop | Type | | ---------- | ------------------- | | **remove** | () => Promise | #### BarcodesScannedEvent[¶](#barcodesscannedevent "Permanent link") | Prop | Type | Description | Since | | ------------ | ----------- | ---------------------- | ----- | | **barcodes** | Barcode\[\] | The detected barcodes. | 0.0.1 | #### ScanErrorEvent[¶](#scanerrorevent "Permanent link") | Prop | Type | Description | Since | | ----------- | ------ | ------------------ | ----- | | **message** | string | The error message. | 0.0.1 | ### Type Aliases[¶](#type-aliases "Permanent link") #### PermissionState[¶](#permissionstate "Permanent link") `'prompt' | 'prompt-with-rationale' | 'granted' | 'denied'` ### Enums[¶](#enums "Permanent link") #### BarcodeFormat[¶](#barcodeformat "Permanent link") | Members | Value | Description | Since | | -------------- | -------------- | ------------------------------------------------------------------------------------- | ----- | | **Aztec** | 'AZTEC' | Aztec barcode. | 0.0.1 | | **Codabar** | 'CODABAR' | Codabar barcode. On **iOS**, this format is only detected by the camera on iOS 15.4+. | 0.0.1 | | **Code128** | 'CODE\_128' | Code 128 barcode. | 0.0.1 | | **Code39** | 'CODE\_39' | Code 39 barcode. | 0.0.1 | | **Code93** | 'CODE\_93' | Code 93 barcode. | 0.0.1 | | **DataMatrix** | 'DATA\_MATRIX' | Data Matrix barcode. | 0.0.1 | | **Ean13** | 'EAN\_13' | EAN-13 barcode. | 0.0.1 | | **Ean8** | 'EAN\_8' | EAN-8 barcode. | 0.0.1 | | **Itf** | 'ITF' | ITF (Interleaved 2 of 5) barcode. | 0.0.1 | | **Pdf417** | 'PDF\_417' | PDF417 barcode. | 0.0.1 | | **QrCode** | 'QR\_CODE' | QR code. | 0.0.1 | | **UpcA** | 'UPC\_A' | UPC-A barcode. | 0.0.1 | | **UpcE** | 'UPC\_E' | UPC-E barcode. | 0.0.1 | #### LensFacing[¶](#lensfacing "Permanent link") | Members | Value | Description | Since | | --------- | ------- | ----------------- | ----- | | **Back** | 'BACK' | The back camera. | 0.0.1 | | **Front** | 'FRONT' | The front camera. | 0.0.1 | #### PreviewPlacement[¶](#previewplacement "Permanent link") | Members | Value | Description | Since | | ---------- | -------- | --------------------------------------------------- | ----- | | **Above** | 'ABOVE' | The camera preview is rendered above the web view. | 0.0.1 | | **Behind** | 'BEHIND' | The camera preview is rendered behind the web view. | 0.0.1 | ## Supported Barcode Formats[¶](#supported-barcode-formats "Permanent link") | Format | Android | iOS | Web ¹ | | ------------ | ------- | --- | ----- | | AZTEC | ✅ | ✅ | ✅ | | CODABAR | ✅ | ✅ ² | ✅ | | CODE\_39 | ✅ | ✅ | ✅ | | CODE\_93 | ✅ | ✅ | ✅ | | CODE\_128 | ✅ | ✅ | ✅ | | DATA\_MATRIX | ✅ | ✅ | ✅ | | EAN\_8 | ✅ | ✅ | ✅ | | EAN\_13 | ✅ | ✅ | ✅ | | ITF | ✅ | ✅ | ✅ | | PDF\_417 | ✅ | ✅ | ✅ | | QR\_CODE | ✅ | ✅ | ✅ | | UPC\_A | ✅ | ✅ ³ | ✅ | | UPC\_E | ✅ | ✅ | ✅ | ¹ On the web, the supported formats depend on the browser (or the polyfill). ² Camera scanning of Codabar barcodes requires iOS 15.4+. Reading Codabar barcodes from images works on all supported iOS versions. ³ Apple's frameworks report UPC-A barcodes as EAN-13 barcodes with a leading `0`. The plugin normalizes them to `UPC_A` (unless you explicitly request only `EAN_13`), so the behavior is consistent across platforms. ## Migration from ML Kit Barcode Scanning[¶](#migration-from-ml-kit-barcode-scanning "Permanent link") If you are migrating from the [ML Kit Barcode Scanning](https://capawesome.io/docs/sdks/capacitor/mlkit/barcode-scanning/) plugin, the following table maps the most important APIs: | @capacitor-mlkit/barcode-scanning | @capawesome-team/capacitor-barcode-scanner | | --------------------------------------- | ------------------------------------------------- | | scan() | scan() (fullscreen UI, now also with batch mode) | | startScan() (transparent web view) | startScan() (embedded native view with frame) | | stopScan() | stopScan() | | — | pauseScan() / resumeScan() | | readBarcodesFromImage() | readBarcodesFromImage() | | isSupported() | isAvailable() | | enableTorch() / disableTorch() | setTorchEnabled({ enabled }) | | setZoomRatio() / getZoomRatio() | setZoomRatio() / getZoomRatioRange() | | getMinZoomRatio() / getMaxZoomRatio() | getZoomRatioRange() | | checkPermissions() | checkPermissions() | | requestPermissions() | requestPermissions() | | openSettings() | openSettings() | | isGoogleBarcodeScannerModuleAvailable() | Not needed (the scanner UI is part of the plugin) | | addListener('barcodesScanned') | addListener('barcodesScanned') | | addListener('scanError') | addListener('scanError') | **Key differences**: * The camera preview is rendered inside a frame you provide, by default **above** the web view. You no longer need to make your app transparent (`hideBackground()`) during a scan, and HTML can no longer accidentally cover the camera. If you want to overlay HTML elements, opt in to rendering the camera preview behind the web view with the `placement` option. * The `barcode.cornerPoints` are relative to the scan frame (embedded mode) or the image (`readBarcodesFromImage(...)`), not to the screen. * Structured payload parsing (e.g. WiFi credentials, vCard contacts, driver licenses) is not yet supported. The `rawValue` is always returned, so you can parse the payload yourself. This feature is planned as a fast-follow. ## FAQ[¶](#faq "Permanent link") ### How is this plugin different from other similar plugins?[¶](#how-is-this-plugin-different-from-other-similar-plugins "Permanent link") It offers two presentation modes — a themeable, ready-made fullscreen scanner and a true embedded native camera view — plus batch scanning, pause/resume, torch and zoom control, a configurable detection area and reading barcodes from image files across 13 formats. On iOS it is built purely on AVFoundation and Vision, so there are no third-party pods, no Swift Package Manager limitations and no arm64 simulator issues. On Android it uses the bundled ML Kit model so scanning works offline, and on the web it uses the `BarcodeDetector` API — all through one fully typed, actively maintained API with dedicated support. If you only need a quick one-off scan, a minimal setup can be enough; if you want a polished UI, an embedded view and consistent behavior on Android, iOS and the Web, this plugin is designed for that. ### Why does the embedded camera view cover my HTML elements?[¶](#why-does-the-embedded-camera-view-cover-my-html-elements "Permanent link") By default, the embedded camera preview is a native view that is rendered above the web view. This is a deliberate design decision: it avoids the "camera not showing" issue class of transparent web view approaches. If you need buttons or overlays, place them outside the scan frame, use the fullscreen `scan(...)` mode which provides a themeable native UI, or set the `placement` option to `PreviewPlacement.Behind` to render the camera preview behind the web view. ### Is the fullscreen scanner available on the web?[¶](#is-the-fullscreen-scanner-available-on-the-web "Permanent link") No. The `scan(...)` method as well as torch and zoom control are not available on the web. However, you can build your own web scanner UI on top of the embedded mode (`startScan(...)`), which is fully supported on the web via the `BarcodeDetector` API. ### Why is the `bytes` property always `null` on iOS and Web?[¶](#why-is-the-bytes-property-always-null-on-ios-and-web "Permanent link") Apple's AVFoundation and the web `BarcodeDetector` API only expose the string value of a barcode. The raw bytes are only available on Android. ### Does scanning work offline?[¶](#does-scanning-work-offline "Permanent link") Yes. On Android, the plugin uses the bundled ML Kit model. On iOS, it uses the built-in AVFoundation framework. No network connection or Google Play services module download is required. ### Can I use this plugin with Ionic, React, Vue or Angular?[¶](#can-i-use-this-plugin-with-ionic-react-vue-or-angular "Permanent link") Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects. ## Related Plugins[¶](#related-plugins "Permanent link") * [Document Scanner](https://capawesome.io/docs/sdks/capacitor/document-scanner/): Scan documents with the native fullscreen scanner. * [File Picker](https://capawesome.io/docs/sdks/capacitor/file-picker/): Pick images to read barcodes from. * [ML Kit Barcode Scanning](https://capawesome.io/docs/sdks/capacitor/mlkit/barcode-scanning/): Scan barcodes and QR codes with ML Kit Barcode Scanning. * [Torch](https://capawesome.io/docs/sdks/capacitor/torch/): Control the flashlight outside of a scan session. ## Newsletter[¶](#newsletter "Permanent link") Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our [Capawesome Newsletter](https://cloud.capawesome.io/newsletter/). ## Changelog[¶](#changelog "Permanent link") See [CHANGELOG.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/barcode-scanner/CHANGELOG.md). ## Breaking Changes[¶](#breaking-changes "Permanent link") See [BREAKING.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/barcode-scanner/BREAKING.md). ## License[¶](#license "Permanent link") See [LICENSE](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/barcode-scanner/LICENSE). August 15, 2026 Back to top ```json {"@context": "https://schema.org", "@graph": [{"@type": "TechArticle", "@id": "https://capawesome.io/docs/sdks/capacitor/barcode-scanner/#article", "headline": "Capacitor Barcode Scanner Plugin", "name": "Capacitor Barcode Scanner Plugin", "description": "Capacitor Barcode Scanner plugin to scan barcodes and QR codes on Android, iOS, and Web using the camera or images, with batch and embedded scanning.", "inLanguage": "en", "url": "https://capawesome.io/docs/sdks/capacitor/barcode-scanner/", "mainEntityOfPage": "https://capawesome.io/docs/sdks/capacitor/barcode-scanner/", "author": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "publisher": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "about": {"@id": "https://capawesome.io/docs/sdks/capacitor/barcode-scanner/#software"}}, {"@type": "SoftwareSourceCode", "@id": "https://capawesome.io/docs/sdks/capacitor/barcode-scanner/#software", "name": "Capacitor Barcode Scanner Plugin", "description": "Capacitor Barcode Scanner plugin to scan barcodes and QR codes on Android, iOS, and Web using the camera or images, with batch and embedded scanning.", "url": "https://capawesome.io/docs/sdks/capacitor/barcode-scanner/", "programmingLanguage": "TypeScript", "runtimePlatform": "Capacitor", "codeRepository": "https://github.com/capawesome-team", "author": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "publisher": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}}]} {"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "How is this plugin different from other similar plugins?", "acceptedAnswer": {"@type": "Answer", "text": "It offers two presentation modes — a themeable, ready-made fullscreen scanner and a true embedded native camera view — plus batch scanning, pause/resume, torch and zoom control, a configurable detection area and reading barcodes from image files across 13 formats. On iOS it is built purely on AVFoundation and Vision, so there are no third-party pods, no Swift Package Manager limitations and no arm64 simulator issues. On Android it uses the bundled ML Kit model so scanning works offline, and on the web it uses the BarcodeDetector API — all through one fully typed, actively maintained API with dedicated support. If you only need a quick one-off scan, a minimal setup can be enough; if you want a polished UI, an embedded view and consistent behavior on Android, iOS and the Web, this plugin is designed for that."}}, {"@type": "Question", "name": "Why does the embedded camera view cover my HTML elements?", "acceptedAnswer": {"@type": "Answer", "text": "By default, the embedded camera preview is a native view that is rendered above the web view. This is a deliberate design decision: it avoids the \"camera not showing\" issue class of transparent web view approaches. If you need buttons or overlays, place them outside the scan frame, use the fullscreen scan(...) mode which provides a themeable native UI, or set the placement option to PreviewPlacement.Behind to render the camera preview behind the web view."}}, {"@type": "Question", "name": "Is the fullscreen scanner available on the web?", "acceptedAnswer": {"@type": "Answer", "text": "No. The scan(...) method as well as torch and zoom control are not available on the web. However, you can build your own web scanner UI on top of the embedded mode ( startScan(...)), which is fully supported on the web via the BarcodeDetector API."}}, {"@type": "Question", "name": "Why is the bytes property always null on iOS and Web?", "acceptedAnswer": {"@type": "Answer", "text": "Apple's AVFoundation and the web BarcodeDetector API only expose the string value of a barcode. The raw bytes are only available on Android."}}, {"@type": "Question", "name": "Does scanning work offline?", "acceptedAnswer": {"@type": "Answer", "text": "Yes. On Android, the plugin uses the bundled ML Kit model. On iOS, it uses the built-in AVFoundation framework. No network connection or Google Play services module download is required."}}, {"@type": "Question", "name": "Can I use this plugin with Ionic, React, Vue or Angular?", "acceptedAnswer": {"@type": "Answer", "text": "Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects."}}], "url": "https://capawesome.io/docs/sdks/capacitor/barcode-scanner/"} ```