When will the Ionic QR Code camera preview get fixed? It's a serious issue!

Ionic Native
1

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.

2 Likes
2

Just a little bump to this! I still need help regarding this issue :frowning:

1 Like
3

This is not an issue. This is you not getting it to work in your app. That is unfortunate, but not a reason for anything getting fixed. Everything is working fine for most users.

Besides that:

  1. Ionic is open source. Feel free to fix any issue you think exists yourself and submit a Pull Request on Github.
  2. Ionic Native is community maintained. Almost all the plugin implementations were done by members of the community.
  3. Ionic Native is only a thin wrapper around Cordova plugins (that are also many done by random people on the internet!) If there was a bug in one of these, you would have to work with the original author to fix this.

If you want help with your specific problem, open a new topic and ask for help with it. Add all required information so we can understand the problem. Best create a simple reproduction app and put it on Github so we can look for the problem ourselves and play with it.

4

Would someone please show any working example. A bare example using the qrcode code reader enabling to show the camera preview would be very helpful to the community. I’ve come across github/google/stackoverflow, developers are finding it hard to enable the camera preview.

5

Instead of using the QR Code plugin, I ended up using the Barcode Scanner plugin,

It has QR Code reader in it and the camera preview works on android, i have yet to test it on ios.