---
title: Announcing the Capacitor ML Kit Barcode Scanning Plugin
description: Unofficial Capacitor plugin to scan and decode barcodes, including QR codes and UPC codes, on Android, iOS, and Web.
date: 
  created: 2023-03-13
  updated: 2023-03-13
authors:
  - robingenz
categories:
  - Announcements
  - Capacitor
  - ML Kit
  - SDKs
links:
  - Capacitor ML Kit Barcode Scanning: sdks/capacitor/mlkit/barcode-scanning.md
---

# Announcing the Capacitor ML Kit Barcode Scanning Plugin

Today we are very excited to introduce you to the brand new [Capacitor ML Kit Barcode Scanning](../../sdks/capacitor/mlkit/barcode-scanning.md) plugin.
This plugin is part of the new [Capacitor ML Kit](https://github.com/capawesome-team/capacitor-mlkit){:target="_blank"} project by Capawesome, which aims to bring the powerful [ML Kit SDKs](https://developers.google.com/ml-kit){:target="_blank"}[^1] to Capacitor.

<!-- more -->

The plugin allows you to scan and decode various types of barcodes, including QR codes[^2] and UPC codes.
For a complete list of supported barcodes, see [BarcodeFormat](../../sdks/capacitor/mlkit/barcode-scanning.md#barcodeformat).
The scanning is done directly on the device and does not require a network connection.
The plugin supports Android and iOS, and it allows multiple barcodes to be scanned at once.
It also has torch and autofocus support, and an optional ready-to-use interface without the need for webview customizations.

<figure>
  <video width="300" autoplay loop muted playsinline>
    <source src="/docs/assets/videos/posts/announcing-the-capacitor-mlkit-barcode-scanner-plugin/barcode-scanner-demo.mp4" type="video/mp4">
  </video>
  <figcaption>Demo App</figcaption>
</figure>

Let's take a quick look at the [Barcode Scanning Plugin API](../../sdks/capacitor/mlkit/barcode-scanning.md#api) and how you can scan and decode barcodes.

## Installation

First you need to install the package and sync your Capacitor project:

```
npm install @capacitor-mlkit/barcode-scanning
npx cap sync
```

### Android

On Android, this plugin requires the following permissions be added to your `AndroidManifest.xml` (usually `android/app/src/main/AndroidManifest.xml`) before or after the `application` tag:

```xml
<!-- To get access to the camera. -->
<uses-permission android:name="android.permission.CAMERA" />
<!-- To get access to the flashlight. -->
<uses-permission android:name="android.permission.FLASHLIGHT"/>
```

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

```xml
<meta-data android:name="com.google.mlkit.vision.DEPENDENCIES" android:value="barcode_ui"/>
```

### iOS

On iOS, add the `NSCameraUsageDescription` key to the `Info.plist` file (usually `ios/App/App/Info.plist`), which tells the user why the app needs to use the camera:

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

If you also use `@capacitor-firebase/*` dependencies in your project, then implement [this workaround](https://github.com/capawesome-team/capacitor-mlkit/issues/23#issuecomment-1470739611){:target="_blank"} to avoid conflict with the Cocoapods dependencies.

## Usage

Let's see the plugin in action.

### Request permissions

In order to be able to scan barcodes, we first need the camera permissions.
We can easily request them via the plugin:

```ts
import { BarcodeScanner } from "@capacitor-mlkit/barcode-scanning";

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

In addition, you can use the method `isSupported()` to check whether the device has a camera:

```ts
import { BarcodeScanner } from "@capacitor-mlkit/barcode-scanning";

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

### Scan barcode with ready-to-use interface

Now that you have requested the permissions, you can scan your first barcode.
To make the first scan as easy as possible and not require any WebView customization, you use the[`scan()`](../../sdks/capacitor/mlkit/barcode-scanning.md#scan) method, which provides a ready-to-use interface.
By choosing a barcode format, we can improve the speed of the barcode scanner.
In this example we are only looking for QR codes[^2] and return the `rawValue` of the first QR code[^2] found:

```ts
import {
  BarcodeScanner,
  BarcodeFormat,
} from "@capacitor-mlkit/barcode-scanning";

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

### Scan barcode with WebView customizations

If you want to design the user interface yourself or scan several barcodes in a row, you need the methods [`startScan(...)`](../../sdks/capacitor/mlkit/barcode-scanning.md#startscan) and [`stopScan()`](../../sdks/capacitor/mlkit/barcode-scanning.md#stopscan).
The camera is visible behind the WebView during scanning.
However, this means that you have to hide all elements that should not be visible.
In this case we set a class `barcode-scanning-active`, which then contains certain CSS rules (see below) for our app.
You also need to add a [`barcodeScanned`](../../sdks/capacitor/mlkit/barcode-scanning.md#addlistenerbarcodescanned) listener so that you are notified of detected barcodes.

```ts
import { BarcodeScanner } from "@capawesome-team/capacitor-barcode-scanner";

const startScan = async () => {
  // Hide all elements in the WebView
  document.querySelector("body")?.classList.add("barcode-scanning-active");

  // Add the `barcodeScanned` listener
  const listener = await BarcodeScanner.addListener(
    "barcodeScanned",
    async (result) => {
      // Print the found barcode to the console
      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.add("barcode-scanning-active");

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

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

An example of the CSS class `barcode-scanning-active` **with** Ionic could be:

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

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

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

An example of the CSS class `barcode-scanning-active` **without** Ionic could be:

```css
// Hide all elements
body.barcode-scanning-active {
  visibility: hidden;
}

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

???+ tip

    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.

### Read barcode from image

Last but not least, you have the option of scanning barcodes from an image you have already taken.
All you need is the file path to the image.
You can get the file path, for example, if the user selects an image using the [Capacitor File Picker plugin](../../sdks/capacitor/file-picker.md).
The file path is passed to the method [`readBarcodesFromImage(...)`](../../sdks/capacitor/mlkit/barcode-scanning.md#readbarcodesfromimage), which then returns the detected barcodes:

```ts
import {
  BarcodeScanner,
  BarcodeFormat,
} from "@capacitor-mlkit/barcode-scanning";
import { FilePicker } from "@capawesome/capacitor-file-picker";

const pickImage = async () => {
  const { files } = await FilePicker.pickImages({
    multiple: true,
  });
  return files[0];
};

const scan = async () => {
  const pickedImage = await pickImage();
  const { barcodes } = await BarcodeScanner.readBarcodesFromImage({
    formats: [BarcodeFormat.QrCode],
    path: pickedImage.path,
  });
  return barcodes[0].rawValue;
};
```

## Demo App

Feel free to download our [demo app](https://github.com/capawesome-team/capacitor-mlkit-plugin-demo){:target="_blank"} to see the plugin in action:

1. Clone the repository:
   ```
   git clone https://github.com/capawesome-team/capacitor-mlkit-plugin-demo.git
   ```
1. Change to the root directory:
   ```
   cd capacitor-mlkit-plugin-demo
   ```
1. Install all dependencies:
   ```
   npm i
   ```
1. Prepare and launch the Android app:
   ```
   npx ionic cap sync android
   npx ionic cap run android
   ```
1. Prepare and launch the iOS app:
   ```
   npx ionic cap sync ios
   npx ionic cap run ios
   ```

## Closing Thoughts

The project has grown a lot since this first plugin: as of version 8.2.0, Capacitor ML Kit spans 21 plugins, from text recognition to on-device GenAI with Gemini Nano. See [Capacitor ML Kit 8.2.0: 14 New Plugins](./capacitor-mlkit-8-2-0-release.md) for the latest additions.
Be sure to check out our [API Reference](../../sdks/capacitor/mlkit/barcode-scanning.md#api) to see what else you can do with this plugin.
If you have any questions, just [create a discussion](https://github.com/capawesome-team/capacitor-mlkit/discussions/new/choose){:target="_blank"} in the [GitHub repository](https://github.com/capawesome-team/capacitor-mlkit){:target="_blank"}.
Make sure you follow us on [X](https://twitter.com/capawesomeio){:target="_blank"} so you don't miss any future updates.
A big thank you to all the [sponsors](https://github.com/sponsors/capawesome-team){:target="_blank"} who make these projects possible!

[^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.