Ionic barcode-scanner

Reading barcodes from our Ionic app can be very useful in various scenarios. It allows streamlining inventory processes, product checking, information access, and more.

Fortunately, implementing this functionality is simple thanks to the barcode-scanner plugin for Capacitor. This plugin allows us to access the device’s camera to scan and read barcodes natively.

In this post, I will show you how to integrate the barcode-scanner plugin in an Ionic app with Capacitor step-by-step. We will see how to install it, request camera permissions, and scan codes to read the results.

So if you want to add this useful functionality to your Ionic app, keep reading! I’ll guide you through implementing barcode-scanner.

npm install phonegap-plugin-barcodescanner
npm install @awesome-cordova-plugins/barcode-scanner
npx cap sync

Import the @awesome-cordova-plugins/barcode-scanner package:

import {BarcodeScanner} from '@awesome-cordova-plugins/barcode-scanner/ngx';
constructor(
    private barcodeScanner: BarcodeScanner
  ) {}

The provided code demonstrates how to initiate QR code scanning.

  const options: BarcodeScannerOptions = {
      preferFrontCamera : true, // iOS and Android
      showFlipCameraButton : true, // iOS and Android
      showTorchButton : true, // iOS and Android
      torchOn: true, // Android, launch with the torch switched on (if available)
      saveHistory: true, // Android, save scan history (default false)
      prompt : "Place a barcode inside the scan area", // Android
      resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
      formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
      orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
      disableAnimations : true, // iOS
      disableSuccessBeep: false // iOS and Android
    }
    this.barcodeScanner.scan(options).then( result => {
      console.log({result});
    }).catch( err => {})

The plugin can generate QR codes from text input.

 this.barcodeScanner.encode(this.barcodeScanner.Encode.TEXT_TYPE, 'Hello work').then( async result => {
      console.log({result});
 }).catch( err => {});

For this plugin, we need to do some extra configuration in platform iOS by updating the Info.plist adding the NSCameraUsageDescription tag.

<key>NSCameraUsageDescription</key>
<string>To scan barcodes</string>

Example app

In this post we have seen how to easily integrate barcode reading into our Ionic applications thanks to the barcode-scanner plugin for Capacitor.

After installing it and configuring the necessary camera permissions, we were able to implement QR code and barcode reading natively. The plugin handles the entire scanning and decoding process.

We also saw how to easily generate QR codes from text using the plugin’s generate() function.

The integration with the device’s cameras and scanners via Capacitor allows us to create fully native experiences in our Ionic apps.