@feliperiverot wrote:
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.
Posts: 1
Participants: 1
