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

Question

我运行一个使用cordova-plugin-qrscanner的简单演示，它可以扫描二维码但没有相机预览。

相关代码吹：

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 上的离子项目然后单击按钮但没有任何反应，也没有相机预览显示。~~

再次测试项目，发现可以扫描二维码获取结果测试，但是没有相机预览。

我搜索问题，有人说应该设置正文和任何元素透明。我试过了，还是不行。

Android. Nothing appears on screen. #35

有人帮忙吗？

Answer 1

在顶层index.html:

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

在相机显示页面html文件中：

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

Answer 2

有一个div，有class=“nav-decor”，背景是黑的，这个需要改成透明的。

我将 3 项内容更改为透明以便相机显示：ion-app、ion-content 和 .nav-decor

我的解决方案是使用“cameraView”class，它将 ion-app、ion-content 和 .nav-decor 设置为透明背景。

我用过这个CSS

ion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor {
  background: transparent none !important; 
}

然后这些函数在 qrScanner.show() 之后显示相机并在我完成扫描后隐藏它

showCamera() {    
  (window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
}
hideCamera() {    
  (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
}

Answer 3

我已经解决了很多问题，

这是我的解决方案，结合了我读过的所有答案。

在我名为 page-scan.scss

的 scss 文件中

page-scan {}

ion-app.cameraView,
ion-app.cameraView ion-content,
ion-app.cameraView .nav-decor,
ion-header,
ion-navbar,
ion-title {
    background: transparent none !important;
}

ion-app.cameraView {
    background-size: 100% 100% !important;
    /* To show image border */
    background-image: url([YOU CAN USE BASE64 image here!!]) !important;
}

注：图片边框像this one 这是示例图片：文件 scan.html

<ion-header>

  <ion-navbar color="primary_dark">
    <ion-title>scan</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
</ion-content>

文件scan.ts。添加这些功能以显示和隐藏相机预览

 private showCamera() {
        ((<any>window).document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
    }
 private hideCamera() {
        ((<any>window).document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
    }

最后，像下面的代码一样调用显示、扫描和预览相机

this.showCamera();
this.qrScanner.show()
this.subScan = this.qrScanner.scan()

请参阅 github here

上的问题

Answer 4

经过一些研究，我什至找到了答案，当然这对所有人都非常有效，但@nokeieng 的答案也帮助了我..

1) 首先，为 qrscanner 创建一个新组件。在 ionic 中，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 class 当按下后退按钮时添加此代码。 ionViewWillLeave() 组件被销毁或离开时触发。

ionViewWillLeave(){

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

}

3) 我们完成了 .ts 文件。现在我们必须使组件和主要元素即 ion-app 透明，以便我们可以看到我们在 theme/variables.scss

中添加此 css 的相机

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

中的实时变化

ionic cordova run android --livereload

Answer 5

如果状态为授权，您只需要在 "none" 和 "block" 之间切换 ion-app 显示。

const ionApp = <HTMLElement>document.getElementsByTagName("ion-app")[0];
                // start scanning
                const scanSub = this.qrScanner.scan().subscribe((link: string) => {
                    ionApp.style.display = "block";

                    this.qrScanner.hide(); // hide camera preview
                    scanSub.unsubscribe(); // stop scanning
                });
                ionApp.style.display = "none";
                this.qrScanner.show();

Answer 6

.ion-page{display:none important!}

Answer 7

更新您的cordova-android。

我在更新到 cordova 时修复了这个问题 android 10.1.0

cordova platform remove android
cordova platform add android@10.1.0

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

Ionic cordova-plugin-qrscanner has no camera preview

cordova-plugins

qr-code

ionic3

ionic-native