Capacitor ML Kit Text Recognition Plugin

Unofficial Capacitor plugin for ML Kit Text Recognition.[^1]

Use Cases

The Text Recognition plugin is typically used whenever an app needs to extract text from an image, for example:

• Document digitization: Convert printed documents, receipts, or business cards into machine-readable text.
• Data entry automation: Extract text from forms or labels to prefill input fields and reduce manual typing.
• Accessibility: Read text found in images aloud to support screen readers and other assistive technologies.
• Translation pipelines: Recognize text in an image before passing it on to a translation service.

Compatibility

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/text-recognition` 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/text-recognition
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.

App Size Impact

This plugin bundles a separate model for each supported script (Latin, Chinese, Devanagari, Japanese, and Korean). Each model increases the size of your app by several megabytes. Keep this in mind when deciding which scripts your app actually needs.

Android

Variables

If needed, you can define the following project variables in your app’s variables.gradle file to change the default version of the dependencies:

• $mlkitTextRecognitionVersion version of com.google.mlkit:text-recognition (default: 16.0.1)
• $mlkitTextRecognitionChineseVersion version of com.google.mlkit:text-recognition-chinese (default: 16.0.1)
• $mlkitTextRecognitionDevanagariVersion version of com.google.mlkit:text-recognition-devanagari (default: 16.0.1)
• $mlkitTextRecognitionJapaneseVersion version of com.google.mlkit:text-recognition-japanese (default: 16.0.1)
• $mlkitTextRecognitionKoreanVersion version of com.google.mlkit:text-recognition-korean (default: 16.0.1)

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'

Configuration

No configuration required for this plugin.

Demo

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

Usage

The following example shows how to recognize text in an image.

Recognize text in an image

Recognize text in an image at a local path. You can select the script of the text to recognize. Only available on Android and iOS:

import { Script, TextRecognition } from '@capacitor-mlkit/text-recognition';

const processImage = async () => {
  const { text, blocks } = await TextRecognition.processImage({
    path: 'path/to/image.jpg',
    script: Script.Latin,
  });
  return { text, blocks };
};

API

• processImage(...)
• Interfaces
• Enums

processImage(...)

processImage(options: ProcessImageOptions) => Promise<ProcessImageResult>

Recognizes text in the supplied image.

Only available on Android and iOS.

Returns: Promise<ProcessImageResult>

Since: 8.2.0

Interfaces

ProcessImageResult

TextBlock

Represents a block of text.

A block is a contiguous set of text lines, such as a paragraph or a column.

Rect

Represents a rectangle.

Point

Represents a point.

TextLine

Represents a line of text.

TextElement

Represents an element of text.

An element is a contiguous set of characters, such as a word.

ProcessImageOptions

Enums

Script

FAQ

Which platforms are supported by this plugin?

The processImage(...) method is only available on Android and iOS. The Web platform is not supported by the underlying ML Kit Text Recognition SDK.

Which scripts are supported?

The plugin supports the Latin, Chinese, Devanagari, Japanese, and Korean scripts. Use the script option to select the script of the text you want to recognize. Each script uses a separate model that is bundled with your app.

Does bundling all scripts increase the app size?

Yes. Each script model adds several megabytes to your app. All five models are bundled so that every script can be used at runtime without an additional download.

In which format do I have to provide the image path?

The path must be a local file path (e.g. file:///path/to/image.jpg). Remote URLs are not supported.

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

• ML Kit Barcode Scanning: Scan barcodes with ML Kit Barcode Scanning.
• ML Kit Image Labeling: Detect labels in images with ML Kit Image Labeling.
• ML Kit Face Detection: Detect faces in images with ML Kit Face Detection.

Terms & Privacy

This plugin uses the Google ML Kit:

• Terms & Privacy
• Android Data Disclosure
• iOS Data Disclosure

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.

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