Ionic cordova-plugin-qrscanner 没有相机预览 [英] Ionic cordova-plugin-qrscanner has no camera preview

问题描述

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

I run a simple demo to use cordova-plugin-qrscanner, it can scan qrcode but no camera preview.

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 上运行 ionic 项目，然后单击按钮，但什么也没发生，也没有相机预览显示.

我再次测试项目，发现它可以扫描二维码并得到结果测试，但没有相机预览.

I test the project again and find it can scan qrcode and get the result test, but no camera preview.

我搜索问题，有人说应该将正文和任何元素设置为透明.我尝试了，但没有用.

I search the problem, someone says should to set the body and any elements transparent. I try but does not work.

安卓.屏幕上什么都没有出现.#35

有人帮忙吗?

推荐答案

在顶级index.html中:

In top level index.html:

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

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

In camera display page html file:

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

这篇关于Ionic cordova-plugin-qrscanner 没有相机预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！