Barcode Scanning in Ionic Capacitor: A Practical Setup Guide

Introduction 

If you are building an Ionic app today, you want to be using Capacitor. It is the standard native runtime now because its native bridges don’t suffer from the same latency and plugin rot that killed old hybrid setups. But a lot of developers hit a wall when their hybrid app needs to use the device camera for real-time data capture. In the Capacitor ecosystem, you have three main ways to handle this. 

The Trade-offs Between the 3 Plugin Options 

If you look at the options, you can go with the official, community-driven, Capacitor community plugin (@capacitor/barcode-scanner). It is free and works fine if your app only needs to scan a clean QR code off a smooth screen. But the outcome is not so great if you try to feed it low-contrast or damaged industrial codes. 

Your second choice is the Capacitor ML Kit plugin (@capacitor-mlkit/barcode-scanning). It plugs directly into Google’s ML Kit engine, so the decoding speed is solid. However, because it is a rigid wrapper for Google’s SDK, developers have no control over the underlying engine. It struggles with tiny or high-density codes and completely excludes formats like MAXICODE. 

The third route is Scanbot’s Capacitor Barcode Scanner SDK (capacitor-plugin-scanbot-barcode-scanner-sdk). This is a commercial tool running an optimized native C++ engine underneath. It gives you an easy to implement camera interface out of the box. It’s built for high-volume enterprise workflows where users need to scan wrinkled or smudged labels offline without a loss in performance. 

If you are building an app for warehouse workers, retail checkouts, or delivery drivers who scan items all day, you need a high-performance engine. 

Project Setup 

You’ll need to make sure your environment is set up before starting your project otherwise, your app won’t run. Check out the following links for more details:  

• Scanbot requirements 

• Capacitor requirements 

You can also refer to the documentation section for our setup guides.  

First, make sure the Ionic CLI is installed on your machine: 

npm install -g @ionic/cli 

If you don’t have an active codebase ready, scaffold a clean project structure: 

ionic start inventoryApp blank --type=angular 

cd inventoryApp

Note: The native plugin code works exactly the same way whether you write your web views in Vanilla JS, Angular, React, or Vue. 

Step-by-Step Scanbot SDK Integration 

1. Install the Plugin 

Pull the library package into your working directory and sync the native asset folders. For this project, we’re using version 8.0. 

npm install capacitor-plugin-scanbot-barcode-scanner-sdk@8.0.0 

2. Initialize the Engine on App Boot 

You have to let the native binaries load before you try to trigger hardware camera threads. Call the initialization method right when your app starts up, typically inside app.component.ts. 

Note: Start your free 7-day trial to get your license key. 

import {Component, OnInit} from '@angular/core'; 
import {IonApp, IonRouterOutlet} from '@ionic/angular/standalone'; 
import {ScanbotBarcodeSDK, SdkConfiguration} from "capacitor-plugin-scanbot-barcode-scanner-sdk" 
 
@Component({ 
 selector: 'app-root', 
 templateUrl: 'app.component.html', 
 imports: [IonApp, IonRouterOutlet], 
}) 
export class AppComponent implements OnInit { 
 async ngOnInit() { 
   try { 
     await ScanbotBarcodeSDK.initialize(new SdkConfiguration({ 
       licenseKey: 'YOUR_SCANBOT_LICENSE_KEY_HERE', 
       loggingEnabled: false 
     })); 
   } catch (err) { 
     console.error('Scanbot engine failed to boot:', err); 
   } 
 } 
} 

3. Open the Camera UI and Process the Data 

You can call the ready-to-use scanner screen with one method. Here is how to configure the overlay and grab the text string results: 

import {Component} from '@angular/core'; 
import {IonButton, IonContent, IonHeader, IonTitle, IonToolbar} from '@ionic/angular/standalone'; 
import { 
 BackgroundStyle, 
 BarcodeFormat, 
 BarcodeFormatCommonConfiguration, 
 BarcodeScannerScreenConfiguration, 
 ButtonConfiguration, 
 FinderCorneredStyle, 
 ScanbotBarcode, 
 ScanbotBarcodeSDK, 
 SingleScanningMode 
} from "capacitor-plugin-scanbot-barcode-scanner-sdk"; 
 
@Component({ 
 selector: 'app-home', 
 templateUrl: 'home.page.html', 
 styleUrls: ['home.page.scss'], 
 imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton], 
}) 
export class HomePage { 
 scannedText?: string; 
 scannedFormat?: BarcodeFormat 
 
 async openScanner() { 
   try { 
     /** Check license status and alert if the license is not valid */ 
     const licenseInfo = await ScanbotBarcodeSDK.getLicenseInfo(); 
     if (!licenseInfo.isValid) { 
       alert(licenseInfo.licenseStatusMessage) 
       return; 
     } 
 
     /** 
      * Configure the scanner screen, including: 
      * - scan behavior 
      * - UI 
      * - barcode scanner configuration 
      */ 
     const barcodeScreenConfiguration = new BarcodeScannerScreenConfiguration() 
     /* Configure the barcode scanning mode */ 
     barcodeScreenConfiguration.useCase = new SingleScanningMode() 
     barcodeScreenConfiguration.useCase.confirmationSheetEnabled = true; 
     barcodeScreenConfiguration.useCase.submitButton = new ButtonConfiguration({ 
       visible: true, 
       text: "Submit", 
       background: new BackgroundStyle({ 
         fillColor: "#951010E2", 
       }), 
       accessibilityDescription: "Submit scanned barcode" 
     }) 
     /* Configure the UI  */ 
     barcodeScreenConfiguration.viewFinder.style = new FinderCorneredStyle({ 
       strokeColor: "#ffffff", 
       strokeWidth: 2.0, 
       cornerRadius: 12 
     }) 
     /* Configure the barcode scanner configuration */ 
     barcodeScreenConfiguration.scannerConfiguration.engineMode = 'NEXT_GEN' 
     barcodeScreenConfiguration.scannerConfiguration.barcodeFormatConfigurations = [ 
       new BarcodeFormatCommonConfiguration({ 
         formats: [ 
           'AZTEC', 
           'CODABAR', 
           'DATABAR', 
           'EAN_13', 
           'PDF_417', 
           'QR_CODE', 
           'UPC_E', 
         ] 
       }) 
     ] 
 
     /* Start the barcode scanning UI */ 
     const result = await ScanbotBarcode.startScanner(barcodeScreenConfiguration) 
     if (result.status === "OK") { 
       /* Process the result */ 
       this.scannedText = result.data.items[0].barcode.text 
       this.scannedFormat = result.data.items[0].barcode.format 
     } 
   } catch (err) { 
     console.error("An error has occurred", err); 
   } 
 } 
} 

4. Display the Output in Your Template 

Bind those state variables to your template HTML file: 

<ion-header [translucent]="true"> 
 <ion-toolbar> 
   <ion-title> 
     Barcode Scanner 
   </ion-title> 
 </ion-toolbar> 
</ion-header> 
 
<ion-content [fullscreen]="true"> 
 <div class="ion-padding"> 
   <ion-button (click)="openScanner()">Start single barcode scanning</ion-button> 
 
   @if (scannedText) { 
     <div> 
       <h3>Scanned barcode</h3> 
       <p><strong>Value:</strong> {{ scannedText }}</p> 
       <p><strong>Format:</strong> {{ scannedFormat }}</p> 
     </div> 
   } 
 </div> 
</ion-content> 

Activating Advanced Configurations 

If you need to change how the scanner works in the field, you can adjust the setup by changing the configuration properties instead of rewriting your camera code. 

Batch Scanning: Turn this mode on to keep the camera live after a code hits the viewfinder. This lets operators scan multiple items consecutively, saving everything to a list until they close it. 

Live AR Overlays: This lets you display each recognized barcode with a colored frame and text directly on top of the physical objects. The engine tracks barcodes across active frames and renders interactive labels over them in real time. 

Find & Pick: You can pass a target string into the scanner settings. The camera view will ignore unrelated items and highlight only the matching barcode as soon as it comes into view. 

Testing on Real Hardware 

Because barcode decoding depends entirely on real-time auto-focus loops and hardware camera lenses, you can’t test this inside an Android emulator, iOS Simulator, or standard desktop browser. You have to push it to a physical phone. 

Compile your web assets and run the native platform pipelines: 

#Install Capacitor iOS and Android 

npm i @capacitor/android @capacitor/ios 

#Add the native projects 

npx cap add ios --packagemanager Cocoapods 

npx cap add android 

#Compile web assets 

npm run build 

# Copy the web assets into the native projects 

npx cap sync 

# Android Testing 

npx cap run android  

# iOS Testing 

npx cap run ios

Quick iOS Tip: Open your Info.plist file inside Xcode and make sure you add a clear description for NSCameraUsageDescription. If you forget this, the app will crash when a user triggers the camera interface. 

Note: SPM Support will be available in capacitor-plugin-scanbot-barcode-scanner-sdk v9.0.0 

Conclusion 

Choosing the right barcode scanning plugin for your Ionic Capacitor application ultimately depends on your project’s scale, budget, and performance requirements. Free community options work well for simple hobby projects or lightweight MVPs, but enterprise workflows demand a more robust solution.  

By integrating a commercial-grade engine like the Scanbot SDK, you gain access to powerful features like batch scanning, AR overlays, and a pre-built camera UI that operates flawlessly on real hardware. 

Want to test this scanning speed yourself? Start a free trial and benchmark the integration directly inside your own dev environment. 

Contact us at tutorial-support@scanbot.io if you have questions or need support for your project. 

FAQ