QR Scan not working

Ionic Native
1

Hello, everyone. I am new to ionic native and building the qr-scan page now. Actually I followed https://ionicframework.com/docs/native/qr-scanner

here is my code snippets,

  • qr-scanner.page.ts
    import { Component, OnInit } from ‘@angular/core’;

import { NavController } from ‘@ionic/angular’;

import { Router } from ‘@angular/router’;

import { QRScanner, QRScannerStatus } from ‘@ionic-native/qr-scanner/ngx’;

// import services

import { AuthService } from ‘…/services/auth.service’;

import { StorageService } from ‘…/services/storage.service’;

@Component({

selector: ‘app-qr-scanner’,

templateUrl: ‘./qr-scanner.page.html’,

styleUrls: [’./qr-scanner.page.scss’],

})

export class QrScannerPage implements OnInit {

scanSubscription: any;

constructor(

public navCtrl: NavController, 

private router: Router,

public qrScanner: QRScanner,

public authService: AuthService,

public storageService: StorageService

) { }

ngOnInit() {

}

scan() {

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

this.qrScanner.prepare()

.then((status: QRScannerStatus) => {

  if (status.authorized) {

    this.qrScanner.show();

    let self = this;

    this.scanSubscription = this.qrScanner.scan().subscribe((text:string) => {

      let splittedAry = text.split('qr_code?');

      let saAray = splittedAry[1].split('&');

      let saaText = saAray[0];

      saaText.replace('payload=', '');

      let saatAry = saaText.split(';');

      

      self.authService.signin('register', saatAry[0], saatAry[1]);

    });

  } else if (status.denied) {

    console.log("Camera permission permanently denied");

    this.authService.dynamicSuccess("Denied", "Camera permission permanently denied");

  } else {

    console.log("Camera permision temporarily denied");

    this.authService.dynamicSuccess("Denied", "Camera permision temporarily denied");

  }

})

.catch((e: any) => {

  console.error('Error', e);

  this.authService.dynamicSuccess("Error", "Sth went wrong");

});

}

stopScanning() {

(this.scanSubscription) ? this.scanSubscription.unsubscribe() : null;

this.scanSubscription=null;

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

this.qrScanner.hide();

this.qrScanner.destroy();

}

goLogin() {

this.storageService.clearStorage();

this.router.navigateByUrl(this.storageService.step);

}

ionViewWillEnter() {

this.scan();

}

ionViewWillLeave() {

this.stopScanning();

}

}

  • qr-scanner.page.html

    Qr Scanner

    <ion-button color=“dark” class=“qrscs-close” (click)=“goLogin()”>Close

  • app.component.scss
    ion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor {

    background: transparent none !important;

}

  • app.module.ts
    import { QRScanner } from ‘@ionic-native/qr-scanner/ngx’;

…
providers: [

StatusBar,

SplashScreen,

FCM,

QRScanner,

{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }

],
…

It`s so urgent and anybody can help me ?