离子本机条形码扫描仪相机问题

时间:2018-10-31 17:09:36

标签: ionic-framework ionic3 cordova-plugins phonegap-plugins barcode-scanner

我在ionic 3上有一个应用程序。我已安装:

“ @ ionic-native / barcode-scanner”:“ ^ 4.16.0”

“ phonegap-plugin-barcodescanner”:“ ^ 8.0.0”

平台是Cordova浏览器。

当我尝试扫描弹出窗口时,要求我输入条形码: screencapture

默认操作不是打开相机开始扫描。我不知道我在做什么错。有人可以帮忙吗!

以下是代码:

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>

以下是离子信息结果: screencapture-ionic info

2 个答案:

答案 0 :(得分:0)

我是这样做的,并且可以正常工作

 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);
    });
  }

我只有一个页面作为“条形码控制器”,单击按钮以启动扫描仪只是在推动该“ BarcodePage”

答案 1 :(得分:0)

这是我的应用程序的有效代码段,用于打开相机进行扫描(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);
     });
  }
}