Ionic QR Code scan not opening camera for iOS and Android devices


#1

I have tried to implement QR code scan using Ionic native tutorial from this url “https://ionicframework.com/docs/native/qr-scanner/” But it is not opening camera please refer the code below and please help me to solve this issue.

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { QRScanner, QRScannerStatus } from ‘@ionic-native/qr-scanner’;
import { AndroidPermissions } from ‘@ionic-native/android-permissions’;

@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.navCtrl.pop();
      });

      this.qrScanner.resumePreview();

      // show camera preview
      this.qrScanner.show()
      .then((data : QRScannerStatus)=> { 
        console.log('datashowing', data.showing);
        //alert(data.showing);
      },err => {
        //alert(err);

      });

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

}
}


Problem with showing Camera Preview @ionic-native/qr-scanner
Scanning QR code from an image folder
#2

Please edit your post, it is not very readable at the moment.
Use the </> button above the input field to format your code, command line output or error message (select the text first, then click the button or wrap it in ``` manually). Check the preview if it looks better. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.

Did you follow all the installations steps?
https://ionicframework.com/docs/native/#Add_Plugins_to_Your_App_Module

What is happening? What codes gets executed?


#3

Thank you for your information i will update post. Yes, i have properly installed all the steps and the code is working without any issues. My only problem is the camera is not opening for scanning.

//home.html
<



Ionic Blank




<button class=“button” ion-button (click)=“qrscanner()”>qrscanner

//home.ts

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { QRScanner, QRScannerStatus } from ‘@ionic-native/qr-scanner’;
import { AndroidPermissions } from ‘@ionic-native/android-permissions’;

@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.navCtrl.pop();
      });

      this.qrScanner.resumePreview();

      // show camera preview
      this.qrScanner.show()
      .then((data : QRScannerStatus)=> { 
        console.log('datashowing', data.showing);
        //alert(data.showing);
      },err => {
        //alert(err);

      });

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

}

}


#4

Don’t post again, edit your initial post so your code is readable.

Also:

This is a bit contradictory. If there is no camera, obviously the code is not working without issues.


#5

Can you please give an idea what i need to do to scan using camera. Do i need to implement the camera plugin to work this ?


#6

I have the same issue, you can find the repo with the bug here https://github.com/laedanthehuman/ionic-test-qrcode.

And i tested the Zbar and the Barcode Scanners plugins, and they worked very well


#7

What “same issues”? That “the code is working without any issues. My only problem is the camera is not opening for scanning.”?


#8

In fact the code is working well, the problem is that there’s no explanation or tutorial or something that tells the user that the camera is open but you have to make the background of some area of the page transparent, like this repo and this issue


#9

I can’t make this plugin work. i discovered something about it. And the main reason that the camera doesn’t show it’s because the show() method does’t do what it has to do. that its this:

Configures the native webview to have a transparent background, then sets the background of the and DOM elements to transparent, allowing the webview to re-render with the transparent background.

The body doesn’t has the background transparent neither the html, so i think that its a bug. if you go to the show method in the .java file. It does this.

webView.getView().setBackgroundColor(Color.argb(1, 0, 0, 0));

But i don’t know if this works :confused:


#10

Interesting.

I guess this is a problem of the added Ionic. The webview becomes transparent, but not the html layer that it is showing.

Can you remote debug it, inspect the elements and make sure that all the elements (divs) are transparent?

Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios
Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android

If this is the case, we would have to at least add some more information to the Ionic Native page for the plugin.


#11

I already resolve the problem :slight_smile:

After some research I found that we have to add the transparent background in ion-app what i did this

window.document.querySelector('ion-app').classList.add('transparentBody')
-------------------
.transparentBody {
    background: transparent !important;
}
-------------------
  ionViewDidLeave() {
    window.document.querySelector('ion-app').classList.remove('transparentBody')
  }

Because the ion-app has a class that add a backround color #fff (i think that is .ion-app.md in android at least)

And in the ion-content has a class also that set the background-color to #fff

So i did like this in my .scss file

page-qr-scanner {
    ion-content {
       background: transparent !important;
    }
}

So. i think that you’re alright. We have to add more information in the iionic native page :smiley:


#12

One could discuss if this should also be done by Ionic Native automatically…

Please create an issue at the ionic native repository on Github with the basic information and your great solution - then post the link here. We can get this fixed :slight_smile:


#13

Yeah, i did this, and the issue is the #117

Thanks a lot @Sujan12.
Maybe i can see the code of the plugin and then send a PR with this automatically solution.

But I think that this thread was resolved right ?


#14

I could able to solve the issue the problem was i have made the inner html transparent but need to add transparency to the index.html too.

Please make the changes to open the camera for scanning.
Index.html
<ion-app style="background: none transparent;"
home.html
<ion-content style=“background: none transparent;”


#15

this is the same what i did. but i did in javascript. because if you do this hard coded. you are in very risk of your application doesn’t work as you expected. so doing this with javascript and lifecyles is better then hard coded in the html


#16

Actually, you should probably really do it with Angular mechanisms. Dynamic, so it gets turned on and off, but triggered by setting some variable that is bound somehow. No window.document anything.

Suggestions @rapropos?


#17

yesss. as i said on the issue of he plugin repo. A better solution to the mine is better :smiley:


#18

This is not working for me.

I’ve got a button in my menu, declared in my home.html file, which triggers a “qrScan()” function in home.ts, which launches the example code provided by Ionic in its documentation, for using the QR Scanner. Obviously, after installing the cordova plugin and importing it in my NgModule.

It scans QR codes if I put them in the front of the camera, but the camera view isn’t shown, as op relates. I tried your same solution, but it’s just not working for me…

When is the Ionic team updating this? Is any other, maybe more extensive explanation, on how to fix this issue?


#19

Probably not particularly helpful for the folks wedded to this particular plugin, but my suggestion is “use zbar instead”.


#20

My solution is working for me. Can you please try that and if need support please provide your code to check it.