Unable to set 'back camera' as the default camera in IOS 13

[chetana1997]

Describe the bug I have tried to set the 'Back camera' of the mobile device (both android and Iphone) as the default camera of the scanner. I have also tried the solution given in the following link:

Reference link

But am unable to set back camera as the default camera in IOS 13. and i also want to know how to identify 'back camera' from the available devices? as of now i am identifying it based on the label property of the device. But i want to know if there is any other way to identify that.

HTML code:

<zxing-scanner #scanner class="test-class" start="true" (scanSuccess)="handleQrCodeResult($event)" cssClass="small-video"></zxing-scanner>

TS Code:

import { Component, VERSION, ViewChild } from '@angular/core';

import { ZXingScannerComponent } from '@zxing/ngx-scanner';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngVersion = VERSION.full;

  @ViewChild('scanner')
  scanner: ZXingScannerComponent;

  hasCameras = false;
  hasPermission: boolean;
  qrResultString: string;

  availableDevices: MediaDeviceInfo[];
  selectedDevice: MediaDeviceInfo;

  ngOnInit(): void {

    this.scanner.camerasFound.subscribe((devices: MediaDeviceInfo[]) => {
      this.hasCameras = true;

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

  handleQrCodeResult(resultString: string) {
    console.log('Result: ', resultString);
    this.qrResultString = resultString;
  }

  onDeviceSelectChange(selectedValue) {
    console.log('Selection changed: ', selectedValue);
    this.scanner.device = selectedValue;
  }

  setDeviceDefaultCamera() {
    for (let index = 0; index < this.availableDevices.length; index++) {
      if (this.availableDevices[index].label.toLowerCase().includes('front') || this.availableDevices[index].label.toLowerCase().includes('rear')) {
        this.scanner.device = this.availableDevices[index];
      }
    }
  }
}

Smartphone (please complete the following information):

• Device: [ iPhone11 pro]
• OS: [ iOS 13.3.1]
• Browser [ safari]
• Version of ngx scanner = 1.4.0

Additional context i am currently using angular 6 and ngx scanner version 1.4. And testing in Iphone and Android devices.

[deepender87]

I am also facing the same Issue. Kindly fix this.

[chetana1997]

This issue is occurring only in IOS 13. Requesting to please fix this issue soon.

[odahcam]

Have you tried your code without the this.availableDevices[index].label.toLowerCase().includes('front') || segment?

[Xenoage]

I noticed that the labels of the cameras can be language-dependent. For me (in Germany) it was "Rückkamera" (= German for rear camera). Knowing this, I could choose the right MediaDeviceInfo, however setting it using the device-Property of the angular component had no effect!

[odahcam]

Please, setup a demo and open another issue @Xenoage , setting the value for device should work.

[shreya-sawardekar]

I am facing the same issue. Even though I set the device property, it is not picking up the correct camera.