I am new to ionic native and followed the sample but it shows the white screen and not sure why…
here is my code;
- qr-scanner.page.ts
import { Component, OnInit } from ‘@angular/core’;
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(
private router: Router,
private 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.myAlert("denied", "Camera permission permanently denied");
} else {
console.log("Camera permision temporarily denied");
this.authService.myAlert("denied", "Camera permision temporarily denied");
}
})
.catch((e: any) => {
console.error('Error', e);
this.authService.myAlert("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.scss
ion-content,body, .app-root, ion-app,.scroll-content,.fixed-content,page-app {background: none transparent !important;
}
ion-content {
–background: var(–ion-background-color, transparent);
img {
opacity: 0.5;
max-width: 95%;
max-height: calc(98% - 100px);
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
}
.cameraView {
background: transparent !important;
}
.qrs-close-section {
position: fixed;
width: 100%;
bottom: 0;
.qrscs-close {
width: calc(100% - 4px);
}
}
-
qr-scanner.page.html
<ion-button color=“dark” class=“qrscs-close” (click)=“goLogin()”>Close
btw QRScanner is included in providers of app.module.ts
As you see my qr-scanner.page.ts, i made the alert to show error of qr-scan but can not see any message. In my opinions, seems prepare().then(), this func is not working. Actually its so urgent and can anybody help me?
Thanks.