I am working with ionic 4 developing and app. I installed the cordova QR Scanner plugin, because I need the QR functionality
I followed the tutorial, but the camera is not showing. here is the ts script:
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';
@Component({
selector: 'app-agregarpin',
templateUrl: './agregarpin.page.html',
styleUrls: ['./agregarpin.page.scss'],
})
export class AgregarpinPage implements OnInit {
constructor(public modalController: ModalController,private qrScanner: QRScanner) { }
ngOnInit() {
}
dismiss() {
// using the injected ModalController this page
// can "dismiss" itself and optionally pass back data
this.modalController.dismiss();
}
scandata(){
this.qrScanner.prepare()
.then((status: QRScannerStatus) => {
if (status.authorized) {
// camera permission was granted
this.qrScanner.show();
// start scanning
let scanSub = this.qrScanner.scan().subscribe((text: string) => {
console.log('Scanned something', text);
this.qrScanner.hide(); // hide camera preview
scanSub.unsubscribe(); // stop scanning
});
} else if (status.denied) {
// camera permission was permanently denied
// you must use QRScanner.openSettings() method to guide the user to the settings page
// then they can grant the permission from there
} else {
// permission was denied, but not permanently. You can ask for permission again at a later time.
}
})
.catch((e: any) => console.log('Error is', e));
}//
}
After some tested I didn’t found any error. After some researched I got this, the camera is working but under app. The layers and html tags are above the camera. Then I follow this tutorial, and the camera still is not showing.
The fix according to the tutorial and others forum is to add a css class to ion-app tag, like this:
CCS
ion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor {
background: transparent none !important;
}
This css code, I added to global.scss and app.component.scss files.
And then is the updated function:
scandata(){
(window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
(window.document.querySelector('body') as HTMLElement).classList.add('cameraView');
(window.document.querySelector('ion-router-outlet') as HTMLElement).classList.add('cameraView');
this.qrScanner.prepare()
.then((status: QRScannerStatus) => {
if (status.authorized) {
// camera permission was granted
this.qrScanner.show();
// start scanning
let scanSub = this.qrScanner.scan().subscribe((text: string) => {
alert('Scanned something');
this.qrScanner.hide(); // hide camera preview
scanSub.unsubscribe(); // stop scanning
});
} else if (status.denied) {
// camera permission was permanently denied
// you must use QRScanner.openSettings() method to guide the user to the settings page
// then they can grant the permission from there
} else {
// permission was denied, but not permanently. You can ask for permission again at a later time.
}
})
.catch((e: any) => console.log('Error is', e));
}//
But the camera still not showing here are some screenschots.
The page, is completely blank with only a button with the click function that calls the scandata() method 
When I clicked the “default” button A dialog box appears asking for permission to use the camera:
I click on the “allow” button, but still the camera, is not working.
I dont know what else I can do.