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

我运行一个简单的演示来使用cordova-plugin-qrscanner，它可以扫描qrcode但没有相机预览。Ionic 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离子项目，然后单击按钮却没有任何反应，没有摄像头预览显示。~~

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

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

Android. Nothing appears on screen. #35

谁能帮助？

来源

2017-07-26 Story5

你得到错误？ –

@suraj没有错误，它可以很好地扫描qrcode，但没有相机预览 – Story5

[显示]（http://ionicframework.com/docs/native/qr-scanner/#show）返回一个承诺..尝试'this.qrScanner .show（）。then（data => console.log（data），err => console.log（err））;' –

在顶层的index.html：

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

在相机的显示页的HTML文件：

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

来源

2017-08-01 11:25:55 jesusverma

谢谢，它的工作原理！ – Story5

@jesusverma你能解释为什么我们必须为摄像机做这些吗？我们不能在视图中设置此预览吗？ – Zagonine

有一个div，带有class =“NAV-装饰”，其具有一个黑色的背景，这需要改变为透明。

我改变了三件事透明相机显示：离子应用，离子含量和.nav-装饰

我的解决办法是有一个“cameraView”级，这将设置离子应用，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'); 
}

来源

2017-09-28 17:29:39

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

回答

相关问题