Unofficial Capacitor plugin for ML Kit Barcode Scanning.12
- 🧩 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.
A working example can be found here: https://github.com/robingenz/capacitor-mlkit-plugin-demo
Android |
---|
npm install @capacitor-mlkit/barcode-scanning
npx cap sync
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" -->
This plugin will use the following project variables (defined in your app’s variables.gradle
file):
$androidxCameraCamera2Version
version ofcom.google.mlkit:barcode-scanning
(default:1.1.0
)$androidxCameraCoreVersion
version ofcom.google.mlkit:barcode-scanning
(default:1.1.0
)$androidxCameraLifecycleVersion
version ofcom.google.mlkit:barcode-scanning
(default:1.1.0
)$androidxCameraViewVersion
version ofcom.google.mlkit:barcode-scanning
(default:1.1.0
)$mlkitBarcodeScanningVersion
version ofcom.google.mlkit:barcode-scanning
(default:17.3.0
)$playServicesCodeScannerVersion
version ofcom.google.android.gms:play-services-code-scanner
(default:16.1.0
)
Make sure to set the deployment target in your ios/App/Podfile
to at least 15.5
:
platform :ios, '15.5'
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>
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.
No configuration required for this plugin.
A working example can be found here: robingenz/capacitor-mlkit-plugin-demo
import {
BarcodeScanner,
BarcodeFormat,
LensFacing,
} from '@capacitor-mlkit/barcode-scanning';
import { Torch } from '@capawesome/capacitor-torch';
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();
};
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();
});
};
const scan = async () => {
const { barcodes } = await BarcodeScanner.scan({
formats: [BarcodeFormat.QrCode],
});
return barcodes;
};
const isSupported = async () => {
const { supported } = await BarcodeScanner.isSupported();
return supported;
};
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;
};
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;
};
const openSettings = async () => {
await BarcodeScanner.openSettings();
};
const isGoogleBarcodeScannerModuleAvailable = async () => {
const { available } =
await BarcodeScanner.isGoogleBarcodeScannerModuleAvailable();
return available;
};
const installGoogleBarcodeScannerModule = async () => {
await BarcodeScanner.installGoogleBarcodeScannerModule();
};
const checkPermissions = async () => {
const { camera } = await BarcodeScanner.checkPermissions();
return camera;
};
const requestPermissions = async () => {
const { camera } = await BarcodeScanner.requestPermissions();
return camera;
};
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.
startScan(...)
stopScan()
readBarcodesFromImage(...)
scan(...)
isSupported()
setZoomRatio(...)
getZoomRatio()
getMinZoomRatio()
getMaxZoomRatio()
openSettings()
isGoogleBarcodeScannerModuleAvailable()
installGoogleBarcodeScannerModule()
checkPermissions()
requestPermissions()
addListener('barcodesScanned', ...)
addListener('scanError', ...)
addListener('googleBarcodeScannerModuleInstallProgress', ...)
removeAllListeners()
- Interfaces
- Type Aliases
- Enums
startScan(options?: StartScanOptions | undefined) => Promise<void>
Start scanning for barcodes.
Param | Type |
---|---|
options |
StartScanOptions |
Since: 0.0.1
stopScan() => Promise<void>
Stop scanning for barcodes.
Since: 0.0.1
readBarcodesFromImage(options: ReadBarcodesFromImageOptions) => Promise<ReadBarcodesFromImageResult>
Read barcodes from an image.
Only available on Android and iOS.
Param | Type |
---|---|
options |
ReadBarcodesFromImageOptions |
Returns: Promise<ReadBarcodesFromImageResult>
Since: 0.0.1
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() => Promise<IsSupportedResult>
Returns whether or not the barcode scanner is supported.
Returns: Promise<IsSupportedResult>
Since: 0.0.1
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() => Promise<GetZoomRatioResult>
Get the zoom ratio of the camera.
Only available on Android and iOS.
Returns: Promise<GetZoomRatioResult>
Since: 5.4.0
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() => Promise<GetMaxZoomRatioResult>
Get the maximum zoom ratio of the camera.
Only available on Android and iOS.
Returns: Promise<GetMaxZoomRatioResult>
Since: 5.4.0
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() => 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() => 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() => Promise<PermissionStatus>
Check camera permission.
Returns: Promise<PermissionStatus>
Since: 0.0.1
requestPermissions() => Promise<PermissionStatus>
Request camera permission.
Returns: Promise<PermissionStatus>
Since: 0.0.1
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(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(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() => Promise<void>
Remove all listeners for this plugin.
Since: 0.0.1
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. Only available on Android and iOS. | Resolution['1280x720'] |
7.0.0 |
videoElement |
HTMLVideoElement |
The HTML video element to use for the camera preview. Only available on web. | 7.1.0 |
Prop | Type | Description | Since |
---|---|---|---|
barcodes |
Barcode[] |
The detected barcodes. | 0.0.1 |
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 |
rawBytes |
number[] |
The raw bytes of the barcode. | 7.1.0 |
rawValue |
string |
The barcode value in a machine readable format. This value is only available when the barcode is encoded in the UTF-8 character set. Otherwise, the rawBytes property should be used and this property will be an empty string. |
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 |
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 |
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 |
Prop | Type | Description | Since |
---|---|---|---|
addressLines |
string[] |
Formatted address, multiple lines when appropriate. | 7.0.0 |
type |
AddressType |
Address type. | 7.0.0 |
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 |
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 |
Prop | Type | Description | Since |
---|---|---|---|
number |
string |
The phone number. | 7.0.0 |
type |
PhoneFormatType |
The phone number type. | 7.0.0 |
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 |
Prop | Type | Description | Since |
---|---|---|---|
latitude |
number |
Latitude. | 7.0.0 |
longitude |
number |
Longitude. | 7.0.0 |
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 |
Prop | Type | Description | Since |
---|---|---|---|
url |
string |
The URL of the bookmark. | 7.0.0 |
title |
string |
The title of the bookmark. | 7.0.0 |
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 |
Prop | Type | Description | Since |
---|---|---|---|
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. | 0.0.1 |
Prop | Type | Description | Since |
---|---|---|---|
barcodes |
Barcode[] |
The detected barcodes. | 0.0.1 |
Prop | Type | Description | Since |
---|---|---|---|
formats |
BarcodeFormat[] |
Improve the speed of the barcode scanner by configuring the barcode formats to scan for. | 0.0.1 |
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 |
Prop | Type | Description | Since |
---|---|---|---|
zoomRatio |
number |
The zoom ratio to set. | 5.4.0 |
Prop | Type | Description | Since |
---|---|---|---|
zoomRatio |
number |
The zoom ratio. | 5.4.0 |
Prop | Type | Description | Since |
---|---|---|---|
zoomRatio |
number |
The minimum zoom ratio. | 5.4.0 |
Prop | Type | Description | Since |
---|---|---|---|
zoomRatio |
number |
The maximum zoom ratio. | 5.4.0 |
Prop | Type | Description | Since |
---|---|---|---|
available |
boolean |
Whether or not the Google Barcode Scanner module is available. | 5.1.0 |
Prop | Type | Since |
---|---|---|
camera |
CameraPermissionState |
0.0.1 |
Prop | Type |
---|---|
remove |
() => Promise<void> |
Prop | Type | Description | Since |
---|---|---|---|
barcodes |
Barcode[] |
The detected barcodes. | 6.2.0 |
Prop | Type | Description | Since |
---|---|---|---|
message |
string |
The error message. | 0.0.1 |
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 |
PermissionState | 'limited'
'prompt' | 'prompt-with-rationale' | 'granted' | 'denied'
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 |
Members | Value | Since |
---|---|---|
Front |
'FRONT' |
0.0.1 |
Back |
'BACK' |
0.0.1 |
Members | Value | Since |
---|---|---|
'640x480' |
0 |
7.0.0 |
'1280x720' |
1 |
7.0.0 |
'1920x1080' |
2 |
7.0.0 |
Members | Value | Since |
---|---|---|
HOME |
0 |
7.0.0 |
UNKNOWN |
1 |
7.0.0 |
WORK |
2 |
7.0.0 |
Members | Value | Since |
---|---|---|
HOME |
0 |
7.0.0 |
UNKNOWN |
1 |
7.0.0 |
WORK |
2 |
7.0.0 |
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 |
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 |
Members | Value | Since |
---|---|---|
OPEN |
1 |
7.0.0 |
WEP |
2 |
7.0.0 |
WPA |
3 |
7.0.0 |
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 |
This plugin uses the Google ML Kit:
See CHANGELOG.md.
See LICENSE.