Use MediaDevices.getUserMedia() with facingMode: environment as default

Hello,

I’m trying to use only rear camera, but the following RegEx pattern is not working for alle devices supporting different languages.

Why is facingMode: environment not used as a default? You just hand over deviceId = null to getStreamForDevice. But right now it’s only possible to hand over a MediaDevice

const matcher = ({ label }) => /back|trás|rear|traseira|environment|ambiente/gi.test(label);

Is the following method supported? I can’t find it in class BrowserMultiFormatContinuousReader, but it is used in ZXingScannerComponent. const devices = await this.getCodeReader().listVideoInputDevices() || [];

  /**
   * Gets the media stream for certain device.
   * Falls back to any available device if no `deviceId` is defined.
   */
  public async getStreamForDevice({ deviceId }: Partial<MediaDeviceInfo>): Promise<MediaStream> {
    const constraints = this.getUserMediaConstraints(deviceId);
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    return stream;
  }

  /**
   * Creates media steram constraints for certain `deviceId`.
   * Falls back to any environment available device if no `deviceId` is defined.
   */
  public getUserMediaConstraints(deviceId: string): MediaStreamConstraints {

    const video = typeof deviceId === 'undefined'
      ? { facingMode: { exact: 'environment' } }
      : { deviceId: { exact: deviceId } };

    const constraints: MediaStreamConstraints = { video };

    return constraints;
  }

[martea]

Also confirm that this would be great, or anycase define media contraints as input for the component, so one can control the search preferences, this is way better to look for “back cameras”

apply MediaStreamConstraints as @input parameter and apply it to when calling for the device. this is for example what i want to achive.

var mediaConstraint = {
      video: {
width: {
           min: 1280,
         ideal: 1920,
           max: 2560,
         },
         height: {
           min: 720,
           ideal: 1080,
           max: 1440
         },
        facingMode: 'environment'
      }

[odahcam]

You can play with this now: https://github.com/zxing-js/ngx-scanner/blob/42e6ad4f58fd235bd15d688d36050a4ea25fdc01/projects/zxing-scanner/src/lib/zxing-scanner.component.ts#L287-L302