QR Scanner: Seems to be working in the background, but doesn't display a preview when calling show()

Ionic Native
6

There is a div, with class=“nav-decor”, which has a black background, this needs to be changed to transparent.

My solution was to have a “cameraView” class, which would set the ion-app, ion-content and .nav-decor to have a transparent background.

I used this CSS

ion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor {
  background: transparent none !important; 
}

And then these functions to show the camera after qrScanner.show() and hide it after I’m finished scanning

showCamera() {    
  (window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
}
hideCamera() {    
  (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
}
5 Likes