Hello every one, I had a problem with " @ionic-native/qr-scanner " . I couln’t show camera preview but I can scan code.
I research on forum ( Link ) but still I couldn’t solve.
Here is my typescript code.
import { Component , OnInit} from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';
@IonicPage()
@Component({
selector: 'page-qr',
templateUrl: 'qr.html',
})
export class QrPage implements OnInit{
constructor(public navCtrl: NavController, public navParams: NavParams,private qrScanner: QRScanner,private viewCtrl:ViewController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad QrPage');
}
ngOnInit(){
}
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)=> {
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);
});
}
dismiss() {
this.viewCtrl.dismiss();
}
}
Here is my .html file
<ion-header>
<ion-toolbar color="haderColor">
<ion-title>
QR Tarayıcı
</ion-title>
<ion-buttons start>
<button ion-button (tap)="dismiss()">
<span ion-text color="white" showWhen="ios">Kapat</span>
<ion-icon name="md-close" showWhen="android, windows"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="content" scroll="true" overflow-scroll="true">
<button class="button" ion-button (click)="qrscanner()">qrscanner</button>
</ion-content>
and scss
page-qr {
ion-content {
background: none !important;
background-color: white !important;
height: 100%;
width: 100%;
}
.button {
background: none !important
}
}
Here my ionic info
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0
global packages:
cordova (Cordova CLI) : 7.0.1
local packages:
@ionic/app-scripts : 2.1.4
Cordova Platforms : ios 4.5.0
Ionic Framework : ionic-angular 3.6.1
System:
ios-deploy : 1.9.2
Node : v6.11.0
npm : 4.6.1
OS : macOS Sierra
Xcode : Xcode 9.0 Build version 9A235
Misc:
backend : legacy
Additional Note: I am using WKWebView
Thanks for reading.
