Как реализовать QR-сканер в Ioni c 4? Камера не отображается

Question

Я работаю с Ioni c 4, разработка и приложение. Я установил плагин QR-сканера cordova , потому что мне нужна функция QR

. Я следовал инструкциям, но камера не показывалась. Вот скрипт ts:

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';

@Component({
  selector: 'app-agregarpin',
  templateUrl: './agregarpin.page.html',
  styleUrls: ['./agregarpin.page.scss'],
})
export class AgregarpinPage implements OnInit {

  constructor(public modalController: ModalController,private qrScanner: QRScanner) { }

  ngOnInit() {
  }

    dismiss() {
    // using the injected ModalController this page
    // can "dismiss" itself and optionally pass back data

    this.modalController.dismiss();
  }

  scandata(){


      this.qrScanner.prepare()
  .then((status: QRScannerStatus) => {



     if (status.authorized) {
       // camera permission was granted

        this.qrScanner.show();
       // start scanning
       let scanSub = this.qrScanner.scan().subscribe((text: string) => {
         console.log('Scanned something', text);

         this.qrScanner.hide(); // hide camera preview
         scanSub.unsubscribe(); // stop scanning
       });

     } else if (status.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.
     }
  })
  .catch((e: any) => console.log('Error is', e));



  }//

}

После некоторых проверок я не обнаружил никаких ошибок. После некоторого исследования я получил это, камера работает, но под приложением. Слои и теги html находятся над камерой. Затем я следую этому учебнику , а камера по-прежнему не отображается.

Исправление в соответствии с учебным и другим форумом - добавить класс css в тег ion-app, например: это:

CCS

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

Этот код css, который я добавил в файлы global.s css и app.component.s css.

А затем обновленная функция:

 scandata(){

        (window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
         (window.document.querySelector('body') as HTMLElement).classList.add('cameraView');
          (window.document.querySelector('ion-router-outlet') as HTMLElement).classList.add('cameraView');



      this.qrScanner.prepare()
  .then((status: QRScannerStatus) => {



     if (status.authorized) {
       // camera permission was granted

        this.qrScanner.show();
       // start scanning
       let scanSub = this.qrScanner.scan().subscribe((text: string) => {
         alert('Scanned something');

         this.qrScanner.hide(); // hide camera preview
         scanSub.unsubscribe(); // stop scanning
       });

     } else if (status.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.
     }
  })
  .catch((e: any) => console.log('Error is', e));



  }//

Но здесь все еще не отображаются некоторые скриншоты.

Страница полностью пуста, только кнопка с функцией щелчка, которая вызывает метод scandata ()

Когда я нажимаю кнопку «по умолчанию», появляется диалоговое окно с запросом разрешения на использование камеры:

Я нажимаю кнопку «Разрешить», но камера по-прежнему не работает.

I не знаю, что еще я могу сделать.