tsulok/mlkit-barcode-text-scanner

mlkit-text-barcode-scanner

Allow capacitor web apps to use Google's MLKit Text recognizer and Barcode scanner

This plugin can scan the camera image for both Barcodes and Texts. It's up to you whether to enable the feature or not.

Important note

• This plugin does not stores previous hits/results. If multiple frames have the same content then the data will be provided to you.

Install

npm install mlkit-text-barcode-scanner
npx cap sync

Setup for Android

1. Register the plugin in your main activity

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    registerPlugin(MLKitTextRecognizerPlugin.class);
}

2. You can build your project

Setup for iOS

1. After sync open your .xcworkspace file
2. Open Pods target
3. Select MLKitTextRecognition-LatinOCRResources Target
4. Select your development team
5. You can build your project

(Until further fix you need to select your team for this target after each sync)

Example

See the example instructions here

Text recognition

Source:

Android result:

iOS result:

Barcode recognition

Source:

Android result:

iOS result:

API

• startRecognizer(...)
• killPlugin(...)
• Interfaces
• Type Aliases

startRecognizer(...)

startRecognizer(config: RecognizerConfig, callback: FoundRecognizerCallback) => Promise<CallbackID>

Starts the plugin with the passed configuration. Handles the permission checks internally.

The recognizer is not a one time event, it keeps firing the data to you until the user leaves the screen or you cancel the flow.

If permission is denied, then a custom exception will be thrown from the client

Param	Type
config	RecognizerConfig
callback	FoundRecognizerCallback

Returns: Promise<string>

---

killPlugin(...)

killPlugin(callbackId: string) => Promise<void>

Param	Type
callbackId	string

---

Interfaces

RecognizerConfig

Prop	Type	Description
isLoggingEnabled	boolean	Whether to show plugin logs. If non specified or disabled only errors will be shown
barcodeScanner	{ allow: boolean; }	Barcode scanner configuration
textRecognizer	{ allow: boolean; }	Text recognizer configuration

FoundRecognizerCallback

Prop	Type
barcode	BarCodeRecognizerData
text	TextRecognizerData

BarCodeRecognizerData

Prop	Type
content	string

TextRecognizerData

Prop	Type	Description
content	string
confidencePercentage	number	Only Android versions could tell the confidence percentage of the result

Type Aliases

CallbackID

string