Ionic native barcode scanner camera issue

0
votes

I have an app on ionic 3. I have installed:

"@ionic-native/barcode-scanner": "^4.16.0"

"phonegap-plugin-barcodescanner": "^8.0.0"

Platform is cordova browser.

When i try to scan a popup shows up and asks me to enter the barcode: screencapture

Shouldn't the default action be to open camera to start scanning. I don't know what i am doing wrong. Can someone please help!

Following is the code:

import { Component, ViewChild, OnInit } from '@angular/core';
import { IonicPage, ToastController, LoadingController } from 'ionic-angular';
import { BarcodeScanner, BarcodeScannerOptions, BarcodeScanResult } from '@ionic-native/barcode-scanner';

import { QrScannerComponent } from 'angular2-qrscanner';

import { ProfileService } from '../profile/profile.service';
import { FirebaseAuthService } from '../firebase-integration/firebase-auth.service';

@IonicPage()
@Component({
  selector: 'page-scanner',
  templateUrl: 'scanner.html',
})
export class ScannerPage {

  result: BarcodeScanResult;
  loading: any;
  transactions: any;

  constructor(
    public toastCtrl: ToastController,
    public loadingCtrl: LoadingController,
    public profileService: ProfileService,
    public fAuthService: FirebaseAuthService,
    private barcodeScanner: BarcodeScanner
  ) {
  }

  async scan() {
    try{
      let options: BarcodeScannerOptions = {
        torchOn: true,
        prompt: "Point the camera at the barcode"
      };

      this.result = await this.barcodeScanner.scan(options);
    }
    catch(error) {
      console.log(error);
    }
  }
}
<ion-card class="camera-card">
    <ion-card-content>
    
      <button ion-button (click)="scan()">Scan</button>
      
    </ion-card-content>
  </ion-card>

Following is the ionic info result: screencapture-ionic info

2
ionic-frameworkionic3cordova-pluginsphonegap-pluginsbarcode-scanner

2 Answers

1
votes

This is a working snippet of my application opening the camera for scanning (Ionic 4)

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Platform, AlertController } from '@ionic/angular';
import { DatabaseService} from '../../providers/database/database.service';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  current:any;
  constructor(
    private platform: Platform,
    private router: Router,
    public db: DatabaseService,
    public barcodeScanner: BarcodeScanner,
    private alertController: AlertController
  )
  {}
  scan()
  {
    this.barcodeScanner.scan().then(barcodeData => {
      if(barcodeData.cancelled)
      {
        return
      }
      this.db.checkQRCode(barcodeData.text)
      .then(doc => {
      })
     }).catch(err => {
         console.log('Error', err);
     });
  }
}
0
votes

I do it that way and it's working

 export class BarcodePage {
  options: BarcodeScannerOptions;

   constructor(public app: App,
    public barcodeScanner: BarcodeScanner,
  ) {
    this._global.bankSelected.id
    this.options = {
      prompt: "whatever",
      formats: 'QR_CODE'
    }
    this.scan()
  }




scan() {
    this.barcodeScanner.scan(this.options).then(barcodeData => {
      if (barcodeData.cancelled == true) {
          this.navCtrl.pop()
      } else {
       do whatever with barcodeData.text
      }
    }).catch(err => {

      console.log('Error', err);
    });
  }

I have one only page as "barcode controller" and clicking the button to launch the scanner is just pushing this "BarcodePage"