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

Created on 9 Sep 2020  路  4Comments  路  Source: zxing-js/ngx-scanner

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;
  }
bug

Most helpful comment

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

All 4 comments

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

That's kinda difficult to do and manage the rest of inputs at the same time, but that's nice indeed.

You just hand over deviceId = null to getStreamForDevice

That should be undefined in that version, we will have to work on that.

Undefined does not work in my example :-/

Was this page helpful?
0 / 5 - 0 ratings

Related issues

franciscovelez picture franciscovelez  路  9Comments

mattiaskagstrom picture mattiaskagstrom  路  8Comments

JKing-B16 picture JKing-B16  路  6Comments

ilellouch picture ilellouch  路  4Comments

odahcam picture odahcam  路  3Comments