QR Code Scanner implementation

Ionic Native
1

How to implement QR Code Scanner in ionic2?

2

Suggestion:
How about googling for “Ionic QR Scanner” and looking at the #1 result?

1 Like
3

Hi, @cooldp007

try this plugin

Thanks,

4

i installed plugin but i get blank screen

what should i write in html to see qr scanner?

5

Hi, @cooldp007

if you getting any error you can put screen short and add this code in html

<ion-content padding>
    <button ion-button (click)="scan()">Scan ... </button>
</ion-content>

Thanks,

6

Hello, @addwebsolution

my page.component.ts file:-

ionViewDidLoad()
{
console.log(‘ionViewDidLoad ScanCodePage’);
this.qrScanner.prepare()
.then((status: QRScannerStatus) =>
{
if(status.authorized)
{
let scanSub = this.qrScanner.scan().subscribe((text: string) =>
{
this.qrScanner.hide();
scanSub.unsubscribe();
});
this.qrScanner.show();
}
else if (status.denied)
{
}
else
{
}
})
.catch((e: any) => console.log(‘Error is’, e));
}
}

I got this error

cordova_not_available
co.scan is not a function

so where should i write scan function and what content i write inside scan function?

7

In the page controller. Incidentally, I would recommend using the ZBar plugin here instead. There are a bunch of threads here detailing much difficulty getting that QRScanner plugin to work properly for people.

8

Hello, @rapropos

My scan-code.ts File:-

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { QRScanner, QRScannerStatus } from ‘@ionic-native/qr-scanner’;
import { ZBar, ZBarOptions } from ‘@ionic-native/zbar’;

@IonicPage()
@Component({
selector: ‘page-scan-code’,
templateUrl: ‘scan-code.html’,
})
export class ScanCodePage
{

constructor(public navCtrl: NavController, public navParams: NavParams,private qrScanner: QRScanner,private zbar: ZBar)
{

}

ionViewDidLoad()
{
console.log(‘ionViewDidLoad ScanCodePage’);

let options: ZBarOptions = 
{
  flash: 'off',
  drawSight: false
};

this.zbar.scan(options)
.then(result => 
{
  console.log(result); // Scanned code
})
.catch(error => 
{
  console.log(error); // Error message
});

}
}

Now nothing displayed in my screen
so what should i do for it?