ngx-scanner

ngx-scanner copied to clipboard

Is your feature request related to a problem? Please describe. I have been trying to use the software for a few days and I have found that while it works on my laptop/PC, it doesn't work particularly well on mobile devices and I have gone through a lot of the logged issues to try to fix my own problems. One thing I found (especially with Andriod devices) is that if we use getUserMedia that seems to work fine, but I have been unable to convert a stream to a list of MediaDeviceInfo[].

Describe the solution you'd like With the above in mind, I have managed to attach the stream to a video element simply by setting the srcObject property to the stream returned from getUserMedia.

Describe alternatives you've considered I have tried using enumerateDevices and while it does list all the devices, for some reason it will not display the camera using the current component. I believe this is to do with the multiple lens, but the solutions provided in the other issues do not help with my own.

Additional context I have created a test that shows getUserMedia works on every device in Angular. The code is as follows:

@ViewChild('video', { static: true }) video: ElementRef;

constructor() {}

ngOnInit() {
  this.listDevices();
}

private listDevices(): void {
  let n: any = navigator;
  let v: ElementRef = this.video;

  // Older browsers might not implement mediaDevices at all, so we set an empty object first
  if (n.mediaDevices === undefined) {
    n.mediaDevices = {};
  }

  // Some browsers partially implement mediaDevices. We can't just assign an object
  // with getUserMedia as it would overwrite existing properties.
  // Here, we will just add the getUserMedia property if it's missing.
  if (n.mediaDevices.getUserMedia === undefined) {
    n.mediaDevices.getUserMedia = function (
      constraints: MediaStreamConstraints
    ) {
      // First get ahold of the legacy getUserMedia, if present
      var getUserMedia = n.webkitGetUserMedia || n.mozGetUserMedia;

      // Some browsers just don't implement it - return a rejected promise with an error
      // to keep a consistent interface
      if (!getUserMedia) {
        return Promise.reject(
          new Error('getUserMedia is not implemented in this browser')
        );
      }

      // Otherwise, wrap the call to the old n.getUserMedia with a Promise
      return new Promise(function (resolve, reject) {
        getUserMedia.call(n, constraints, resolve, reject);
      });
    };
  }

  n.mediaDevices
    .getUserMedia({ audio: false, video: true })
    .then(function (stream: MediaStream) {
      v.nativeElement.srcObject = stream;
    })
    .catch(function (err: MediaStreamError) {
      console.log(err.name + ': ' + err.message);
    });
}

This is really important