Native QR Scanner Implementation in Ionic 2.

First of all, We will create a complete IONIC application from the start. Developers like me always eager to see the output first. Let’s see what are we going to learn in this tutorial.

QR Scanner Live Action

Source Code

Piashsarker/IonicQRScannerNative

You can clone this project to see in action.

Create Ionic Project

Let’s create a ionic project using below command:

$ ionic start qr-scanner blank
$ cd qr-scanner

We are using Ionic native QR-Scanner in this example, You can follow Ionic documentation or follow this tutorial for complete project.

Supported Platform

• Android
• ios
• Windows
• Browser

Install & Add plugin to App Module

We can install Cordova & Ionic native plugin using below command :

$ ionic cordova plugin add cordova-plugin-qrscanner
$ npm install --save @ionic-native/qr-scanner

You just successfully installed the qr-scanner plugin.

Now, We need to add this in our app.module.ts file in @NgModule .

@NgModule({
  ----------------------
  /** Add QRScanner in the provider array **/
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    QRScanner
  ]
})

Now, we can use QRScanner in our pages as a provider/service . We just need to add it in the constructor to inject the provider for specific page.

QRScanner in a page template

First things first, There are many like me who tried to use QR-Scanner in a page but didn’t able to show the Camera View. You did everything as followed by IONIC documentation but the Camera is not showing in page.

WTF, is going on there. Don’t worry be cool.

There are two solution given, You can use any one of them. Although i would suggest to use Solution 2 instead of Solution 1.

Solution 1

We need to add the transparent background in <ion-content> element. As we are using QRScanner in home page.

Add below code in your home.html file :

<ion-content style="background: none transparent;">
            ---------
</ion-content>

Solution 2

This solution is more acceptable in ionic forum.

Step 1: Add below css in your variable.scss file:

ion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor {
  background: transparent none !important;
}

Step 2: Now, you need to add below two methods in your home.ts file.

showCamera() {
  (window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
}

hideCamera() {
  (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
}

Now, Call showCamer() method in your ionViewWillEnter() lifecycle method. Also don’t forget to call hideCamera() when you are leaving this page. So you need to call hideCamera() in ionViewWillLeave() lifecycle method.

ionViewWillEnter(){
   this.showCamera();
}
ionViewWillLeave(){
   this.hideCamera(); 
}

Note: Both solution will work on page, Use any one of them. Prefer is solution 2.

For accessing QRScanner in our TypeScript file home.ts we need to add it in constructor as below:

constructor(public navCtrl: NavController,
            private qrScanner: QRScanner) {}

Now, We can access the qrScanner instance throughout this page.

Starting Scan

Let’s see the below code first and discussed later. Add below code in home.ts :

ionViewWillEnter(){
  this.qrScanner.prepare()
    .then((status: QRScannerStatus) => {
      if (status.authorized) {
        console.log('Camera Permission Given');
         this.scanSub = this.qrScanner.scan().subscribe((text: string) => {
         console.log('Scanned something', text);
         this.qrScanner.hide();
         this.scanSub.unsubscribe(); 
        
        });

        this.qrScanner.show();
      } else if (status.denied) {
        console.log('Camera permission denied');
      } else {
        console.log('Permission denied for this runtime.');
      }
    })
    .catch((e: any) => console.log('Error is', e));
}

Let’s see some instance members & methods we usages :

prepare()

Request permission to use QR scanner. Also request permission for camera access for Android & ios devices.

Returns: Promise<QRScannerStatus>

scan()

Call this method to enable scanning. You must then call the show method to make the camera preview visible.

Returns: Observable<string> returns an Observable that emits the scanned text. Unsubscribe from the observable to stop scanning.

show()

Configures the native webview to have a transparent background, then sets the background of the <body> and <html> DOM elements to transparent, allowing the webview to re-render with the transparent background.

Returns: Promise<QRScannerStatus>

hide()

Configures the native webview to be opaque with a white background, covering the video preview.

Returns: Promise<QRScannerStatus>

Reference:

Ionic Framework

That’s it, Now you can run your application to see it in action. Connect your real device, enable USB debugging and run below command.

ionic cordova run android 
or 
ionic cordova run ios

Bonus :

As a bonus of March,

You can also see the full implementation of QRScanner plugin in Page & Modal Controller also, checkout below example source code:

Piashsarker/IonicQRScannerNative

References

Ionic Framework

bitpay/cordova-plugin-qrscanner