# QR Code Scanner implementation

**URL:** <https://forum.ionicframework.com/t/qr-code-scanner-implementation/107018>\
**Category:** Ionic Native\
**Created:** [September 28, 2017, 11:32am UTC](https://forum.ionicframework.com/t/qr-code-scanner-implementation/107018 "2017-09-28T11:32:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![cooldp007](https://avatars.discourse-cdn.com/v4/letter/c/c4cdca/32.png) [@cooldp007](https://forum.ionicframework.com/u/cooldp007)\
**Post date:** [September 28, 2017, 11:32am UTC](https://forum.ionicframework.com/t/qr-code-scanner-implementation/107018/1 "2017-09-28T11:32:20Z")

</div>

How to implement QR Code Scanner in ionic2?

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [September 28, 2017, 11:36am UTC](https://forum.ionicframework.com/t/qr-code-scanner-implementation/107018/2 "2017-09-28T11:36:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![addwebsolution](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/addwebsolution/32/120392_2.png) [@addwebsolution](https://forum.ionicframework.com/u/addwebsolution)\
**Post date:** [September 28, 2017, 11:39am UTC](https://forum.ionicframework.com/t/qr-code-scanner-implementation/107018/3 "2017-09-28T11:39:24Z")

</div>

Hi, @cooldp007

try this plugin

> **[Ionic Framework](https://ionicframework.com/docs/native/qr-scanner/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

Thanks,

---

<div class="post-metadata">

**Author:** ![cooldp007](https://avatars.discourse-cdn.com/v4/letter/c/c4cdca/32.png) [@cooldp007](https://forum.ionicframework.com/u/cooldp007)\
**Post date:** [September 28, 2017, 11:48am UTC](https://forum.ionicframework.com/t/qr-code-scanner-implementation/107018/4 "2017-09-28T11:48:19Z")

</div>

i installed plugin but i get blank screen

what should i write in html to see qr scanner?

---

<div class="post-metadata">

**Author:** ![addwebsolution](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/addwebsolution/32/120392_2.png) [@addwebsolution](https://forum.ionicframework.com/u/addwebsolution)\
**Post date:** [September 28, 2017, 12:06pm UTC](https://forum.ionicframework.com/t/qr-code-scanner-implementation/107018/5 "2017-09-28T12:06:36Z")

</div>

Hi, @cooldp007

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

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

```

Thanks,

---

<div class="post-metadata">

**Author:** ![cooldp007](https://avatars.discourse-cdn.com/v4/letter/c/c4cdca/32.png) [@cooldp007](https://forum.ionicframework.com/u/cooldp007)\
**Post date:** [September 29, 2017, 4:44am UTC](https://forum.ionicframework.com/t/qr-code-scanner-implementation/107018/6 "2017-09-29T04:44:23Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 29, 2017, 4:47am UTC](https://forum.ionicframework.com/t/qr-code-scanner-implementation/107018/7 "2017-09-29T04:47:44Z")

</div>

> [@cooldp007](#):
>
> where should i write scan function?

In the page controller. Incidentally, I would recommend using [the ZBar plugin](https://ionicframework.com/docs/native/zbar/) here instead. There are a bunch of threads here detailing much difficulty getting that QRScanner plugin to work properly for people.

---

<div class="post-metadata">

**Author:** ![cooldp007](https://avatars.discourse-cdn.com/v4/letter/c/c4cdca/32.png) [@cooldp007](https://forum.ionicframework.com/u/cooldp007)\
**Post date:** [October 2, 2017, 4:30am UTC](https://forum.ionicframework.com/t/qr-code-scanner-implementation/107018/8 "2017-10-02T04:30:01Z")

</div>

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?