Capacitor ML Kit Object Detection Plugin

Unofficial Capacitor plugin for ML Kit Object Detection and Tracking.[^1]

Use Cases

The Object Detection plugin is typically used whenever an app needs to locate and classify the prominent objects in an image, for example:

• Visual search: Let users draw a box around an object in a photo and search for similar products.
• Content categorization: Automatically tag images by the objects they contain (fashion goods, food, plants, and more).
• Image cropping: Use the bounding box of the most prominent object to automatically crop or focus an image.
• Inventory management: Detect and count objects in a photo to support cataloging workflows.

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/object-detection` 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/object-detection
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

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:

• $mlkitObjectDetectionVersion version of com.google.mlkit:object-detection (default: 17.0.2)

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 detect objects in an image.

Detect objects in an image

Detect objects in an image at a local path. You can optionally enable classification and the detection of multiple objects. Only available on Android and iOS:

import { ObjectDetection } from '@capacitor-mlkit/object-detection';

const processImage = async () => {
  const { detectedObjects } = await ObjectDetection.processImage({
    path: 'path/to/image.jpg',
    shouldEnableClassification: true,
    shouldEnableMultipleObjects: true,
  });
  return detectedObjects;
};

API

• processImage(...)
• Interfaces

processImage(...)

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

Detects objects in the supplied image.

Each detected object is localized with a bounding box and, if classification is enabled, labeled with one of five coarse categories.

Only available on Android and iOS.

Returns: Promise<ProcessImageResult>

Since: 8.2.0

Interfaces

ProcessImageResult

DetectedObject

Represents an object detected in an image.

Rect

Represents a rectangle.

ObjectLabel

Represents a label of a detected object.

ProcessImageOptions

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 Object Detection SDK.

Which model does the plugin use?

The plugin uses the base object detection and tracking model, which is bundled with the app. Custom TensorFlow Lite classifier models are currently not supported.

Which categories does classification return?

When shouldEnableClassification is enabled, the base model classifies detected objects into only five coarse categories: Fashion good, Food, Home good, Place, and Plant. Any object that does not fall into one of these categories receives no label.

Why is the trackingId not set?

The plugin processes still images in single-image mode, where objects are not tracked across frames. The trackingId is therefore not set. It is only populated when objects are detected in stream mode, which is not supported by this plugin.

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 Face Detection: Detect faces in images with ML Kit Face Detection.
• ML Kit Image Labeling: Detect labels in images with ML Kit Image Labeling.

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.