'Ionic QR scanner camera works only once after installing app

I've implemented ionic cordova plugin cordova-plugin-qrscanner in my app. The problem I'm having is it only works once when installing the app, and any subsequent launches give me a blank black screen instead of the camera preview. First time it works perfectly, but when I close the app and open it again, a black screen is shown (due to me setting the opacity of the app to 0 so the camera preview can be shown). Only way to get the camera to show again is clearing app data and launching it again. I've been trying to fix this behavior for quite some time now and I can't seem to find anything that can give me insight on this problem.

Is there something the plugin or the app itself can do to cause all subsequent camera previews to fail?

This is the main part that launches the camera preview:

if (this.cameraFormDisabled) {
  return;
}

this.blockBackButton = this.platform.backButton.subscribeWithPriority(0, () => {
  if (this.cameraScanning) {
    document.getElementsByTagName("body")[0].style.opacity = "1";
    this.cameraFormDisabled = false;
    this.cameraScanning = false;
    this.qrScanner.destroy();

    this.qrScan.unsubscribe();
  } else {
    this.navCtrl.pop();
  }
});

this.cameraFormDisabled = true;

this.qrScanner.prepare()
.then((status: QRScannerStatus) => {
  if (status.authorized) {
    this.cameraScanning = true;
    this.qrScanner.show();
    document.getElementsByTagName("body")[0].style.opacity = "0";
    this.qrScan = this.qrScanner.scan().subscribe(async (text: string) => {
      document.getElementsByTagName("body")[0].style.opacity = "1";
      this.doorLicence = text;

      this.cameraFormDisabled = false;
      this.cameraScanning = false;

      await this.qrScan.unsubscribe(); // stop cameraScanning
      await this.qrScanner.hide(); // hide camera preview
      await this.qrScanner.destroy();

      this.changeDetector.detectChanges();

      this.validateLicence();
    });
  } else if (status.denied) {  // izgleda da ovde ne moze da udje jer ako je status denied, onda ide u catch
    // 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.cameraFormDisabled = false;
  } else {  // izgleda da ovde ne moze da udje jer ako je status denied, onda ide u catch
    // permission was denied, but not permanently. You can ask for permission again at a later time.
    this.cameraFormDisabled = false;
    this.presentCameraPermissionDeniedModal();
  }
})
.catch((e: any) => {
  console.log('Error is', e);
  if (e.name == "CAMERA_ACCESS_DENIED") {
    this.presentCameraPermissionDeniedModal();
  }

  this.cameraFormDisabled = false;
})
.finally(() => {
});

First part of the code is to make the hardware back button exit the camera preview, and second part is taken from the plugin documentation. To enable camera preview (or rather show the camera preview itself) i set the opacity of the body to 0.

The code itself should be fine, I'm interested in what can cause a permanent change of this behavior when the app is closed.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source