Cant show QRScanner camera view in ionic - ionic-framework

Question

I have been facing certain difficulties with the qrcode camera for some time. I have a login page and I want that when the user clicks on the read button qr the ion-content of the login page becomes transparent and a close reading button appears in the footer however I did not succeed. Follow attempts:
My method Structure
lerQR() {
this.qrScanner.prepare()
.then((status: QRScannerStatus) => {
if (status.authorized) {
this.leuQR.next(1);
document.getElementsByTagName("ion-content")[0].style.opacity = "0";
this.qrScanner.show();
this.qrScan = this.qrScanner.scan().subscribe((text: string) => {
console.log('Scanned something', text);
});
} else if (status.denied) {
this.qrScanner.openSettings()
} 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));
}
Attempt 1:
Run qrScanner.show command and then hide ion-content with getelement;I can read qr code but I can't see camera:
this.qrScanner.show();
document.getElementsByTagName("ion-content")[0].style.opacity = "0";
Attempt 2:
Hiding ion-content from the login page with get element and then calling qrscanner.show() command;I can read qr code but I can't see camera:
document.getElementsByTagName("ion-content")[0].style.opacity = "0";
this.qrScanner.show();
Attempt 3:
Removing two layers of ion-content (Remembering that I only have the login page) and then giving the qrscanner.show()
document.getElementsByTagName("ion-content")[0].style.opacity = "0";
document.getElementsByTagName("ion-content")[1].style.opacity = "0";
this.qrScanner.show();
In this attempt I can see the camera but I cannot read the qr code, receiving the following error:
Error is TypeError: Cannot read properties of undefined (reading 'style')
at api.service.ts:683:60
at ZoneDelegate.invoke (zone-evergreen.js:364:1)
at Object.onInvoke (core.js:27558:1)
at ZoneDelegate.invoke (zone-evergreen.js:363:1)
at Zone.run (zone-evergreen.js:123:1)
at zone-evergreen.js:857:1
at ZoneDelegate.invokeTask (zone-evergreen.js:399:1)
at Object.onInvokeTask (core.js:27546:1)
at ZoneDelegate.invokeTask (zone-evergreen.js:398:1)
at Zone.runTask (zone-evergreen.js:167:1)
How can I display the camera and read the qrcode hiding the ion-content since I have a stop reading button in the footer?
Enviroment settings:
Ionic:
Ionic CLI : 6.20.4 (C:\Users\micro-85\AppData\Roaming\npm\node_modules\#ionic\cli)
Ionic Framework : #ionic/angular 5.9.4
#angular-devkit/build-angular : 0.1000.8
#angular-devkit/schematics : 10.0.8
#angular/cli : 10.0.8
#ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 11.0.0
Cordova Platforms : android 10.1.2
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 20 other plugins)
Utility:
cordova-res : 0.15.4
native-run : 1.7.1
System:
Android SDK Tools : 26.1.1 (C:\Users\micro-85\AppData\Local\Android\Sdk)
NodeJS : v16.17.1 (C:\Program Files\nodejs\node.exe)
npm : 9.1.2
OS : Windows 10

Answer 1

What plugin are you using? There are several of them. For the cordova-plugin-qrscanner
They have methods to show/hide:
QRScanner.show(function(status){
console.log(status);
});
QRScanner.hide(function(status){
console.log(status);
});