web-dev-qa-db-fra.com

Ionic cordova-plugin-qrscanner n'a aucun aperçu de la caméra

Je lance une simple démonstration pour utiliser cordova-plugin-qrscanner, il peut scanner le qrcode mais pas de prévisualisation de la caméra.

qrscannerDemo sur Github

Code associé coup:

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>

Je lance le projet ionique sur Android, puis cliquez sur le bouton, mais rien ne s'est passé et aucun aperçu de la caméra n'a été diffusé.

Je teste à nouveau le projet et constate qu’il peut analyser qrcode et obtenir le résultat, mais pas d’aperçu de la caméra.

Je cherche le problème, quelqu'un dit devrait définir le corps et tous les éléments transparents. J'essaie mais ça ne marche pas.

Android. Rien ne s'affiche à l'écran. # 35

AnyOne aide?

cordova-pluginsqr-codeionic3ionic-native
5
Story5

Au niveau supérieur index.html:

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

Fichier html de la page d'affichage de l'appareil photo:

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

Après quelques recherches, même si j'ai trouvé la réponse, cela fonctionne à merveille pour tous, mais la réponse de @nokeieng m'a également aidé.

1) Commencez par créer un nouveau composant pour qrscanner. Dans ionic, il y a un cycle de vie dans ionic. Par conséquent, après avoir entré le composant, cet événement déclenche ionViewDidEnter().In cet événement, la caméra s'ouvre et vous permet de numériser. 

 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) Après cela, supprimez la classe camera lorsque vous appuyez sur le bouton Précédent pour ajouter ce code . ionViewWillLeave() se déclenche lorsque le composant est détruit ou quitté.

ionViewWillLeave(){

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

}

3) Nous en avons terminé avec le fichier .ts. Maintenant, nous devons rendre le composant et l’élément principal i.e ion-app transparents pour que nous puissions voir la caméra, pour cela nous ajoutons ce css dans theme/variables.scss

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

et

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) Comme vous pouvez le constater, j'ai créé une image d'arrière-plan pour obtenir un aperçu de la superposition de la caméra.

et vous avez terminé avec le code il suffit d’exécuter cette commande dans le terminal pour voir les modifications en direct dans Ionic 

ionic cordova run Android --livereload
3
Sanjay Rajeev

Il y a une div, avec class = “nav-decor”, qui a un fond noir, elle doit être changée en transparent.

J'ai changé 3 choses en transparent pour que la caméra montre: ion-app, ion-content et .nav-decor

Ma solution consistait à avoir une classe «cameraView», qui définirait l'application ion-app, ion-content et .nav-decor sur un fond transparent.

J'ai utilisé ce CSS

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

Et ensuite, ces fonctions pour montrer l’appareil photo après qrScanner.show () et le masquer une fois la numérisation terminée.

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

J'ai travaillé autour de nombreuses réponses,

Voici ma solution combinée toutes les réponses que j'ai lues.

Dans mon fichier scss nommé page-scan.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;
}

Remarque: la bordure de l'image ressemble à celle de celle-ci Voici l'exemple d'image:  Border for QR code area fichier scan.html

<ion-header>

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

</ion-header>

<ion-content>
</ion-content>

fichier scan.ts. ajouter ces fonctions pour afficher et masquer l'aperçu de l'appareil photo

 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');
    }

Et enfin, appelez Show, scannez et prévisualisez l'appareil photo comme ci-dessous

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

Voir le numéro sur github ici

0
nokieng