Cant show QRScanner camera view in ionic

[HerickRaposo]

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