Camera doesnt change to deviceId

[JaielZeus]

Hey Ive got some code here :)

  init(startScanner) {
    this.scanner = Quagga;
    Quagga.CameraAccess.enumerateVideoDevices().then((cameras) => {
      this.cameras = cameras;
      this.cameraLength = cameras.length;
      const scanner = this;
      const { deviceId } = this.cameras[this.active_cam_num];
      this.scanner.init({
        inputStream: {
          name: 'Live',
          type: 'LiveStream',
          target: document.getElementById(this.videoElement),
          constraints: {
            facingMode: 'environment',
            deviceId,
          },
        },
        decoder: {
          readers: ['code_128_reader'],
        },
      }, (err) => {
        if (err) {
          super.error(err);
          return;
        }

        super.init();

        if (startScanner) {
          this.start();
        }
      });
    });
  }

This is how I init the Quagga scanner. Then I have a switch camera button which just increments the active_cam_num variable and then calls init(true) form above again. I cannot change the camera on my phone and I need that as Quagga suddenly decided to change to the fron camera some hours ago and not the back camera.

I am on Android Chrome with a Samsung J5, the back camera worked fine till 2 hours ago now after I wrote a bit of code to let the user change the cameras it just doesnt work at all. Are the device Ids wrong maybe? I am using the Quagga build in function but maybe I have to change to a native browser approach?

[JaielZeus]

Tested with the native approach of navigator.mediaDevices.enumerateDevices() which Quagga essentially have a wrapper for and it still doesnt work Quagga refuses to use my back camera out of a sudden

[UziTech]

If you are using iOS there is a bug that won't work using deviceId. You can try using {facingMode: {exact: "environment"}} but some versions of iOS still won't work.

I ended up just giving up and only allowing the front camera with safari.

[ericblade]

It sounds to me like maybe you are using an incorrect camera id.

Let me see if I can untangle my mess of React-Redux code I run this at startup, which stores the videoDevices results into my redux data.

const { CameraAccess } = Quagga;
CameraAccess.enumerateVideoDevices().then((devices) => {
    const videoDevices = devices.filter(x => x.kind === 'videoinput');
    dispatch(receiveCameraEnum(videoDevices));
});

Somewhere in the app, the user selects a video device id, and then later, i just pass that string id to Quagga

        const constraints = {
            width: {
                min: 640,
            },
            height: {
                min: 480,
            },
            aspectRatio: {
                min: 1,
                max: 2,
            },
            focusMode: 'continuous',
            ...(!this.props.cameraId && { facingMode: 'environment' }),
            ...(this.props.cameraId && { deviceId: this.props.cameraId }),
        };

        Quagga.init({
            inputStream: {
                type: 'LiveStream',
                target: document.querySelector('#scannerViewport'),
                constraints,
            },
            locator: {
                patchSize: 'medium',
                halfSample: true,
            },
            numOfWorkers: window.navigator.hardwareConcurrency || 2,
            decoder: {
                readers: ['upc_reader', 'ean_reader'],
            },
            locate: this.props.camScanLocate,
            area: {
                top: '25%',
                right: '0%',
                left: '0%',
                bottom: '25%',
            },
        }

so i'd check that you're getting a valid camera id. also, don't set both facingMode and deviceId at the same time.