Блог

Я хотел бы встроить сканер qr-кода (https://github.com/zxing-js/ngx-scanner ) в нижний лист в моем приложении Angular. Чтобы получить информацию о камере, я использую в своем компоненте сканирования (нижний лист) следующий код:

 @ViewChild('scanner')
scanner:ZXingScannerComponent;
hasCameras = false;
hasPermission: boolean;
availableDevices: MediaDeviceInfo[];
selectedDevice: MediaDeviceInfo;
ngOnInit() {
this.scanner.camerasFound.subscribe((devices: MediaDeviceInfo[]) => {
  this.hasCameras = true;

  console.log('Devices: ', devices);
  this.availableDevices = devices;

  //select camera if only one is available
  if (this.availableDevices.length <= 1) {
    this.selectedDevice = this.availableDevices[0];
  }
  else {
    //selects the devices's back camera by default
    for (const device of devices) {
      if (/back|rear|environment/gi.test(device.label)) {
        this.scanner.changeDevice(device);
        this.selectedDevice = device;
        break;
      }
    }
  }
  console.log('selected Device: '   this.selectedDevice);
});}
  

К сожалению, я не получаю данные с камеры по подписке до отображения нижнего листа, поэтому сканер не работает, поскольку в данный момент данные с камеры недоступны.

html моего компонента сканирования (нижний лист):

   <zxing-scanner #scanner class="scanner" start="true" [device]="selectedDevice" (scanSuccess)="handleQrCodeResult($event)"></zxing-scanner>
  

html компонента, который вызывает компонент сканирования:

   scan() {

const scanSheet = this.bottomSheet.open(ScanningComponent, {
  panelClass: 'bottomSheet'
}); }
  

Кто-нибудь уже сталкивался с этой проблемой?

ОБНОВЛЕНИЕ: я решил это, вызвав это.ChangeDetectorRef.DetectChanges(); Это обновляет данные моей камеры и запускает сканер.