Ionic 7 QR Code Scanner with ZBar Barcode Tutorial

Ionic QR Code example; In this tutorial, we will learn how to add and use the ZBar plugin to create QR code scanner functionality in Ionic application from scratch.

The ZBar Scanner Plugin is an awesome plugin that lets you scan 2d barcodes. However, this plugin doesn’t work unless the Cordova cszbar plugin is added to your Ionic project.

Not only but also this plugin may help you scan not one but numerous types of the barcode. For instance: UPC-E, EAN-8, Code 128, Code 39, EAN-13/UPC-A, Interleaved 2, 5 and QR Code

Ionic QR Code and Barcode Scanner Example

• Step 1: Create Ionic Project
• Step 2: Add Ionic Native & Cordova Plugins
• Step 3: Register ZBar Plugin
• Step 4: Implement Barcode Scanner
• Step 5: Test Ionic App

Create Ionic Project

Theoretically, we have to lay the foundation for Ionic development.

Open the terminal, and type the recommended command to install Ionic CLI:

sudo npm install -g @ionic/cli

Once the Ionic CLI is installed; Create a new ionic application using the given command:

ionic start ionic-demo-app blank --type=angular

Make sure to move to the app’s root:

cd ionic-demo-app

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
}

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,
    ...
}

Install ZBar and CsZBar Plugins

Consequently, we need to add Ionic Native and Cordova plugins.

Consequently, execute the suggested commands to install cordova cszbar and ionic-native zbar plugins simultaneously.

npm i cordova-plugin-cszbar --legacy-peer-deps

npm i @ionic-native/zbar --legacy-peer-deps

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Register ZBar Plugin in App Module

Next, register the ZBar plugin in Ionic’s main app module class.

You have to import the ZBar module from the @ionic-native/zbar/ngx package; likewise, add the module in the providers array.

Open and update app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
// Import barcode scanner module
import { ZBar } from '@ionic-native/zbar/ngx';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    ZBar,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Implement Barcode Scanner in Ionic

Open and update home.page.html file:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      QR Code and Barcode Scanner Demo
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  <div id="container">
    <ion-button (click)="barcodeScanner()">Scan My Code</ion-button>
    
    <p>{{scannedOutput}}</p>
  </div>
</ion-content>

Open and update home.page.ts file:

import { Component } from '@angular/core';
import { ZBarOptions, ZBar } from '@ionic-native/zbar/ngx';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  optionZbar:any;
  scannedOutput:any;
  constructor(
    private zbarPlugin: ZBar
  ) {
    this.optionZbar = {
      flash: 'off',
      drawSight: false
    }
  }
  barcodeScanner(){
    this.zbarPlugin.scan(this.optionZbar)
   .then(respone => {
      console.log(respone);
      this.scannedOutput = respone;
   })
   .catch(error => {
      alert(error);
   });
  }
}

An unhandled exception occurred: The target entry-point “@ionic-native/zbar” has missing dependencies: – @ionic-native/core

To sort out or fix the target entry-point error in Ionic, then install the ionic native core package:

npm i @ionic-native/core --legacy-peer-deps

Test Ionic App

You can test the app in a simulator or even on real devices. Add Cordova platforms, create build and run the app using either of the given below commands:

# iOS
ionic cordova platform add ios
# Android
ionic cordova platform add android
# Windows
ionic cordova platform add windows

Next, use either of the command to create the application build:

# iOS
ionic cordova build ios
# Android
ionic cordova build android
# Windows
ionic cordova build windows

You can now use the command to test the app:

# iOS
ionic cordova run ios -l
# Android
ionic cordova run android -l
# Windows
ionic cordova run windows -l

Conclusion

The Ionic Barcode and QR code scanner tutorial completed.

Throughout this short and simple guide, we have comprehended how to create QR Code and Barcode scanner feature in Ionic with the help of Cordova and Ionic Native packages.