Ionic 6 QR Code Scanner with ZBar Barcode Tutorial
Ionic 6 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 6 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 of Ionic development, hence open the terminal and type the recommended command to Ionic CLI:
npm install -g @ionic/cli
Once the Ionic CLI has installed, then you can easily create a new ionic application with the following command:
ionic start ionic-demo-app blank --type=angular
Make sure to move to the app’s root:
cd ionic-demo-app
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.
ionic cordova plugin add cordova-plugin-cszbar
npm install @ionic-native/zbar
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],
entryComponents: [],
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
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 application with the help of Cordova and Ionic Native packages.