Search code examples
angularionic2qr-codebarcode-scanner

Barcode Scanner in ionic 2


I am try to scan barcode using barcode scanner in android mobile using ionic2. I am a new learner of ionic. I tried some code,

home.ts

  import { Component } from '@angular/core';

  import { NavController } from 'ionic-angular';
  declare var cordova:any;
  @Component({
  selector: 'page-home',
  templateUrl: 'home.html'
  })
  export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  scan() {
  var me = this;
  if (cordova.plugins.barcodeScanner) {
    cordova.plugins.barcodeScanner.scan((imageData) => {
        alert(imageData.text);

    }, (error) => {
        alert("An error happened -> " + error);         
    });
  }

  }
  }

home.html

  <ion-navbar *navbar>
  <ion-title>
    Home
  </ion-title>
  </ion-navbar>

 <ion-content class="home">
 <button primary (click)="scan()">Scan</button>
 </ion-content>

But I got an error is 'Cannot find variable: Cordova'.

I used this plugin -

https://ionicframework.com/docs/v2/native/barcode-scanner/

for barcode scanner in ionic2

Thank you for the answer.


Solution

  • You need to add:

    import { BarcodeScanner } from 'ionic-native';
    

    after that you can use BarcodeScanner.scan() methods to get the information from a barcode or qr code. Try this code: home.ts

    import { Component } from '@angular/core';    
    import { NavController } from 'ionic-angular';
    import { BarcodeScanner } from 'ionic-native';
    
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
    
      constructor(public navCtrl: NavController) {}
    
      click() {
        BarcodeScanner.scan()
          .then((result) => {
            alert(
              "We got a barcode\n" +
              "Result: " + result.text + "\n" +
              "Format: " + result.format + "\n" +
              "Cancelled: " + result.cancelled
            )
          })
          .catch((error) => {
            alert(error);
          })
      }
    }
    

    home.html

    <ion-header>
      <ion-navbar>
        <ion-title>
          Ionic Blank
        </ion-title>
      </ion-navbar>
    </ion-header>
    
    <ion-content padding>
      <h1>Scan</h1>
      <button block (click)="click()" color="primary">Scan</button>
    </ion-content>