So I’ve sort of solved this. It’s a bit of a hacky solution, but it works for me.

Instead of hiding the app entirely, I added a class to the html element:

const startScanner = () => {
            // Show scanner 

            const rootElement = <HTMLElement>document.getElementsByTagName('html')[0];
            rootElement.classList.add('qr-scanner-open');
});

const closeScanner = () => {
            // Hide and unsubscribe from scanner

            const rootElement = <HTMLElement>document.getElementsByTagName('html')[0];
            rootElement.classList.remove('qr-scanner-open');
});

In my HTML, I added a Close scanner button just inside the ion-content

<ion-header>
    <!-- ... -->
</ion-header>

<ion-content >
    <div id="close-scanner-button" text-center>
        <ion-button (click)="closeScanner()" color="warning">
            Close Scanner
        </ion-button>
    </div>
    
    <!-- Other content -->
</ion-content>

<ion-footer>
    <!-- ... -->
</ion-footer>

Finally, in my CSS, I hid everything on the page besides the scanner button, and changed the height of the application to be smaller and only be large enough to show the close scanner button:

#close-scanner-button {
    display: none;
}

html.qr-scanner-open {

    ion-app,
    ion-content {
        height: 70px !important;
    }

    ion-content {
        --overflow: hidden !important;
    }

    ion-header,
    ion-footer,
    ion-content > *:not(#close-scanner-button) {
        display: none;
    }

    #close-scanner-button {
        display: block;
    }
}

The result is something like this:

@onfire @OhYuuKii

This is related to shadow DOM styling, which I just heard about on ionic v4 haha, don’t know if this is the best solution but it works.

Solution 1 - Recommended

You can put this css on your component’s scss.

ion-content {
  --background: none transparent;
}

Solution 2

    showCamera() {
        setTimeout(() => {
            window.document.querySelectorAll('ion-content')
                  .forEach(element => {
                      const element1 = element.shadowRoot.querySelector('style');
                      element1.innerHTML = element1.innerHTML
                                                   .replace('--background:var(--ion-background-color,#fff);', '--background: transparent');
                  });
        }, 300);
    }

    hideCamera() {
        window.document.querySelectorAll('ion-content')
              .forEach(element => {
                  const element1 = element.shadowRoot.querySelector('style');
                  element1.innerHTML = element1.innerHTML
                                               .replace('--background: transparent', '--background:var(--ion-background-color,#fff);');
              });
    }

Here is my solution using angular. Basically, I have a flag on ion-content to turn on and off a css class:

<ion-content [class.show-qr-scanner]="isOn">
       <-- other content here -->
</ion-content>

.show-qr-scanner {
  display: none;
}

import { Component, OnInit } from '@angular/core';

import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';

@Component({
  selector: 'app-qr-scanner',
  templateUrl: './qr-scanner.page.html',
  styleUrls: ['./qr-scanner.page.scss'],
})
export class QrScannerPage implements OnInit {

  isOn = false;
  scannedData: {};

  constructor(
    private qrScanner: QRScanner
  ) {
  }

  ngOnInit() {
  }

  startScanner() {

    this.qrScanner.prepare()
      .then((status: QRScannerStatus) => {
        if (status.authorized) {

          this.isOn = true;

          // start scanning
          const scanSub = this.qrScanner.scan().subscribe((text: string) => {
            console.log('Scanned something', text);

            this.isOn = false;
            this.qrScanner.hide().then();
            scanSub.unsubscribe();
          });

          this.qrScanner.show().then();


        } 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
          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));
  }

}

I found a quite nice solution too. You can use Angulars [class.hide]="scannerOpen" to attach a class with the background CSS var if you need it and hide elements based on that variable too.

.hide {
  --background: none transparent;
}

Template:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Open</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" [class.hide]="scannerShown">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Open box</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container" *ngIf="!scannerShown">
    <p><strong class="capitalize">Open box</strong></p>
    <ion-button (click)="scan()">
      <ion-icon name="qr-code" slot="start"></ion-icon>
      Scan QR code
    </ion-button>

    <!-- Test UI-->
    <br>
    <br>
    <p *ngIf="data">
     Scanned data is:
    </p>
    {{data}}
  </div>
</ion-content>

Page

import { Component, OnInit, ViewChild } from '@angular/core';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-login',
  templateUrl: './open.page.html',
  styleUrls: ['./open.page.scss'],
})
export class OpenPage {
  public data: string;
  public scannerShown: boolean;

  constructor(private qrScanner: QRScanner) { }


  scan() {
    // Optionally request the permission early
    this.qrScanner.prepare()
      .then((status: QRScannerStatus) => {
        console.debug(status);
        if (status.authorized) {
          // camera permission was granted


          // start scanning
          const scanSub = this.qrScanner.scan().subscribe((text: string) => {
            console.log('Scanned something', text);
            this.data = text;

            this.qrScanner.hide(); // hide camera preview
            this.scannerShown = false;
            scanSub.unsubscribe(); // stop scanning
          });
          this.qrScanner.show().then((showStatus) => console.debug('show status', showStatus)).catch((e) => console.error('show error', e));
          this.scannerShown = true;

        } 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 related to shadow DOM styling, which I just heard about on ionic v4 haha, don’t know if this is the best solution but it works.

Solution 1 - Recommended

You can put this css on your component’s scss.

ion-content {
  --background: none transparent;
}

Solution 2

    showCamera() {
        setTimeout(() => {
            window.document.querySelectorAll('ion-content')
                  .forEach(element => {
                      const element1 = element.shadowRoot.querySelector('style');
                      element1.innerHTML = element1.innerHTML
                                                   .replace('--background:var(--ion-background-color,#fff);', '--background: transparent');
                  });
        }, 300);
    }

    hideCamera() {
        window.document.querySelectorAll('ion-content')
              .forEach(element => {
                  const element1 = element.shadowRoot.querySelector('style');
                  element1.innerHTML = element1.innerHTML
                                               .replace('--background: transparent', '--background:var(--ion-background-color,#fff);');
              });
    }

it works 😃

What CSS do you have in the .cameraView class?

The way I had to do it was to set the display to none.

const ionApp = <HTMLElement>document.getElementsByTagName('ion-app')[0];

const startScanner = () => {
            scanSub = this.qrScanner.scan().subscribe((text: string) => {
                console.log(text);
            });

            this.qrScanner.show();
            ionApp.style.display = 'none';
});

const closeScanner = () => {
            this.qrScanner.hide();
            scanSub.unsubscribe();
            ionApp.style.display = 'block';
});