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);
});
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.
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.
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);
});
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
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.
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
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;”
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
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.
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?
