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.