Search code examples
csswebviewqr-codecapacitorionic5

Ionic 5 capacitor Qr Code camera view not showing

I get blank screen when using capacitor QrCode package.

I'm using this to build a simple QrCode scanner but I keep getting a black screen when calling the scan() method

Solution

  • so when calling QrScanner.show() the webView get transparent like

    SomeElement{
background : none transparent ;
}

    but the thing is ionic don't use "background" instead it uses "--background" so what i did exactly is i put this line in Android Studio QRScanner.Java line 473:

    webView.getView().setBackgroundColor(Color.TRANSPARENT);

    in global.scss :

    ion-app.cameraView,
ion-app.cameraView ion-content,
ion-app.cameraView .nav-decor,
ion-app.cameraView ion-page {
  background: transparent none !important;
  --background :transparent none !important;
  --ion-background-color: none; // this is important
}

    when loading the scanner (just before QRScanner.prepare())

    (window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');

    and of course when done go back to normal view

    (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');

    Hope this help somebody