--- description: Unofficial Capacitor plugin for Google ML Kit Barcode Scanning SDK to scan barcodes and QR codes. with support for Android, iOS, and Web. title: Capacitor Barcode Scanner Plugin for Android, iOS & Web - Capawesome image: https://capawesome.io/docs/assets/images/social/sdks/capacitor/mlkit/barcode-scanning.png --- [Skip to content ](#capacitor-ml-kit-barcode-scanning-plugin) [πŸ–₯️ Introducing the **Capacitor Electron Platform** β€” build desktop apps for macOS, Windows, and Linux. Free & open source. ](/blog/announcing-the-capacitor-electron-platform/) * [ SDKs ](/docs/sdks/) * [ Formbricks ](/docs/sdks/capacitor/formbricks/) * [ Geocoder ](/docs/sdks/capacitor/geocoder/) * [ 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/) * [ 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/) * [ Localization ](/docs/sdks/capacitor/localization/) * [ Mail Composer ](/docs/sdks/capacitor/mail-composer/) * [ Managed Configurations ](/docs/sdks/capacitor/managed-configurations/) * [ Maps Launcher ](/docs/sdks/capacitor/maps-launcher/) * [ Media Session ](/docs/sdks/capacitor/media-session/) * [ ML Kit ](/docs/sdks/capacitor/mlkit/) * [ iOS ](#ios) * [ Usage Description ](#usage-description) * [ Web ](#web) * [ Configuration ](#configuration) * [ Demo ](#demo%5F1) * [ Usage ](#usage) * [ API ](#api) * [ Type Aliases ](#type-aliases) * [ Enums ](#enums) * [ FAQ ](#faq) * [ Related Plugins ](#related-plugins) * [ Terms & Privacy ](#terms-privacy) * [ Newsletter ](#newsletter) * [ Changelog ](#changelog) * [ License ](#license) * [ Digital Ink Recognition ](/docs/sdks/capacitor/mlkit/digital-ink-recognition/) * [ Document Scanner ](/docs/sdks/capacitor/mlkit/document-scanner/) * [ Entity Extraction ](/docs/sdks/capacitor/mlkit/entity-extraction/) * [ Face Detection ](/docs/sdks/capacitor/mlkit/face-detection/) * [ Face Mesh Detection ](/docs/sdks/capacitor/mlkit/face-mesh-detection/) * [ GenAI Image Description ](/docs/sdks/capacitor/mlkit/genai-image-description/) * [ GenAI Prompt ](/docs/sdks/capacitor/mlkit/genai-prompt/) * [ GenAI Proofreading ](/docs/sdks/capacitor/mlkit/genai-proofreading/) * [ GenAI Rewriting ](/docs/sdks/capacitor/mlkit/genai-rewriting/) * [ GenAI Speech Recognition ](/docs/sdks/capacitor/mlkit/genai-speech-recognition/) * [ GenAI Summarization ](/docs/sdks/capacitor/mlkit/genai-summarization/) * [ Image Labeling ](/docs/sdks/capacitor/mlkit/image-labeling/) * [ Language Identification ](/docs/sdks/capacitor/mlkit/language-identification/) * [ Object Detection ](/docs/sdks/capacitor/mlkit/object-detection/) * [ Pose Detection ](/docs/sdks/capacitor/mlkit/pose-detection/) * [ Selfie Segmentation ](/docs/sdks/capacitor/mlkit/selfie-segmentation/) * [ Smart Reply ](/docs/sdks/capacitor/mlkit/smart-reply/) * [ Subject Segmentation ](/docs/sdks/capacitor/mlkit/subject-segmentation/) * [ Text Recognition ](/docs/sdks/capacitor/mlkit/text-recognition/) * [ Translation ](/docs/sdks/capacitor/mlkit/translation/) * [ 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/) * [ 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/) * [ Overwrite 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/) * Account * [ Organization ](/docs/cloud/organizations/) * [ Two-Factor Enforcement ](/docs/cloud/organizations/two-factor-authentication/) * [ 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) * [ Usage Description ](#usage-description) * [ Web ](#web) * [ Configuration ](#configuration) * [ Demo ](#demo%5F1) * [ Usage ](#usage) * [ API ](#api) * [ Type Aliases ](#type-aliases) * [ Enums ](#enums) * [ FAQ ](#faq) * [ Related Plugins ](#related-plugins) * [ Terms & Privacy ](#terms-privacy) * [ Newsletter ](#newsletter) * [ Changelog ](#changelog) * [ License ](#license) # Capacitor ML Kit Barcode Scanning Plugin[ΒΆ](#capacitor-ml-kit-barcode-scanning-plugin "Permanent link") Unofficial Capacitor plugin for [ML Kit Barcode Scanning](https://developers.google.com/ml-kit/vision/barcode-scanning).[1](#fn:1)[2](#fn:2) [ ![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") * 🧩 Optional ready-to-use interface without webview customizations * 🏎️ Extremely fast * πŸ“· Scan multiple barcodes at once * ⏺️ Define detection area * 🏞️ Reading barcodes from images * πŸ”¦ Torch and Autofocus support * πŸ”‹ Supports Android, iOS and web For a complete list of **supported barcodes**, see [BarcodeFormat](#barcodeformat). ## Use Cases[ΒΆ](#use-cases "Permanent link") The Barcode Scanning plugin is typically used whenever an app needs to read a barcode or QR code with the camera, for example: * **QR code scanning**: Read QR codes containing URLs, Wi-Fi credentials, contact details, or calendar events. * **Product lookup and inventory**: Scan EAN and UPC product barcodes in retail, warehouse, or inventory apps. * **Ticket and access validation**: Check in visitors by scanning tickets or badges encoded as Aztec, PDF417, or Data Matrix codes. * **Identity capture**: Read driver licenses and ID cards that encode their data in a barcode. * **Importing barcodes from images**: Read barcodes from existing photos, for example a screenshot of a QR code. ## Compatibility[ΒΆ](#compatibility "Permanent link") | Plugin Version | Capacitor Version | Status | | -------------- | ----------------- | -------------- | | 8.x.x | \>=8.x.x | Active support | | 7.x.x | 7.x.x | Deprecated | | 6.x.x | 6.x.x | Deprecated | | 5.x.x | 5.x.x | Deprecated | ## Demo[ΒΆ](#demo "Permanent link") A working example can be found here: | Android | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![Android demo of the ML Kit Barcode Scanning plugin](../../../../assets/external/user-images.githubusercontent.com/13857929/224423595-b7e97595-8b2b-4cd7-b500-b30e10e11dfc.gif) | ## Guides[ΒΆ](#guides "Permanent link") * [Announcing the Capacitor ML Kit Barcode Scanning Plugin](https://capawesome.io/blog/announcing-the-capacitor-mlkit-barcode-scanner-plugin/) * [How to build an Ionic Barcode Scanner with Capacitor](https://ionic.io/blog/how-to-build-an-ionic-barcode-scanner-with-capacitor) ## Installation[ΒΆ](#installation "Permanent link") 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-0-1)npx skills add capawesome-team/skills --skill capacitor-plugins ` Then use the following prompt: `` [](#%5F%5Fcodelineno-1-1)Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capacitor-mlkit/barcode-scanning` 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-2-1)npm install @capacitor-mlkit/barcode-scanning [](#%5F%5Fcodelineno-2-2)npx cap sync ` **Attention**: This plugin **only supports CocoaPods** for iOS dependency management. Swift Package Manager (SPM) is not supported for the ML Kit SDK, see [this comment](https://github.com/googlesamples/mlkit/issues/180#issuecomment-1298964099). ### Android[ΒΆ](#android "Permanent link") #### Permissions[ΒΆ](#permissions "Permanent link") This API requires the following permissions be added to your `AndroidManifest.xml` before the `application` tag: `[](#%5F%5Fcodelineno-3-1) ` You also need to add the following meta data **in** the `application` tag in your `AndroidManifest.xml`: `[](#%5F%5Fcodelineno-4-1) [](#%5F%5Fcodelineno-4-2) ` #### Variables[ΒΆ](#variables "Permanent link") If needed, you can define the following project variable in your app’s `variables.gradle` file to change the default version of the dependency: * `$androidxCameraCamera2Version` version of `androidx.camera:camera-camera2` (default: `1.5.2`) * `$androidxCameraCoreVersion` version of `androidx.camera:camera-core` (default: `1.5.2`) * `$androidxCameraLifecycleVersion` version of `androidx.camera:camera-lifecycle` (default: `1.5.2`) * `$androidxCameraViewVersion` version of `androidx.camera:camera-view` (default: `1.5.2`) * `$listenableFutureVersion` version of `com.google.guava:listenablefuture` (default: `1.0`) * `$mlkitBarcodeScanningVersion` version of `com.google.mlkit:barcode-scanning` (default: `17.3.0`) * `$playServicesCodeScannerVersion` version of `com.google.android.gms:play-services-code-scanner` (default: `16.1.0`) This can be useful if you encounter dependency conflicts with other plugins in your project. ### iOS[ΒΆ](#ios "Permanent link") #### Minimum Deployment Target[ΒΆ](#minimum-deployment-target "Permanent link") Make sure to set the deployment target in your `ios/App/Podfile` to at least `15.5`: `[](#%5F%5Fcodelineno-5-1)platform :ios, '15.5' ` ### Usage Description[ΒΆ](#usage-description "Permanent link") Add the `NSCameraUsageDescription` key to the `ios/App/App/Info.plist` file, which tells the user why the app needs to use the camera: `[](#%5F%5Fcodelineno-6-1)+ NSCameraUsageDescription [](#%5F%5Fcodelineno-6-2)+ The app enables the scanning of various barcodes. ` ### Web[ΒΆ](#web "Permanent link") #### Polyfill[ΒΆ](#polyfill "Permanent link") This plugin uses the [Barcode Detection API](https://developer.mozilla.org/en-US/docs/Web/API/Barcode%5FDetection%5FAPI) to scan barcodes in the browser. This API is not yet supported in all browsers. You can check the compatibility [here](https://caniuse.com/mdn-api%5Fbarcodedetector). For this reason, we recommend installing the [barcode-detector](https://www.npmjs.com/package/barcode-detector) package for a better compatibility: `[](#%5F%5Fcodelineno-7-1)npm install barcode-detector ` This package provides a polyfill that uses [ZXing-C++ WebAssembly](https://github.com/Sec-ant/zxing-wasm) under the hood. After installing the package, you just need to import the polyfill in your code: `[](#%5F%5Fcodelineno-8-1)import "barcode-detector/polyfill"; ` ## Configuration[ΒΆ](#configuration "Permanent link") No configuration required for this plugin. ## Demo[ΒΆ](#demo%5F1 "Permanent link") A working example can be found here: [robingenz/capacitor-mlkit-plugin-demo](https://github.com/robingenz/capacitor-mlkit-plugin-demo) ## Usage[ΒΆ](#usage "Permanent link") The following examples show how to scan barcodes with your own UI or the ready-to-use interface, control the torch and zoom, install the Google Barcode Scanner module, and manage camera permissions. ### Scan barcodes with your own UI[ΒΆ](#scan-barcodes-with-your-own-ui "Permanent link") The `startScan(...)` method renders the camera behind the WebView so that you can build your own scanning UI on top of it. Add a listener to be notified about scanned barcodes and call `stopScan()` when you are done: `` [](#%5F%5Fcodelineno-9-1)import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning'; [](#%5F%5Fcodelineno-9-2) [](#%5F%5Fcodelineno-9-3)const startScan = async () => { [](#%5F%5Fcodelineno-9-4) // The camera is visible behind the WebView, so that you can customize the UI in the WebView. [](#%5F%5Fcodelineno-9-5) // However, this means that you have to hide all elements that should not be visible. [](#%5F%5Fcodelineno-9-6) // You can find an example in our demo repository. [](#%5F%5Fcodelineno-9-7) // In this case we set a class `barcode-scanner-active`, which then contains certain CSS rules for our app. [](#%5F%5Fcodelineno-9-8) document.querySelector('body')?.classList.add('barcode-scanner-active'); [](#%5F%5Fcodelineno-9-9) [](#%5F%5Fcodelineno-9-10) // Add the `barcodeScanned` listener [](#%5F%5Fcodelineno-9-11) const listener = await BarcodeScanner.addListener( [](#%5F%5Fcodelineno-9-12) 'barcodeScanned', [](#%5F%5Fcodelineno-9-13) async result => { [](#%5F%5Fcodelineno-9-14) console.log(result.barcode); [](#%5F%5Fcodelineno-9-15) }, [](#%5F%5Fcodelineno-9-16) ); [](#%5F%5Fcodelineno-9-17) [](#%5F%5Fcodelineno-9-18) // Start the barcode scanner [](#%5F%5Fcodelineno-9-19) await BarcodeScanner.startScan(); [](#%5F%5Fcodelineno-9-20)}; [](#%5F%5Fcodelineno-9-21) [](#%5F%5Fcodelineno-9-22)const stopScan = async () => { [](#%5F%5Fcodelineno-9-23) // Make all elements in the WebView visible again [](#%5F%5Fcodelineno-9-24) document.querySelector('body')?.classList.remove('barcode-scanner-active'); [](#%5F%5Fcodelineno-9-25) [](#%5F%5Fcodelineno-9-26) // Remove all listeners [](#%5F%5Fcodelineno-9-27) await BarcodeScanner.removeAllListeners(); [](#%5F%5Fcodelineno-9-28) [](#%5F%5Fcodelineno-9-29) // Stop the barcode scanner [](#%5F%5Fcodelineno-9-30) await BarcodeScanner.stopScan(); [](#%5F%5Fcodelineno-9-31)}; `` ### Scan a single barcode[ΒΆ](#scan-a-single-barcode "Permanent link") If you only need one result, remove the listener and stop the scan as soon as the first barcode is scanned: `[](#%5F%5Fcodelineno-10-1)import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning'; [](#%5F%5Fcodelineno-10-2) [](#%5F%5Fcodelineno-10-3)const scanSingleBarcode = async () => { [](#%5F%5Fcodelineno-10-4) return new Promise(async resolve => { [](#%5F%5Fcodelineno-10-5) document.querySelector('body')?.classList.add('barcode-scanner-active'); [](#%5F%5Fcodelineno-10-6) [](#%5F%5Fcodelineno-10-7) const listener = await BarcodeScanner.addListener( [](#%5F%5Fcodelineno-10-8) 'barcodeScanned', [](#%5F%5Fcodelineno-10-9) async result => { [](#%5F%5Fcodelineno-10-10) await listener.remove(); [](#%5F%5Fcodelineno-10-11) document [](#%5F%5Fcodelineno-10-12) .querySelector('body') [](#%5F%5Fcodelineno-10-13) ?.classList.remove('barcode-scanner-active'); [](#%5F%5Fcodelineno-10-14) await BarcodeScanner.stopScan(); [](#%5F%5Fcodelineno-10-15) resolve(result.barcode); [](#%5F%5Fcodelineno-10-16) }, [](#%5F%5Fcodelineno-10-17) ); [](#%5F%5Fcodelineno-10-18) [](#%5F%5Fcodelineno-10-19) await BarcodeScanner.startScan(); [](#%5F%5Fcodelineno-10-20) }); [](#%5F%5Fcodelineno-10-21)}; ` ### Scan with the ready-to-use interface[ΒΆ](#scan-with-the-ready-to-use-interface "Permanent link") The `scan(...)` method opens a ready-to-use scanning interface without any WebView customization. Only available on Android and iOS. On Android, this requires the Google Barcode Scanner module (see [below](#install-the-google-barcode-scanner-module)), but no camera permission: `[](#%5F%5Fcodelineno-11-1)import { BarcodeScanner, BarcodeFormat } from '@capacitor-mlkit/barcode-scanning'; [](#%5F%5Fcodelineno-11-2) [](#%5F%5Fcodelineno-11-3)const scan = async () => { [](#%5F%5Fcodelineno-11-4) const { barcodes } = await BarcodeScanner.scan({ [](#%5F%5Fcodelineno-11-5) formats: [BarcodeFormat.QrCode], [](#%5F%5Fcodelineno-11-6) autoZoom: true, [](#%5F%5Fcodelineno-11-7) }); [](#%5F%5Fcodelineno-11-8) return barcodes; [](#%5F%5Fcodelineno-11-9)}; ` ### Check if the barcode scanner is supported[ΒΆ](#check-if-the-barcode-scanner-is-supported "Permanent link") Check whether the device has a camera that can be used for barcode scanning: `[](#%5F%5Fcodelineno-12-1)import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning'; [](#%5F%5Fcodelineno-12-2) [](#%5F%5Fcodelineno-12-3)const isSupported = async () => { [](#%5F%5Fcodelineno-12-4) const { supported } = await BarcodeScanner.isSupported(); [](#%5F%5Fcodelineno-12-5) return supported; [](#%5F%5Fcodelineno-12-6)}; ` ### Control the torch[ΒΆ](#control-the-torch "Permanent link") Use the [Capacitor Torch](https://capawesome.io/docs/sdks/capacitor/torch/) plugin to switch the flashlight on and off during a scan session: `[](#%5F%5Fcodelineno-13-1)import { Torch } from '@capawesome/capacitor-torch'; [](#%5F%5Fcodelineno-13-2) [](#%5F%5Fcodelineno-13-3)const enableTorch = async () => { [](#%5F%5Fcodelineno-13-4) await Torch.enable(); [](#%5F%5Fcodelineno-13-5)}; [](#%5F%5Fcodelineno-13-6) [](#%5F%5Fcodelineno-13-7)const disableTorch = async () => { [](#%5F%5Fcodelineno-13-8) await Torch.disable(); [](#%5F%5Fcodelineno-13-9)}; [](#%5F%5Fcodelineno-13-10) [](#%5F%5Fcodelineno-13-11)const toggleTorch = async () => { [](#%5F%5Fcodelineno-13-12) await Torch.toggle(); [](#%5F%5Fcodelineno-13-13)}; [](#%5F%5Fcodelineno-13-14) [](#%5F%5Fcodelineno-13-15)const isTorchEnabled = async () => { [](#%5F%5Fcodelineno-13-16) const { enabled } = await Torch.isEnabled(); [](#%5F%5Fcodelineno-13-17) return enabled; [](#%5F%5Fcodelineno-13-18)}; [](#%5F%5Fcodelineno-13-19) [](#%5F%5Fcodelineno-13-20)const isTorchAvailable = async () => { [](#%5F%5Fcodelineno-13-21) const { available } = await Torch.isAvailable(); [](#%5F%5Fcodelineno-13-22) return available; [](#%5F%5Fcodelineno-13-23)}; ` ### Control the zoom[ΒΆ](#control-the-zoom "Permanent link") Set and read the zoom ratio of the camera. These methods are only available on Android and iOS: `[](#%5F%5Fcodelineno-14-1)import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning'; [](#%5F%5Fcodelineno-14-2) [](#%5F%5Fcodelineno-14-3)const setZoomRatio = async () => { [](#%5F%5Fcodelineno-14-4) await BarcodeScanner.setZoomRatio({ zoomRatio: 0.5 }); [](#%5F%5Fcodelineno-14-5)}; [](#%5F%5Fcodelineno-14-6) [](#%5F%5Fcodelineno-14-7)const getZoomRatio = async () => { [](#%5F%5Fcodelineno-14-8) const { zoomRatio } = await BarcodeScanner.getZoomRatio(); [](#%5F%5Fcodelineno-14-9) return zoomRatio; [](#%5F%5Fcodelineno-14-10)}; [](#%5F%5Fcodelineno-14-11) [](#%5F%5Fcodelineno-14-12)const getMinZoomRatio = async () => { [](#%5F%5Fcodelineno-14-13) const { zoomRatio } = await BarcodeScanner.getMinZoomRatio(); [](#%5F%5Fcodelineno-14-14) return zoomRatio; [](#%5F%5Fcodelineno-14-15)}; [](#%5F%5Fcodelineno-14-16) [](#%5F%5Fcodelineno-14-17)const getMaxZoomRatio = async () => { [](#%5F%5Fcodelineno-14-18) const { zoomRatio } = await BarcodeScanner.getMaxZoomRatio(); [](#%5F%5Fcodelineno-14-19) return zoomRatio; [](#%5F%5Fcodelineno-14-20)}; ` ### Install the Google Barcode Scanner module[ΒΆ](#install-the-google-barcode-scanner-module "Permanent link") On Android, the `scan(...)` method requires the Google Barcode Scanner module. Check if it is available and install it if needed. The installation only starts with this call; the `googleBarcodeScannerModuleInstallProgress` event notifies you about the progress. Only available on Android: `[](#%5F%5Fcodelineno-15-1)import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning'; [](#%5F%5Fcodelineno-15-2) [](#%5F%5Fcodelineno-15-3)const isGoogleBarcodeScannerModuleAvailable = async () => { [](#%5F%5Fcodelineno-15-4) const { available } = [](#%5F%5Fcodelineno-15-5) await BarcodeScanner.isGoogleBarcodeScannerModuleAvailable(); [](#%5F%5Fcodelineno-15-6) return available; [](#%5F%5Fcodelineno-15-7)}; [](#%5F%5Fcodelineno-15-8) [](#%5F%5Fcodelineno-15-9)const installGoogleBarcodeScannerModule = async () => { [](#%5F%5Fcodelineno-15-10) await BarcodeScanner.installGoogleBarcodeScannerModule(); [](#%5F%5Fcodelineno-15-11)}; ` ### Check and request permissions[ΒΆ](#check-and-request-permissions "Permanent link") The `startScan(...)` method requires the camera permission. You can check and request it, and open the app settings so that the user can grant the permission manually: `[](#%5F%5Fcodelineno-16-1)import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning'; [](#%5F%5Fcodelineno-16-2) [](#%5F%5Fcodelineno-16-3)const checkPermissions = async () => { [](#%5F%5Fcodelineno-16-4) const { camera } = await BarcodeScanner.checkPermissions(); [](#%5F%5Fcodelineno-16-5) return camera; [](#%5F%5Fcodelineno-16-6)}; [](#%5F%5Fcodelineno-16-7) [](#%5F%5Fcodelineno-16-8)const requestPermissions = async () => { [](#%5F%5Fcodelineno-16-9) const { camera } = await BarcodeScanner.requestPermissions(); [](#%5F%5Fcodelineno-16-10) return camera; [](#%5F%5Fcodelineno-16-11)}; [](#%5F%5Fcodelineno-16-12) [](#%5F%5Fcodelineno-16-13)const openSettings = async () => { [](#%5F%5Fcodelineno-16-14) await BarcodeScanner.openSettings(); [](#%5F%5Fcodelineno-16-15)}; ` ### Hide all WebView elements during a scan[ΒΆ](#hide-all-webview-elements-during-a-scan "Permanent link") Since the camera is rendered behind the WebView when using `startScan(...)`, you have to hide all elements that should not be visible. An example of the CSS class `barcode-scanner-active` **with** Ionic Framework could be: `[](#%5F%5Fcodelineno-17-1)// Hide all elements [](#%5F%5Fcodelineno-17-2)body.barcode-scanner-active { [](#%5F%5Fcodelineno-17-3) visibility: hidden; [](#%5F%5Fcodelineno-17-4) --background: transparent; [](#%5F%5Fcodelineno-17-5) --ion-background-color: transparent; [](#%5F%5Fcodelineno-17-6)} [](#%5F%5Fcodelineno-17-7) [](#%5F%5Fcodelineno-17-8)// Show only the barcode scanner modal [](#%5F%5Fcodelineno-17-9).barcode-scanner-modal { [](#%5F%5Fcodelineno-17-10) visibility: visible; [](#%5F%5Fcodelineno-17-11)} [](#%5F%5Fcodelineno-17-12) [](#%5F%5Fcodelineno-17-13)@media (prefers-color-scheme: dark) { [](#%5F%5Fcodelineno-17-14) .barcode-scanner-modal { [](#%5F%5Fcodelineno-17-15) --background: transparent; [](#%5F%5Fcodelineno-17-16) --ion-background-color: transparent; [](#%5F%5Fcodelineno-17-17) } [](#%5F%5Fcodelineno-17-18)} ` An example of the CSS class `barcode-scanner-active` **without** Ionic Framework could be: `[](#%5F%5Fcodelineno-18-1)// Hide all elements [](#%5F%5Fcodelineno-18-2)body.barcode-scanner-active { [](#%5F%5Fcodelineno-18-3) visibility: hidden; [](#%5F%5Fcodelineno-18-4)} [](#%5F%5Fcodelineno-18-5) [](#%5F%5Fcodelineno-18-6)// Show only the barcode scanner modal [](#%5F%5Fcodelineno-18-7).barcode-scanner-modal { [](#%5F%5Fcodelineno-18-8) visibility: visible; [](#%5F%5Fcodelineno-18-9)} ` If you can't see the camera view, make sure all elements in the DOM are not visible or have a transparent background to debug the issue. ## API[ΒΆ](#api "Permanent link") * [startScan(...)](#startscan) * [stopScan()](#stopscan) * [readBarcodesFromImage(...)](#readbarcodesfromimage) * [scan(...)](#scan) * [isSupported()](#issupported) * [enableTorch()](#enabletorch) * [disableTorch()](#disabletorch) * [toggleTorch()](#toggletorch) * [isTorchEnabled()](#istorchenabled) * [isTorchAvailable()](#istorchavailable) * [setZoomRatio(...)](#setzoomratio) * [getZoomRatio()](#getzoomratio) * [getMinZoomRatio()](#getminzoomratio) * [getMaxZoomRatio()](#getmaxzoomratio) * [openSettings()](#opensettings) * [isGoogleBarcodeScannerModuleAvailable()](#isgooglebarcodescannermoduleavailable) * [installGoogleBarcodeScannerModule()](#installgooglebarcodescannermodule) * [checkPermissions()](#checkpermissions) * [requestPermissions()](#requestpermissions) * [addListener('barcodesScanned', ...)](#addlistenerbarcodesscanned-) * [addListener('scanError', ...)](#addlistenerscanerror-) * [addListener('googleBarcodeScannerModuleInstallProgress', ...)](#addlistenergooglebarcodescannermoduleinstallprogress-) * [removeAllListeners()](#removealllisteners) * [Interfaces](#interfaces) * [Type Aliases](#type-aliases) * [Enums](#enums) ### startScan(...)[ΒΆ](#startscan "Permanent link") `[](#%5F%5Fcodelineno-19-1)startScan(options?: StartScanOptions | undefined) => Promise ` Start scanning for barcodes. | Param | Type | | ----------- | ------------------------------------- | | **options** | [StartScanOptions](#startscanoptions) | **Since:** 0.0.1 --- ### stopScan()[ΒΆ](#stopscan "Permanent link") `[](#%5F%5Fcodelineno-20-1)stopScan() => Promise ` Stop scanning for barcodes. **Since:** 0.0.1 --- ### readBarcodesFromImage(...)[ΒΆ](#readbarcodesfromimage "Permanent link") `[](#%5F%5Fcodelineno-21-1)readBarcodesFromImage(options: ReadBarcodesFromImageOptions) => Promise ` Read barcodes from an image. | Param | Type | | ----------- | ------------------------------------------------------------- | | **options** | [ReadBarcodesFromImageOptions](#readbarcodesfromimageoptions) | **Returns:** `Promise<[ReadBarcodesFromImageResult](#readbarcodesfromimageresult)>` **Since:** 0.0.1 --- ### scan(...)[ΒΆ](#scan "Permanent link") `[](#%5F%5Fcodelineno-22-1)scan(options?: ScanOptions | undefined) => Promise ` Scan a barcode with a ready-to-use interface without WebView customization. On **Android**, this method is only available on devices with Google Play Services installed. Therefore, no camera permission is required. **Attention:** Before using this method on _Android_, first check if the Google [Barcode](#barcode) Scanner module is available by using `isGoogleBarcodeScannerModuleAvailable()`. Only available on Android and iOS. | Param | Type | | ----------- | --------------------------- | | **options** | [ScanOptions](#scanoptions) | **Returns:** `Promise<[ScanResult](#scanresult)>` **Since:** 0.0.1 --- ### isSupported()[ΒΆ](#issupported "Permanent link") `[](#%5F%5Fcodelineno-23-1)isSupported() => Promise ` Returns whether or not the barcode scanner is supported. **Returns:** `Promise<[IsSupportedResult](#issupportedresult)>` **Since:** 0.0.1 --- ### enableTorch()[ΒΆ](#enabletorch "Permanent link") `[](#%5F%5Fcodelineno-24-1)enableTorch() => Promise ` Enable camera's torch (flash) during a scan session. Only available on Android and iOS. **Since:** 7.2.0 --- ### disableTorch()[ΒΆ](#disabletorch "Permanent link") `[](#%5F%5Fcodelineno-25-1)disableTorch() => Promise ` Disable camera's torch (flash) during a scan session. Only available on Android and iOS. **Since:** 7.2.0 --- ### toggleTorch()[ΒΆ](#toggletorch "Permanent link") `[](#%5F%5Fcodelineno-26-1)toggleTorch() => Promise ` Toggle camera's torch (flash) during a scan session. Only available on Android and iOS. **Since:** 7.2.0 --- ### isTorchEnabled()[ΒΆ](#istorchenabled "Permanent link") `[](#%5F%5Fcodelineno-27-1)isTorchEnabled() => Promise ` Returns whether or not the camera's torch (flash) is enabled. Only available on Android and iOS. **Returns:** `Promise<[IsTorchEnabledResult](#istorchenabledresult)>` **Since:** 7.2.0 --- ### isTorchAvailable()[ΒΆ](#istorchavailable "Permanent link") `[](#%5F%5Fcodelineno-28-1)isTorchAvailable() => Promise ` Returns whether or not the camera's torch (flash) is available. Only available on Android and iOS. **Returns:** `Promise<[IsTorchAvailableResult](#istorchavailableresult)>` **Since:** 7.2.0 --- ### setZoomRatio(...)[ΒΆ](#setzoomratio "Permanent link") `[](#%5F%5Fcodelineno-29-1)setZoomRatio(options: SetZoomRatioOptions) => Promise ` Set the zoom ratio of the camera. Only available on Android and iOS. | Param | Type | | ----------- | ------------------------------------------- | | **options** | [SetZoomRatioOptions](#setzoomratiooptions) | **Since:** 5.4.0 --- ### getZoomRatio()[ΒΆ](#getzoomratio "Permanent link") `[](#%5F%5Fcodelineno-30-1)getZoomRatio() => Promise ` Get the zoom ratio of the camera. Only available on Android and iOS. **Returns:** `Promise<[GetZoomRatioResult](#getzoomratioresult)>` **Since:** 5.4.0 --- ### getMinZoomRatio()[ΒΆ](#getminzoomratio "Permanent link") `[](#%5F%5Fcodelineno-31-1)getMinZoomRatio() => Promise ` Get the minimum zoom ratio of the camera. Only available on Android and iOS. **Returns:** `Promise<[GetMinZoomRatioResult](#getminzoomratioresult)>` **Since:** 5.4.0 --- ### getMaxZoomRatio()[ΒΆ](#getmaxzoomratio "Permanent link") `[](#%5F%5Fcodelineno-32-1)getMaxZoomRatio() => Promise ` Get the maximum zoom ratio of the camera. Only available on Android and iOS. **Returns:** `Promise<[GetMaxZoomRatioResult](#getmaxzoomratioresult)>` **Since:** 5.4.0 --- ### openSettings()[ΒΆ](#opensettings "Permanent link") `[](#%5F%5Fcodelineno-33-1)openSettings() => Promise ` Open the settings of the app so that the user can grant the camera permission. Only available on Android and iOS. **Since:** 0.0.1 --- ### isGoogleBarcodeScannerModuleAvailable()[ΒΆ](#isgooglebarcodescannermoduleavailable "Permanent link") `[](#%5F%5Fcodelineno-34-1)isGoogleBarcodeScannerModuleAvailable() => Promise ` Check if the Google [Barcode](#barcode) Scanner module is available. If the Google [Barcode](#barcode) Scanner module is not available, you can install it by using `installGoogleBarcodeScannerModule()`. Only available on Android. **Returns:** `Promise<[IsGoogleBarcodeScannerModuleAvailableResult](#isgooglebarcodescannermoduleavailableresult)>` **Since:** 5.1.0 --- ### installGoogleBarcodeScannerModule()[ΒΆ](#installgooglebarcodescannermodule "Permanent link") `[](#%5F%5Fcodelineno-35-1)installGoogleBarcodeScannerModule() => Promise ` Install the Google [Barcode](#barcode) Scanner module. **Attention**: This only starts the installation. The `googleBarcodeScannerModuleInstallProgress` event listener will notify you when the installation is complete. Only available on Android. **Since:** 5.1.0 --- ### checkPermissions()[ΒΆ](#checkpermissions "Permanent link") `[](#%5F%5Fcodelineno-36-1)checkPermissions() => Promise ` Check camera permission. **Returns:** `Promise<[PermissionStatus](#permissionstatus)>` **Since:** 0.0.1 --- ### requestPermissions()[ΒΆ](#requestpermissions "Permanent link") `[](#%5F%5Fcodelineno-37-1)requestPermissions() => Promise ` Request camera permission. **Returns:** `Promise<[PermissionStatus](#permissionstatus)>` **Since:** 0.0.1 --- ### addListener('barcodesScanned', ...)[ΒΆ](#addlistenerbarcodesscanned "Permanent link") `[](#%5F%5Fcodelineno-38-1)addListener(eventName: 'barcodesScanned', listenerFunc: (event: BarcodesScannedEvent) => void) => Promise ` Called when barcodes are scanned. | Param | Type | | ---------------- | -------------------------------------------------------------- | | **eventName** | 'barcodesScanned' | | **listenerFunc** | (event: [BarcodesScannedEvent](#barcodesscannedevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 6.2.0 --- ### addListener('scanError', ...)[ΒΆ](#addlistenerscanerror "Permanent link") `[](#%5F%5Fcodelineno-39-1)addListener(eventName: 'scanError', listenerFunc: (event: ScanErrorEvent) => void) => Promise ` Called when an error occurs during the scan. Available on Android and iOS. | Param | Type | | ---------------- | -------------------------------------------------- | | **eventName** | 'scanError' | | **listenerFunc** | (event: [ScanErrorEvent](#scanerrorevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.0.1 --- ### addListener('googleBarcodeScannerModuleInstallProgress', ...)[ΒΆ](#addlistenergooglebarcodescannermoduleinstallprogress "Permanent link") `[](#%5F%5Fcodelineno-40-1)addListener(eventName: 'googleBarcodeScannerModuleInstallProgress', listenerFunc: (event: GoogleBarcodeScannerModuleInstallProgressEvent) => void) => Promise ` Called when the Google [Barcode](#barcode) Scanner module is installed. Available on Android. | Param | Type | | ---------------- | ------------------------------------------------------------------------------------------------------------------ | | **eventName** | 'googleBarcodeScannerModuleInstallProgress' | | **listenerFunc** | (event: [GoogleBarcodeScannerModuleInstallProgressEvent](#googlebarcodescannermoduleinstallprogressevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 5.1.0 --- ### removeAllListeners()[ΒΆ](#removealllisteners "Permanent link") `[](#%5F%5Fcodelineno-41-1)removeAllListeners() => Promise ` Remove all listeners for this plugin. **Since:** 0.0.1 --- ### Interfaces[ΒΆ](#interfaces "Permanent link") #### StartScanOptions[ΒΆ](#startscanoptions "Permanent link") | Prop | Type | Description | Default | Since | | ---------------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ----- | | **formats** | BarcodeFormat\[\] | Improve the speed of the barcode scanner by configuring the barcode formats to scan for. Only available on Android and iOS. | | 0.0.1 | | **lensFacing** | [LensFacing](#lensfacing) | Configure the camera (front or back) to use. | | 0.0.1 | | **resolution** | [Resolution](#resolution) | Configure the resolution of the captured image that is used for barcode scanning. If the resolution is not supported by the device, the closest supported resolution will be used. Only available on Android and iOS. | Resolution\['1280x720'\] | 7.0.0 | | **enableMultitaskingCameraAccess** | boolean | Allow camera usage on iPad while in multitasking mode. Only available on iOS (16.0+). | false | 7.5.0 | | **videoElement** | HTMLVideoElement | The HTML video element to use for the camera preview. Only available on web. | | 7.1.0 | #### 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\[\] | Raw bytes as it was encoded in the barcode. | 0.0.1 | | **calendarEvent** | [BarcodeCalendarEvent](#barcodecalendarevent) | Calendar event info. | 7.0.0 | | **contactInfo** | [BarcodeContactInfo](#barcodecontactinfo) | Person's or organization's business card. | 7.0.0 | | **cornerPoints** | \[\[number, number\], \[number, number\], \[number, number\], \[number, number\]\] | The four corner points of the barcode in clockwise order starting with top-left. This property is currently only supported by the startScan(...) method. | 0.0.1 | | **displayValue** | string | The barcode value in a human readable format. | 0.0.1 | | **driverLicense** | [BarcodeDriverLicense](#barcodedriverlicense) | Driver license or ID card. | 7.0.0 | | **email** | [BarcodeEmail](#barcodeemail) | An email message from a 'MAILTO:'. | 7.0.0 | | **format** | [BarcodeFormat](#barcodeformat) | The barcode format. | 0.0.1 | | **geoPoint** | [BarcodeGeoPoint](#barcodegeopoint) | GPS coordinates from a 'GEO:'. | 7.0.0 | | **phone** | [BarcodePhone](#barcodephone) | Phone number info. | 7.0.0 | | **rawValue** | string | The barcode value in a machine readable format. This value is only available if the barcode is encoded in the UTF-8 character set. Otherwise, the bytes property should be used. | 0.0.1 | | **sms** | [BarcodeSms](#barcodesms) | A sms message from a 'SMS:'. | 7.0.0 | | **urlBookmark** | [BarcodeUrlBookmark](#barcodeurlbookmark) | A URL and title from a 'MEBKM:'. | 7.0.0 | | **valueType** | [BarcodeValueType](#barcodevaluetype) | The barcode value type. | 0.0.1 | | **wifi** | [BarcodeWifi](#barcodewifi) | A wifi network parameters from a 'WIFI:'. | 7.0.0 | #### BarcodeCalendarEvent[ΒΆ](#barcodecalendarevent "Permanent link") | Prop | Type | Description | Since | | --------------- | ------ | ---------------------------------------- | ----- | | **description** | string | The event description. | 7.0.0 | | **end** | string | The event end date as ISO 8601 string. | 7.0.0 | | **location** | string | The event location. | 7.0.0 | | **organizer** | string | The event organizer. | 7.0.0 | | **start** | string | The event start date as ISO 8601 string. | 7.0.0 | | **status** | string | The event status. | 7.0.0 | | **summary** | string | The event summary. | 7.0.0 | #### BarcodeContactInfo[ΒΆ](#barcodecontactinfo "Permanent link") | Prop | Type | Description | Since | | ---------------- | ------------------------- | --------------------------- | ----- | | **addresses** | Address\[\] | The contact's addresses. | 7.0.0 | | **emails** | BarcodeEmail\[\] | The contact's emails. | 7.0.0 | | **personName** | [PersonName](#personname) | The contact's name. | 7.0.0 | | **organization** | string | The contact's organization. | 7.0.0 | | **phones** | BarcodePhone\[\] | The contact's phones. | 7.0.0 | | **title** | string | The contact's title. | 7.0.0 | | **urls** | string\[\] | The contact's urls. | 7.0.0 | #### Address[ΒΆ](#address "Permanent link") | Prop | Type | Description | Since | | ---------------- | --------------------------- | --------------------------------------------------- | ----- | | **addressLines** | string\[\] | Formatted address, multiple lines when appropriate. | 7.0.0 | | **type** | [AddressType](#addresstype) | [Address](#address) type. | 7.0.0 | #### BarcodeEmail[ΒΆ](#barcodeemail "Permanent link") | Prop | Type | Description | Since | | ----------- | ----------------------------------- | ----------------------- | ----- | | **address** | string | The email address. | 7.0.0 | | **body** | string | The email body. | 7.0.0 | | **subject** | string | The email subject. | 7.0.0 | | **type** | [EmailFormatType](#emailformattype) | The email address type. | 7.0.0 | #### PersonName[ΒΆ](#personname "Permanent link") | Prop | Type | Description | Since | | ----------------- | ------ | ------------------------------------------------------------------------------------ | ----- | | **first** | string | First name. | 7.0.0 | | **formattedName** | string | The formatted name. | 7.0.0 | | **last** | string | Last name. | 7.0.0 | | **middle** | string | Middle name. | 7.0.0 | | **prefix** | string | Name prefix. | 7.0.0 | | **pronunciation** | string | Text string to be set as the kana name in the phonebook. Used for Japanese contacts. | 7.0.0 | | **suffix** | string | Name suffix. | 7.0.0 | #### BarcodePhone[ΒΆ](#barcodephone "Permanent link") | Prop | Type | Description | Since | | ---------- | ----------------------------------- | ---------------------- | ----- | | **number** | string | The phone number. | 7.0.0 | | **type** | [PhoneFormatType](#phoneformattype) | The phone number type. | 7.0.0 | #### BarcodeDriverLicense[ΒΆ](#barcodedriverlicense "Permanent link") | Prop | Type | Description | Since | | ------------------ | ------ | -------------------------------------------------- | ----- | | **addressCity** | string | City of holder's address. | 7.0.0 | | **addressState** | string | State of holder's address. | 7.0.0 | | **addressStreet** | string | Street of holder's address. | 7.0.0 | | **addressZip** | string | Postal code of holder's address. | 7.0.0 | | **birthDate** | string | Birthdate of the holder. | 7.0.0 | | **documentType** | string | "DL" for driver's licenses, "ID" for ID cards. | 7.0.0 | | **expiryDate** | string | Expiration date of the license. | 7.0.0 | | **firstName** | string | Holder's first name. | 7.0.0 | | **gender** | string | Holder's gender. | 7.0.0 | | **issueDate** | string | Issue date of the license. | 7.0.0 | | **issuingCountry** | string | ISO 3166-1 alpha-3 code in which DL/ID was issued. | 7.0.0 | | **lastName** | string | Holder's last name. | 7.0.0 | | **licenseNumber** | string | Driver license ID number. | 7.0.0 | | **middleName** | string | Holder's middle name. | 7.0.0 | #### BarcodeGeoPoint[ΒΆ](#barcodegeopoint "Permanent link") | Prop | Type | Description | Since | | ------------- | ------ | ----------- | ----- | | **latitude** | number | Latitude. | 7.0.0 | | **longitude** | number | Longitude. | 7.0.0 | #### BarcodeSms[ΒΆ](#barcodesms "Permanent link") | Prop | Type | Description | Since | | --------------- | ------ | ------------------------------- | ----- | | **phoneNumber** | string | The phone number of the sms. | 7.0.0 | | **message** | string | The message content of the sms. | 7.0.0 | #### BarcodeUrlBookmark[ΒΆ](#barcodeurlbookmark "Permanent link") | Prop | Type | Description | Since | | --------- | ------ | -------------------------- | ----- | | **url** | string | The URL of the bookmark. | 7.0.0 | | **title** | string | The title of the bookmark. | 7.0.0 | #### BarcodeWifi[ΒΆ](#barcodewifi "Permanent link") | Prop | Type | Description | Since | | ------------------ | ----------------------------------------- | ----------------------------- | ----- | | **encryptionType** | [WifiEncryptionType](#wifiencryptiontype) | Encryption type of the WI-FI. | 7.0.0 | | **password** | string | Password of the WI-FI. | 7.0.0 | | **ssid** | string | SSID of the WI-FI. | 7.0.0 | #### ReadBarcodesFromImageOptions[ΒΆ](#readbarcodesfromimageoptions "Permanent link") | Prop | Type | Description | Since | | ----------- | ----------------- | ---------------------------------------------------------------------------------------- | ----- | | **blob** | Blob | The blob instance of the image file. Only available on Web. | 7.4.0 | | **formats** | BarcodeFormat\[\] | Improve the speed of the barcode scanner by configuring the barcode formats to scan for. | 0.0.1 | | **path** | string | The local path to the image file. Only available on Android and iOS. | 0.0.1 | #### ScanResult[ΒΆ](#scanresult "Permanent link") | Prop | Type | Description | Since | | ------------ | ----------- | ---------------------- | ----- | | **barcodes** | Barcode\[\] | The detected barcodes. | 0.0.1 | #### ScanOptions[ΒΆ](#scanoptions "Permanent link") | Prop | Type | Description | Since | | ------------ | ----------------- | ---------------------------------------------------------------------------------------- | ----- | | **formats** | BarcodeFormat\[\] | Improve the speed of the barcode scanner by configuring the barcode formats to scan for. | 0.0.1 | | **autoZoom** | boolean | Toggle the auto zoom feature. | 7.4.0 | #### IsSupportedResult[ΒΆ](#issupportedresult "Permanent link") | Prop | Type | Description | Since | | ------------- | ------- | --------------------------------------------------------------------------------------- | ----- | | **supported** | boolean | Whether or not the barcode scanner is supported by checking if the device has a camera. | 0.0.1 | #### IsTorchEnabledResult[ΒΆ](#istorchenabledresult "Permanent link") | Prop | Type | Description | Since | | ----------- | ------- | ------------------------------------ | ----- | | **enabled** | boolean | Whether or not the torch is enabled. | 0.0.1 | #### IsTorchAvailableResult[ΒΆ](#istorchavailableresult "Permanent link") | Prop | Type | Description | Since | | ------------- | ------- | -------------------------------------- | ----- | | **available** | boolean | Whether or not the torch is available. | 0.0.1 | #### SetZoomRatioOptions[ΒΆ](#setzoomratiooptions "Permanent link") | Prop | Type | Description | Since | | ------------- | ------ | ---------------------- | ----- | | **zoomRatio** | number | The zoom ratio to set. | 5.4.0 | #### GetZoomRatioResult[ΒΆ](#getzoomratioresult "Permanent link") | Prop | Type | Description | Since | | ------------- | ------ | --------------- | ----- | | **zoomRatio** | number | The zoom ratio. | 5.4.0 | #### GetMinZoomRatioResult[ΒΆ](#getminzoomratioresult "Permanent link") | Prop | Type | Description | Since | | ------------- | ------ | ----------------------- | ----- | | **zoomRatio** | number | The minimum zoom ratio. | 5.4.0 | #### GetMaxZoomRatioResult[ΒΆ](#getmaxzoomratioresult "Permanent link") | Prop | Type | Description | Since | | ------------- | ------ | ----------------------- | ----- | | **zoomRatio** | number | The maximum zoom ratio. | 5.4.0 | #### IsGoogleBarcodeScannerModuleAvailableResult[ΒΆ](#isgooglebarcodescannermoduleavailableresult "Permanent link") | Prop | Type | Description | Since | | ------------- | ------- | -------------------------------------------------------------------------- | ----- | | **available** | boolean | Whether or not the Google [Barcode](#barcode) Scanner module is available. | 5.1.0 | #### PermissionStatus[ΒΆ](#permissionstatus "Permanent link") | Prop | Type | Since | | ---------- | ----------------------------------------------- | ----- | | **camera** | [CameraPermissionState](#camerapermissionstate) | 0.0.1 | #### PluginListenerHandle[ΒΆ](#pluginlistenerhandle "Permanent link") | Prop | Type | | ---------- | ------------------- | | **remove** | () => Promise | #### BarcodesScannedEvent[ΒΆ](#barcodesscannedevent "Permanent link") | Prop | Type | Description | Since | | ------------ | ----------- | ---------------------- | ----- | | **barcodes** | Barcode\[\] | The detected barcodes. | 6.2.0 | #### ScanErrorEvent[ΒΆ](#scanerrorevent "Permanent link") | Prop | Type | Description | Since | | ----------- | ------ | ------------------ | ----- | | **message** | string | The error message. | 0.0.1 | #### GoogleBarcodeScannerModuleInstallProgressEvent[ΒΆ](#googlebarcodescannermoduleinstallprogressevent "Permanent link") | Prop | Type | Description | Since | | ------------ | --------------------------------------------------------------------------------- | -------------------------------------------------------------- | ----- | | **state** | [GoogleBarcodeScannerModuleInstallState](#googlebarcodescannermoduleinstallstate) | The current state of the installation. | 5.1.0 | | **progress** | number | The progress of the installation in percent between 0 and 100. | 5.1.0 | ### Type Aliases[ΒΆ](#type-aliases "Permanent link") #### CameraPermissionState[ΒΆ](#camerapermissionstate "Permanent link") `[PermissionState](#permissionstate) | 'limited'` #### PermissionState[ΒΆ](#permissionstate "Permanent link") `'prompt' | 'prompt-with-rationale' | 'granted' | 'denied'` ### Enums[ΒΆ](#enums "Permanent link") #### BarcodeFormat[ΒΆ](#barcodeformat "Permanent link") | Members | Value | Description | Since | | -------------- | -------------- | ---------------------------------- | ----- | | **Aztec** | 'AZTEC' | Only available on Android and iOS. | 0.0.1 | | **Codabar** | 'CODABAR' | Only available on Android and iOS. | 0.0.1 | | **Code39** | 'CODE\_39' | Only available on Android and iOS. | 0.0.1 | | **Code93** | 'CODE\_93' | Only available on Android and iOS. | 0.0.1 | | **Code128** | 'CODE\_128' | Only available on Android and iOS. | 0.0.1 | | **DataMatrix** | 'DATA\_MATRIX' | Only available on Android and iOS. | 0.0.1 | | **Ean8** | 'EAN\_8' | Only available on Android and iOS. | 0.0.1 | | **Ean13** | 'EAN\_13' | Only available on Android and iOS. | 0.0.1 | | **Itf** | 'ITF' | Only available on Android and iOS. | 0.0.1 | | **Pdf417** | 'PDF\_417' | Only available on Android and iOS. | 0.0.1 | | **QrCode** | 'QR\_CODE' | Only available on Android and iOS. | 0.0.1 | | **UpcA** | 'UPC\_A' | Only available on Android and iOS. | 0.0.1 | | **UpcE** | 'UPC\_E' | Only available on Android and iOS. | 0.0.1 | #### LensFacing[ΒΆ](#lensfacing "Permanent link") | Members | Value | Since | | --------- | ------- | ----- | | **Front** | 'FRONT' | 0.0.1 | | **Back** | 'BACK' | 0.0.1 | #### Resolution[ΒΆ](#resolution "Permanent link") | Members | Value | Since | | --------------- | ----- | ----- | | **'640x480'** | 0 | 7.0.0 | | **'1280x720'** | 1 | 7.0.0 | | **'1920x1080'** | 2 | 7.0.0 | | **'3840x2160'** | 3 | 7.2.0 | #### AddressType[ΒΆ](#addresstype "Permanent link") | Members | Value | Since | | ----------- | ----- | ----- | | **HOME** | 0 | 7.0.0 | | **UNKNOWN** | 1 | 7.0.0 | | **WORK** | 2 | 7.0.0 | #### EmailFormatType[ΒΆ](#emailformattype "Permanent link") | Members | Value | Since | | ----------- | ----- | ----- | | **HOME** | 0 | 7.0.0 | | **UNKNOWN** | 1 | 7.0.0 | | **WORK** | 2 | 7.0.0 | #### PhoneFormatType[ΒΆ](#phoneformattype "Permanent link") | Members | Value | Since | | ----------- | ----- | ----- | | **FAX** | 0 | 7.0.0 | | **HOME** | 1 | 7.0.0 | | **MOBILE** | 2 | 7.0.0 | | **UNKNOWN** | 3 | 7.0.0 | | **WORK** | 4 | 7.0.0 | #### BarcodeValueType[ΒΆ](#barcodevaluetype "Permanent link") | Members | Value | Since | | ------------------ | ------------------ | ----- | | **CalendarEvent** | 'CALENDAR\_EVENT' | 0.0.1 | | **ContactInfo** | 'CONTACT\_INFO' | 0.0.1 | | **DriversLicense** | 'DRIVERS\_LICENSE' | 0.0.1 | | **Email** | 'EMAIL' | 0.0.1 | | **Geo** | 'GEO' | 0.0.1 | | **Isbn** | 'ISBN' | 0.0.1 | | **Phone** | 'PHONE' | 0.0.1 | | **Product** | 'PRODUCT' | 0.0.1 | | **Sms** | 'SMS' | 0.0.1 | | **Text** | 'TEXT' | 0.0.1 | | **Url** | 'URL' | 0.0.1 | | **Wifi** | 'WIFI' | 0.0.1 | | **Unknown** | 'UNKNOWN' | 0.0.1 | #### WifiEncryptionType[ΒΆ](#wifiencryptiontype "Permanent link") | Members | Value | Since | | -------- | ----- | ----- | | **OPEN** | 1 | 7.0.0 | | **WEP** | 2 | 7.0.0 | | **WPA** | 3 | 7.0.0 | #### GoogleBarcodeScannerModuleInstallState[ΒΆ](#googlebarcodescannermoduleinstallstate "Permanent link") | Members | Value | Since | | -------------------- | ----- | ----- | | **UNKNOWN** | 0 | 5.1.0 | | **PENDING** | 1 | 5.1.0 | | **DOWNLOADING** | 2 | 5.1.0 | | **CANCELED** | 3 | 5.1.0 | | **COMPLETED** | 4 | 5.1.0 | | **FAILED** | 5 | 5.1.0 | | **INSTALLING** | 6 | 5.1.0 | | **DOWNLOAD\_PAUSED** | 7 | 5.1.0 | ## FAQ[ΒΆ](#faq "Permanent link") ### What is the difference between `startScan` and `scan`?[ΒΆ](#what-is-the-difference-between-startscan-and-scan "Permanent link") The `startScan(...)` method renders the camera behind the WebView so that you can build a completely custom scanning UI, but it requires you to hide all WebView elements that should not be visible (see the [usage example](#hide-all-webview-elements-during-a-scan)). The `scan(...)` method opens a ready-to-use interface without any WebView customization and is only available on Android and iOS. On Android, `scan(...)` requires the Google Barcode Scanner module but no camera permission. ### Why is the camera view not visible during a scan?[ΒΆ](#why-is-the-camera-view-not-visible-during-a-scan "Permanent link") When using `startScan(...)`, the camera is rendered behind the WebView. If any element in the DOM is visible or has an opaque background, it covers the camera view. Make sure to hide all elements or give them a transparent background, as shown in the [usage example](#hide-all-webview-elements-during-a-scan). ### Which barcode formats are supported?[ΒΆ](#which-barcode-formats-are-supported "Permanent link") The plugin supports 13 barcode formats on Android and iOS, including QR Code, Aztec, Codabar, Code 39, Code 93, Code 128, Data Matrix, EAN-8, EAN-13, ITF, PDF417, UPC-A, and UPC-E. See [BarcodeFormat](#barcodeformat) for the complete list. You can improve the scanning speed by restricting the formats via the `formats` option. ### Does the plugin work in the browser?[ΒΆ](#does-the-plugin-work-in-the-browser "Permanent link") Yes, on the Web the plugin uses the [Barcode Detection API](https://developer.mozilla.org/en-US/docs/Web/API/Barcode%5FDetection%5FAPI), which is not yet supported in all browsers. For better compatibility, it is recommended to install the [barcode-detector](https://www.npmjs.com/package/barcode-detector) polyfill as described in the [Installation](#installation) section. ### Do I need the camera permission to scan barcodes?[ΒΆ](#do-i-need-the-camera-permission-to-scan-barcodes "Permanent link") The `startScan(...)` method requires the camera permission, which is why you have to declare the `CAMERA` permission in your `AndroidManifest.xml` and add the `NSCameraUsageDescription` key to your `Info.plist`. The `scan(...)` method on Android is provided by Google Play Services and therefore requires no camera permission. ### 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") * [Torch](https://capawesome.io/docs/sdks/capacitor/torch/): Switch the flashlight on and off during a scan session. * [File Picker](https://capawesome.io/docs/sdks/capacitor/file-picker/): Let the user select an image from the file system or gallery to read barcodes from. * [ML Kit Document Scanner](https://capawesome.io/docs/sdks/capacitor/mlkit/document-scanner/): Scan physical documents with ML Kit Document Scanner. ## Terms & Privacy[ΒΆ](#terms-privacy "Permanent link") This plugin uses the [Google ML Kit](https://developers.google.com/ml-kit): * [Terms & Privacy](https://developers.google.com/ml-kit/terms) * [Android Data Disclosure](https://developers.google.com/ml-kit/android-data-disclosure) * [iOS Data Disclosure](https://developers.google.com/ml-kit/ios-data-disclosure) ## 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-mlkit/blob/main/packages/barcode-scanning/CHANGELOG.md). ## License[ΒΆ](#license "Permanent link") See [LICENSE](https://github.com/capawesome-team/capacitor-mlkit/blob/main/packages/barcode-scanning/LICENSE). --- 1. This project is not affiliated with, endorsed by, sponsored by, or approved by Google LLC or any of their affiliates or subsidiaries. [↩](#fnref:1 "Jump back to footnote 1 in the text") 2. `QR Code` is a registered trademark of DENSO WAVE INCORPORATED. [↩](#fnref:2 "Jump back to footnote 2 in the text") July 8, 2026 Back to top ```json {"@context": "https://schema.org", "@graph": [{"@type": "TechArticle", "@id": "https://capawesome.io/docs/sdks/capacitor/mlkit/barcode-scanning/#article", "headline": "Capacitor Barcode Scanner Plugin for Android, iOS & Web", "name": "Capacitor Barcode Scanner Plugin for Android, iOS & Web", "description": "Unofficial Capacitor plugin for Google ML Kit Barcode Scanning SDK to scan barcodes and QR codes. with support for Android, iOS, and Web.", "inLanguage": "en", "url": "https://capawesome.io/docs/sdks/capacitor/mlkit/barcode-scanning/", "mainEntityOfPage": "https://capawesome.io/docs/sdks/capacitor/mlkit/barcode-scanning/", "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/mlkit/barcode-scanning/#software"}}, {"@type": "SoftwareSourceCode", "@id": "https://capawesome.io/docs/sdks/capacitor/mlkit/barcode-scanning/#software", "name": "Capacitor Barcode Scanner Plugin for Android, iOS & Web", "description": "Unofficial Capacitor plugin for Google ML Kit Barcode Scanning SDK to scan barcodes and QR codes. with support for Android, iOS, and Web.", "url": "https://capawesome.io/docs/sdks/capacitor/mlkit/barcode-scanning/", "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": "What is the difference between startScan and scan?", "acceptedAnswer": {"@type": "Answer", "text": "The startScan(...) method renders the camera behind the WebView so that you can build a completely custom scanning UI, but it requires you to hide all WebView elements that should not be visible (see the usage example). The scan(...) method opens a ready-to-use interface without any WebView customization and is only available on Android and iOS. On Android, scan(...) requires the Google Barcode Scanner module but no camera permission."}}, {"@type": "Question", "name": "Why is the camera view not visible during a scan?", "acceptedAnswer": {"@type": "Answer", "text": "When using startScan(...), the camera is rendered behind the WebView. If any element in the DOM is visible or has an opaque background, it covers the camera view. Make sure to hide all elements or give them a transparent background, as shown in the usage example."}}, {"@type": "Question", "name": "Which barcode formats are supported?", "acceptedAnswer": {"@type": "Answer", "text": "The plugin supports 13 barcode formats on Android and iOS, including QR Code, Aztec, Codabar, Code 39, Code 93, Code 128, Data Matrix, EAN-8, EAN-13, ITF, PDF417, UPC-A, and UPC-E. See BarcodeFormat for the complete list. You can improve the scanning speed by restricting the formats via the formats option."}}, {"@type": "Question", "name": "Does the plugin work in the browser?", "acceptedAnswer": {"@type": "Answer", "text": "Yes, on the Web the plugin uses the Barcode Detection API, which is not yet supported in all browsers. For better compatibility, it is recommended to install the barcode-detector polyfill as described in the Installation section."}}, {"@type": "Question", "name": "Do I need the camera permission to scan barcodes?", "acceptedAnswer": {"@type": "Answer", "text": "The startScan(...) method requires the camera permission, which is why you have to declare the CAMERA permission in your AndroidManifest.xml and add the NSCameraUsageDescription key to your Info.plist. The scan(...) method on Android is provided by Google Play Services and therefore requires no camera permission."}}, {"@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/mlkit/barcode-scanning/"} ```