Ionic cordova-plugin-qrscanner没有相机预览

Question

我运行一个简单的演示来使用cordova-plugin-qrscanner,它可以扫描qrcode但没有摄像头预览.

在Github上的qrscannerDemo

相关密码打击:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';


import { AndroidPermissions } from '@ionic-native/android-permissions';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
              public androidPermissions: AndroidPermissions,
              public qrScanner: QRScanner) {

  }

  qrscanner() {

    // Optionally request the permission early
    this.qrScanner.prepare()
      .then((status: QRScannerStatus) => {
        if (status.authorized) {
          // camera permission was granted
          alert('authorized');

          // start scanning
          let scanSub = this.qrScanner.scan().subscribe((text: string) => {
            console.log('Scanned something', text);
            alert(text);
            this.qrScanner.hide(); // hide camera preview
            scanSub.unsubscribe(); // stop scanning
          });

          this.qrScanner.resumePreview();

          // show camera preview
          this.qrScanner.show();

          // wait for user to scan something, then the observable callback will be called

        } else if (status.denied) {
          alert('denied');
          // camera permission was permanently denied
          // you must use QRScanner.openSettings() method to guide the user to the settings page
          // then they can grant the permission from there
        } else {
          // permission was denied, but not permanently. You can ask for permission again at a later time.
          alert('else');
        }
      })
      .catch((e: any) => {
        alert('Error is' + e);
      });

  }

}

<ion-header>
  <ion-navbar transparent>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header> 

 <ion-content padding style="background: none transparent;">
  <button ion-button (click)="qrscanner()">qrscanner</button>
</ion-content>  

我在android上运行离子项目,然后单击按钮但没有任何反应,没有相机预览显示.

我再次测试项目并发现它可以扫描qrcode并获得结果测试,但没有相机预览.

我搜索问题,有人说应该设置身体和任何元素透明.我尝试但不起作用.

Android系统.屏幕上没有任何内容.#35

AnyOne有帮助吗？

Answer 1

在顶级index.html:

<ion-app style="background: none transparent;"></ion-app>

在相机显示页面的html文件中:

<ion-content style="background: none transparent;">

Answer 2

经过一番研究，我什至找到了答案，并且肯定对所有人都有效，但是@nokeieng答案也帮了我。

1）首先，为制作一个新组件qrscanner。由于ionic存在离子的生命周期，因此请按照进入该组件后的事件触发事件触发ionViewDidEnter()。在这种情况下，相机会打开并允许您进行扫描。

 ionViewDidEnter(){
     this.qrScanner.prepare()
    .then((status: QRScannerStatus) => {
      if (status.authorized) {
        // camera permission was granted

        var camtoast = this.toastCtrl.create({
          message: 'camera permission granted',
          duration: 1000
        });
        camtoast.present();
        // start scanning

        this.qrScanner.show()
        window.document.querySelector('ion-app').classList.add('cameraView');

        let scanSub = this.qrScanner.scan().subscribe((text: string) => {

          console.log('Scanned something', text);

          window.document.querySelector('ion-app').classList.remove('cameraView');
          this.qrScanner.hide(); // hide camera preview

          const toast = this.toastCtrl.create({
            message: 'You scanned text is this :'+text,
            duration: 6000
          });
          toast.present();
          scanSub.unsubscribe(); // stop scanning
        });


      } else if (status.denied) {
        const toast = this.toastCtrl.create({
          message: 'camera permission was denied',
          duration: 3000
        });
        toast.present();
        // camera permission was permanently denied
        // you must use QRScanner.openSettings() method to guide the user to the settings page
        // then they can grant the permission from there
      } else {
        const toast = this.toastCtrl.create({
          message: 'You can ask for permission again at a later time.',
          duration: 3000
        });
        toast.present();
        // permission was denied, but not permanently. You can ask for permission again at a later time.
      }
    })
    .catch((e: any) => console.log('Error is', e));

}

2）在此之后，删除camera类，当按下后退按钮时，添加该代码。 ionViewWillLeave()当组件被销毁或离开时将触发。

ionViewWillLeave(){

  window.document.querySelector('ion-app').classList.remove('cameraView');

}

3）我们完成了.ts文件。现在我们必须使组件和主要元素（即ion-app透明）成为可能，以便我们可以看到相机，并在其中添加了此CSStheme/variables.scss

ion-app.cameraView ion-nav{opacity:0}

和

ion-app.cameraView,ion-app.cameraView ion-content,ion-app.cameraView .nav-decor,{
background: transparent url("../../assets/imgs/camera_overlay.png") !important;
background-size: 100% 100% !important;}

4）如您所见，我给了背景图片，以便我们获得相机覆盖预览

代码完成后，只需在终端中运行此命令即可查看离子的实时变化

ionic cordova run android --livereload