Ionic cordova-plugin-qrscanner has no camera preview - cordova-plugins

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?

Answer 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;">

Answer 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

Answer 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();

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

Answer 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

Answer 6

Update your cordova-android.
I fixed this when updated to cordova android 10.1.0
cordova platform remove android
cordova platform add android#10.1.0

Answer 7

.ion-page{display:none important!}