Ionic cordova-plugin-qrscanner has no camera preview

Question

I run a simple demo to use cordova-plugin-qrscanner, it can scan qrcode but no camera preview.

qrscannerDemo on Github

Related code blow:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';


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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
              public androidPermissions: AndroidPermissions,
              public qrScanner: QRScanner) {

  }

  qrscanner() {

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

          // start scanning
          let scanSub = this.qrScanner.scan().subscribe((text: string) => {
            console.log('Scanned something', text);
            alert(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) {
          alert('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.
          alert('else');
        }
      })
      .catch((e: any) => {
        alert('Error is' + e);
      });

  }

}

<ion-header>
  <ion-navbar transparent>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header> 

 <ion-content padding style="background: none transparent;">
  <button ion-button (click)="qrscanner()">qrscanner</button>
</ion-content>  

I run the ionic project on android then click the button but nothing happened and no camera preview show.

I test the project again and find it can scan qrcode and get the result test, but no camera preview.

I search the problem, someone says should to set the body and any elements transparent. I try but does not work.

Android. Nothing appears on screen. #35

AnyOne help?

Solution 1

In top level index.html:

<ion-app style="background: none transparent;"></ion-app>

In camera display page html file:

<ion-content style="background: none transparent;">

Solution 2

After some research even i found the answer and surely this works fantastic for all ,but @nokeieng answer helped me too..

1) First, make a new component for qrscanner. In ionic there is a lifecycle in ionic so go according to that after entering the component this event trigger ionViewDidEnter().In this event the camera opens and let you scan.

 ionViewDidEnter(){
     this.qrScanner.prepare()
    .then((status: QRScannerStatus) => {
      if (status.authorized) {
        // camera permission was granted

        var camtoast = this.toastCtrl.create({
          message: 'camera permission granted',
          duration: 1000
        });
        camtoast.present();
        // start scanning

        this.qrScanner.show()
        window.document.querySelector('ion-app').classList.add('cameraView');

        let scanSub = this.qrScanner.scan().subscribe((text: string) => {

          console.log('Scanned something', text);

          window.document.querySelector('ion-app').classList.remove('cameraView');
          this.qrScanner.hide(); // hide camera preview

          const toast = this.toastCtrl.create({
            message: 'You scanned text is this :'+text,
            duration: 6000
          });
          toast.present();
          scanSub.unsubscribe(); // stop scanning
        });


      } else if (status.denied) {
        const toast = this.toastCtrl.create({
          message: 'camera permission was denied',
          duration: 3000
        });
        toast.present();
        // 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 {
        const toast = this.toastCtrl.create({
          message: 'You can ask for permission again at a later time.',
          duration: 3000
        });
        toast.present();
        // permission was denied, but not permanently. You can ask for permission again at a later time.
      }
    })
    .catch((e: any) => console.log('Error is', e));

}

2) After this remove the camera class when back button is pressed for that add this code. ionViewWillLeave() will triggers when component is destroyed or left.

ionViewWillLeave(){

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

}

3) We are done with .ts file. Now we have to make the component and the main element i.e ion-app transparent so that we can see the camera for that we add this css inside theme/variables.scss

ion-app.cameraView ion-nav{opacity:0}

and

ion-app.cameraView,ion-app.cameraView ion-content,ion-app.cameraView .nav-decor,{
background: transparent url("../../assets/imgs/camera_overlay.png") !important;
background-size: 100% 100% !important;}

4) As you can see I have given a background image so that we get a camera overlay preview

and you are done with the code just run this command in terminal to see live changes in ionic

ionic cordova run android --livereload

Solution 3

You just need to toggle the ion-app display between "none" and "block" if the status is authorized.

const ionApp = <HTMLElement>document.getElementsByTagName("ion-app")[0];
                // start scanning
                const scanSub = this.qrScanner.scan().subscribe((link: string) => {
                    ionApp.style.display = "block";

                    this.qrScanner.hide(); // hide camera preview
                    scanSub.unsubscribe(); // stop scanning
                });
                ionApp.style.display = "none";
                this.qrScanner.show();

Solution 4

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

I changed 3 things to transparent for the camera to show: ion-app, ion-content and .nav-decor

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

Solution 5

I've work around following many answers,

Here is my solution combined all of the answer I've read.

In my scss file named page-scan.scss

page-scan {}

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

ion-app.cameraView {
    background-size: 100% 100% !important;
    /* To show image border */
    background-image: url([YOU CAN USE BASE64 image here!!]) !important;
}

Note: image border like this one Here is the sample image: file scan.html

<ion-header>

  <ion-navbar color="primary_dark">
    <ion-title>scan</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
</ion-content>

file scan.ts. add these functions to show and hide camera preview

 private showCamera() {
        ((<any>window).document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
    }
 private hideCamera() {
        ((<any>window).document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
    }

And finally, call show, scan and preview camera like code below

this.showCamera();
this.qrScanner.show()
this.subScan = this.qrScanner.scan()

See issue on github here

View more solutions

Comments

[Zagonine]

@jesusverma Can you explain why we have to do this for the camera show ? Can we not set this preview in a view ?

[Mon]

didn't work for me :( do I have to put anything inside <ion-content> </ion-content>

[rolinger]

@Jesusverma - I tried these two methods as well and the camera view still isn't showing. I know the camera is active though because I successfully (and blindly) scanned a QR Code. I have applied background:none transparent to pretty much every single top level element and yet the camera view stays hidden.

[nima]

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: stackoverflow.com/help/how-to-answer . Good luck 🙂