Skip to content

barcode-scanning

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

barcode-scanning

README.md

Capacitor ML Kit Barcode Scanning Plugin

Unofficial Capacitor plugin for ML Kit Barcode Scanning.12

Features

  • 🧩 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.

Use Cases

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

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

A working example can be found here: https://github.com/robingenz/capacitor-mlkit-plugin-demo

Android
Android demo of the ML Kit Barcode Scanning plugin

Guides

Installation

You can use our AI-Assisted Setup to install the plugin. Add the Capawesome Skills to your AI tool using the following command:

npx skills add capawesome-team/skills --skill capacitor-plugins

Then use the following prompt:

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:

npm install @capacitor-mlkit/barcode-scanning
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.

Android

Permissions

This API requires the following permissions be added to your AndroidManifest.xml before the application tag:

<uses-permission android:name="android.permission.CAMERA" />

You also need to add the following meta data in the application tag in your AndroidManifest.xml:

<meta-data android:name="com.google.mlkit.vision.DEPENDENCIES" android:value="barcode_ui"/>
<!-- To use multiple models: android:value="face,model2,model3" -->

Variables

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

Minimum Deployment Target

Make sure to set the deployment target in your ios/App/Podfile to at least 15.5:

platform :ios, '15.5'

Usage Description

Add the NSCameraUsageDescription key to the ios/App/App/Info.plist file, which tells the user why the app needs to use the camera:

+ <key>NSCameraUsageDescription</key>
+ <string>The app enables the scanning of various barcodes.</string>

Web

Polyfill

This plugin uses the Barcode Detection API to scan barcodes in the browser. This API is not yet supported in all browsers. You can check the compatibility here. For this reason, we recommend installing the barcode-detector package for a better compatibility:

npm install barcode-detector

This package provides a polyfill that uses ZXing-C++ WebAssembly under the hood. After installing the package, you just need to import the polyfill in your code:

import "barcode-detector/polyfill";

Configuration

No configuration required for this plugin.

Demo

A working example can be found here: robingenz/capacitor-mlkit-plugin-demo

Usage

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

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:

import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning';

const startScan = async () => {
  // The camera is visible behind the WebView, so that you can customize the UI in the WebView.
  // However, this means that you have to hide all elements that should not be visible.
  // You can find an example in our demo repository.
  // In this case we set a class `barcode-scanner-active`, which then contains certain CSS rules for our app.
  document.querySelector('body')?.classList.add('barcode-scanner-active');

  // Add the `barcodeScanned` listener
  const listener = await BarcodeScanner.addListener(
    'barcodeScanned',
    async result => {
      console.log(result.barcode);
    },
  );

  // Start the barcode scanner
  await BarcodeScanner.startScan();
};

const stopScan = async () => {
  // Make all elements in the WebView visible again
  document.querySelector('body')?.classList.remove('barcode-scanner-active');

  // Remove all listeners
  await BarcodeScanner.removeAllListeners();

  // Stop the barcode scanner
  await BarcodeScanner.stopScan();
};

Scan a single barcode

If you only need one result, remove the listener and stop the scan as soon as the first barcode is scanned:

import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning';

const scanSingleBarcode = async () => {
  return new Promise(async resolve => {
    document.querySelector('body')?.classList.add('barcode-scanner-active');

    const listener = await BarcodeScanner.addListener(
      'barcodeScanned',
      async result => {
        await listener.remove();
        document
          .querySelector('body')
          ?.classList.remove('barcode-scanner-active');
        await BarcodeScanner.stopScan();
        resolve(result.barcode);
      },
    );

    await BarcodeScanner.startScan();
  });
};

Scan with the ready-to-use interface

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), but no camera permission:

import { BarcodeScanner, BarcodeFormat } from '@capacitor-mlkit/barcode-scanning';

const scan = async () => {
  const { barcodes } = await BarcodeScanner.scan({
    formats: [BarcodeFormat.QrCode],
    autoZoom: true,
  });
  return barcodes;
};

Check if the barcode scanner is supported

Check whether the device has a camera that can be used for barcode scanning:

import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning';

const isSupported = async () => {
  const { supported } = await BarcodeScanner.isSupported();
  return supported;
};

Control the torch

Use the Capacitor Torch plugin to switch the flashlight on and off during a scan session:

import { Torch } from '@capawesome/capacitor-torch';

const enableTorch = async () => {
  await Torch.enable();
};

const disableTorch = async () => {
  await Torch.disable();
};

const toggleTorch = async () => {
  await Torch.toggle();
};

const isTorchEnabled = async () => {
  const { enabled } = await Torch.isEnabled();
  return enabled;
};

const isTorchAvailable = async () => {
  const { available } = await Torch.isAvailable();
  return available;
};

Control the zoom

Set and read the zoom ratio of the camera. These methods are only available on Android and iOS:

import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning';

const setZoomRatio = async () => {
  await BarcodeScanner.setZoomRatio({ zoomRatio: 0.5 });
};

const getZoomRatio = async () => {
  const { zoomRatio } = await BarcodeScanner.getZoomRatio();
  return zoomRatio;
};

const getMinZoomRatio = async () => {
  const { zoomRatio } = await BarcodeScanner.getMinZoomRatio();
  return zoomRatio;
};

const getMaxZoomRatio = async () => {
  const { zoomRatio } = await BarcodeScanner.getMaxZoomRatio();
  return zoomRatio;
};

Install the Google Barcode Scanner module

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:

import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning';

const isGoogleBarcodeScannerModuleAvailable = async () => {
  const { available } =
    await BarcodeScanner.isGoogleBarcodeScannerModuleAvailable();
  return available;
};

const installGoogleBarcodeScannerModule = async () => {
  await BarcodeScanner.installGoogleBarcodeScannerModule();
};

Check and request permissions

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:

import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning';

const checkPermissions = async () => {
  const { camera } = await BarcodeScanner.checkPermissions();
  return camera;
};

const requestPermissions = async () => {
  const { camera } = await BarcodeScanner.requestPermissions();
  return camera;
};

const openSettings = async () => {
  await BarcodeScanner.openSettings();
};

Hide all WebView elements during a scan

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:

// Hide all elements
body.barcode-scanner-active {
  visibility: hidden;
  --background: transparent;
  --ion-background-color: transparent;
}

// Show only the barcode scanner modal
.barcode-scanner-modal {
  visibility: visible;
}

@media (prefers-color-scheme: dark) {
  .barcode-scanner-modal {
    --background: transparent;
    --ion-background-color: transparent;
  }
}

An example of the CSS class barcode-scanner-active without Ionic Framework could be:

// Hide all elements
body.barcode-scanner-active {
  visibility: hidden;
}

// Show only the barcode scanner modal
.barcode-scanner-modal {
  visibility: visible;
}

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

startScan(...)

startScan(options?: StartScanOptions | undefined) => Promise<void>

Start scanning for barcodes.

Param Type
options StartScanOptions

Since: 0.0.1

stopScan()

stopScan() => Promise<void>

Stop scanning for barcodes.

Since: 0.0.1

readBarcodesFromImage(...)

readBarcodesFromImage(options: ReadBarcodesFromImageOptions) => Promise<ReadBarcodesFromImageResult>

Read barcodes from an image.

Param Type
options ReadBarcodesFromImageOptions

Returns: Promise<ReadBarcodesFromImageResult>

Since: 0.0.1

scan(...)

scan(options?: ScanOptions | undefined) => Promise<ScanResult>

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 Scanner module is available by using isGoogleBarcodeScannerModuleAvailable().

Only available on Android and iOS.

Param Type
options ScanOptions

Returns: Promise<ScanResult>

Since: 0.0.1

isSupported()

isSupported() => Promise<IsSupportedResult>

Returns whether or not the barcode scanner is supported.

Returns: Promise<IsSupportedResult>

Since: 0.0.1

enableTorch()

enableTorch() => Promise<void>

Enable camera's torch (flash) during a scan session.

Only available on Android and iOS.

Since: 7.2.0

disableTorch()

disableTorch() => Promise<void>

Disable camera's torch (flash) during a scan session.

Only available on Android and iOS.

Since: 7.2.0

toggleTorch()

toggleTorch() => Promise<void>

Toggle camera's torch (flash) during a scan session.

Only available on Android and iOS.

Since: 7.2.0

isTorchEnabled()

isTorchEnabled() => Promise<IsTorchEnabledResult>

Returns whether or not the camera's torch (flash) is enabled.

Only available on Android and iOS.

Returns: Promise<IsTorchEnabledResult>

Since: 7.2.0

isTorchAvailable()

isTorchAvailable() => Promise<IsTorchAvailableResult>

Returns whether or not the camera's torch (flash) is available.

Only available on Android and iOS.

Returns: Promise<IsTorchAvailableResult>

Since: 7.2.0

setZoomRatio(...)

setZoomRatio(options: SetZoomRatioOptions) => Promise<void>

Set the zoom ratio of the camera.

Only available on Android and iOS.

Param Type
options SetZoomRatioOptions

Since: 5.4.0

getZoomRatio()

getZoomRatio() => Promise<GetZoomRatioResult>

Get the zoom ratio of the camera.

Only available on Android and iOS.

Returns: Promise<GetZoomRatioResult>

Since: 5.4.0

getMinZoomRatio()

getMinZoomRatio() => Promise<GetMinZoomRatioResult>

Get the minimum zoom ratio of the camera.

Only available on Android and iOS.

Returns: Promise<GetMinZoomRatioResult>

Since: 5.4.0

getMaxZoomRatio()

getMaxZoomRatio() => Promise<GetMaxZoomRatioResult>

Get the maximum zoom ratio of the camera.

Only available on Android and iOS.

Returns: Promise<GetMaxZoomRatioResult>

Since: 5.4.0

openSettings()

openSettings() => Promise<void>

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() => Promise<IsGoogleBarcodeScannerModuleAvailableResult>

Check if the Google Barcode Scanner module is available.

If the Google Barcode Scanner module is not available, you can install it by using installGoogleBarcodeScannerModule().

Only available on Android.

Returns: Promise<IsGoogleBarcodeScannerModuleAvailableResult>

Since: 5.1.0

installGoogleBarcodeScannerModule()

installGoogleBarcodeScannerModule() => Promise<void>

Install the Google 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() => Promise<PermissionStatus>

Check camera permission.

Returns: Promise<PermissionStatus>

Since: 0.0.1

requestPermissions()

requestPermissions() => Promise<PermissionStatus>

Request camera permission.

Returns: Promise<PermissionStatus>

Since: 0.0.1

addListener('barcodesScanned', ...)

addListener(eventName: 'barcodesScanned', listenerFunc: (event: BarcodesScannedEvent) => void) => Promise<PluginListenerHandle>

Called when barcodes are scanned.

Param Type
eventName 'barcodesScanned'
listenerFunc (event: BarcodesScannedEvent) => void

Returns: Promise<PluginListenerHandle>

Since: 6.2.0

addListener('scanError', ...)

addListener(eventName: 'scanError', listenerFunc: (event: ScanErrorEvent) => void) => Promise<PluginListenerHandle>

Called when an error occurs during the scan.

Available on Android and iOS.

Param Type
eventName 'scanError'
listenerFunc (event: ScanErrorEvent) => void

Returns: Promise<PluginListenerHandle>

Since: 0.0.1

addListener('googleBarcodeScannerModuleInstallProgress', ...)

addListener(eventName: 'googleBarcodeScannerModuleInstallProgress', listenerFunc: (event: GoogleBarcodeScannerModuleInstallProgressEvent) => void) => Promise<PluginListenerHandle>

Called when the Google Barcode Scanner module is installed.

Available on Android.

Param Type
eventName 'googleBarcodeScannerModuleInstallProgress'
listenerFunc (event: GoogleBarcodeScannerModuleInstallProgressEvent) => void

Returns: Promise<PluginListenerHandle>

Since: 5.1.0

removeAllListeners()

removeAllListeners() => Promise<void>

Remove all listeners for this plugin.

Since: 0.0.1

Interfaces

StartScanOptions

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 Configure the camera (front or back) to use. 0.0.1
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

Prop Type Description Since
barcodes Barcode[] The detected barcodes. 0.0.1

Barcode

Prop Type Description Since
bytes number[] Raw bytes as it was encoded in the barcode. 0.0.1
calendarEvent BarcodeCalendarEvent Calendar event info. 7.0.0
contactInfo 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 Driver license or ID card. 7.0.0
email BarcodeEmail An email message from a 'MAILTO:'. 7.0.0
format BarcodeFormat The barcode format. 0.0.1
geoPoint BarcodeGeoPoint GPS coordinates from a 'GEO:'. 7.0.0
phone 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 A sms message from a 'SMS:'. 7.0.0
urlBookmark BarcodeUrlBookmark A URL and title from a 'MEBKM:'. 7.0.0
valueType BarcodeValueType The barcode value type. 0.0.1
wifi BarcodeWifi A wifi network parameters from a 'WIFI:'. 7.0.0

BarcodeCalendarEvent

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

Prop Type Description Since
addresses Address[] The contact's addresses. 7.0.0
emails BarcodeEmail[] The contact's emails. 7.0.0
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

Prop Type Description Since
addressLines string[] Formatted address, multiple lines when appropriate. 7.0.0
type AddressType Address type. 7.0.0

BarcodeEmail

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 The email address type. 7.0.0

PersonName

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

Prop Type Description Since
number string The phone number. 7.0.0
type PhoneFormatType The phone number type. 7.0.0

BarcodeDriverLicense

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

Prop Type Description Since
latitude number Latitude. 7.0.0
longitude number Longitude. 7.0.0

BarcodeSms

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

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

Prop Type Description Since
encryptionType 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

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

Prop Type Description Since
barcodes Barcode[] The detected barcodes. 0.0.1

ScanOptions

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

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

Prop Type Description Since
enabled boolean Whether or not the torch is enabled. 0.0.1

IsTorchAvailableResult

Prop Type Description Since
available boolean Whether or not the torch is available. 0.0.1

SetZoomRatioOptions

Prop Type Description Since
zoomRatio number The zoom ratio to set. 5.4.0

GetZoomRatioResult

Prop Type Description Since
zoomRatio number The zoom ratio. 5.4.0

GetMinZoomRatioResult

Prop Type Description Since
zoomRatio number The minimum zoom ratio. 5.4.0

GetMaxZoomRatioResult

Prop Type Description Since
zoomRatio number The maximum zoom ratio. 5.4.0

IsGoogleBarcodeScannerModuleAvailableResult

Prop Type Description Since
available boolean Whether or not the Google Barcode Scanner module is available. 5.1.0

PermissionStatus

Prop Type Since
camera CameraPermissionState 0.0.1

PluginListenerHandle

Prop Type
remove () => Promise<void>

BarcodesScannedEvent

Prop Type Description Since
barcodes Barcode[] The detected barcodes. 6.2.0

ScanErrorEvent

Prop Type Description Since
message string The error message. 0.0.1

GoogleBarcodeScannerModuleInstallProgressEvent

Prop Type Description Since
state 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

CameraPermissionState

PermissionState | 'limited'

PermissionState

'prompt' | 'prompt-with-rationale' | 'granted' | 'denied'

Enums

BarcodeFormat

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

Members Value Since
Front 'FRONT' 0.0.1
Back 'BACK' 0.0.1

Resolution

Members Value Since
'640x480' 0 7.0.0
'1280x720' 1 7.0.0
'1920x1080' 2 7.0.0
'3840x2160' 3 7.2.0

AddressType

Members Value Since
HOME 0 7.0.0
UNKNOWN 1 7.0.0
WORK 2 7.0.0

EmailFormatType

Members Value Since
HOME 0 7.0.0
UNKNOWN 1 7.0.0
WORK 2 7.0.0

PhoneFormatType

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

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

Members Value Since
OPEN 1 7.0.0
WEP 2 7.0.0
WPA 3 7.0.0

GoogleBarcodeScannerModuleInstallState

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

What is the difference between startScan and scan?

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.

Why is the camera view not visible during a scan?

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.

Which barcode formats are supported?

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.

Does the plugin work in the browser?

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.

Do I need the camera permission to scan barcodes?

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?

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

  • Torch: Switch the flashlight on and off during a scan session.
  • File Picker: Let the user select an image from the file system or gallery to read barcodes from.
  • ML Kit Document Scanner: Scan physical documents with ML Kit Document Scanner.

Terms & Privacy

This plugin uses the Google ML Kit:

Newsletter

Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our Capawesome Newsletter.

Changelog

See CHANGELOG.md.

License

See LICENSE.

Footnotes

  1. This project is not affiliated with, endorsed by, sponsored by, or approved by Google LLC or any of their affiliates or subsidiaries. ↩

  2. QR Code is a registered trademark of DENSO WAVE INCORPORATED. ↩