We’ve been discussing in this topic a bug that is happening when using Ionic QR Code: the camera view doesn’t appear.
Some guys shared a fix in which you could make it work if you make the app transparent for a moment, when you’re scanning a QR code. Works for some, but not for me (don’t ask me why, but I followed their very same steps and got nothing). Even a user tried to help me specifically (thank you shinu_neo!), but we couldn’t manage to get the camera preview.
This issue is quite serious since QR scanning is a very common feature that should work perfectly. If this needs those transparencies to work, they should be implemented in the package functionality, and not depend on the user to implement such a weird workaround as it is to make the app transparent manually.
Being this said, when we’ll have this issue patched? My whole app is in pause because of this…
Let me add some code to explain what I tried:
CSS:
page-home{
.content{
background: none transparent
}
}
html, body, #page-home{
background: none;
}
home.ts, where I try to scan QRCodes from the menu:
scanQr(){
// Optionally request the permission early
this.qrScanner.prepare().then((status: QRScannerStatus) => {
if (status.authorized) {
// camera permission was granted
// document.getElementById("app").classList.add('transparentBody');
// window.document.querySelector('ion-app').classList.add('transparentBody')
console.log("scanning")
// 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
});
this.qrScanner.resumePreview();
// show camera preview
this.qrScanner.show();
// wait for user to scan something, then the observable callback will be called
} 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));
}
this is used here:
<!-- more code !-->
<ion-content overflow-y="scroll">
<button class="setActivePlaceButton" (click)="scanQr()" menuClose>
<ion-row>
<ion-col style="max-width:40px;margin-top:-8px">
<ion-icon item-start name="qr-scanner">
</ion-icon>
</ion-col>
<ion-col style="margin-top:-8px">
Access to a place
</ion-col>
</ion-row>
</button>
<!-- more code !-->
Also tried adding transparency to the ion-app tag:
<ion-app style="background: none transparent"></ion-app>
How it’s currently working: if I put a QR code in front of the camera after clicking the button, I actually get the result of the QR. But I really need to provide the user a camera preview to watch what he’s scanning.
