Question

我正在尝试创建一个QR码扫描仪应用程序，在这里我通过遵循离子条形码插件来完成，但是当我单击按钮时，需要在我的离子项目内查看相机视图，相机应该实时提供看到了什么。

 <ion-content padding >
  <ion-item style="background-color: transparent;">
       <!--MY CAMERA VIEW INSIDE HERE SHOULD ALWAYS SHOW ME LIVE FEED  -->
  </ion-item>

  <ion-item>
       <!-- DATA FROM THE SCANNED QR CODE-->
  </ion-item>
</ion-content> 



 constructor(public navCtrl: NavController,
              public barcodeScanner: BarcodeScanner) {

  }
  ionViewWillEnter(){
    this.open_bar();
  }

  open_bar(){
    console.log("open camera clicked")
    this.barcodeScanner.scan().then(barcodeData => {
      console.log('Barcode data', barcodeData);
     }).catch(err => {
         console.log('Error', err);
     });
    }
}

当页面加载时50％用于相机，而50％用于QR码数据中的数据，则页面加载时相机应始终处于活动状态我期待这样的景色

Answer 1

您可以以某种方式覆盖条形码插件的代码，以使用this other plugin而不是常规的Cordova相机打开相机。该插件使您轻松完成此任务。复杂的是要在条形码的插件中进行修改

Answer 2

您不能使用BarcodeScanner插件来执行此操作，而应该使用QRScanner模块

安装

ionic cordova plugin add cordova-plugin-qrscanner
npm install --save @ionic-native/qr-scanner

将其添加到app.module.ts

中的提供商中

@NgModule({
  .....
  providers: [
    ....
    QRScanner
  ]
})

使用

在您的.ts文件中，将QRscanner添加到构造函数中

constructor(private qrScanner: QRScanner) {}

然后像这样调用QRScanner：

this.qrScanner.prepare()
    .then((status: QRScannerStatus) => {
      if (status.authorized) {
         // You can scan your QR Code
         this.scanSub = this.qrScanner.scan().subscribe((text: string) => {
         console.log('Scanned value', text);
         this.qrScanner.hide();
         this.scanSub.unsubscribe(); 

        });

        this.qrScanner.show();
      } else if (status.denied) {
        console.log('Camera permission denied');
      } else {
        console.log('Permission denied for this runtime.');
      }
    })
    .catch((e: any) => console.log('Error is', e));
}

QRScanner不会打开视图来显示摄像机（就像BarcodeScanner一样），而只是在后台显示视图，因此请确保使预览区域透明

我可以在离子含量内部创建相机视图吗

2 个答案: