camera selector

[defji]

Hi! Is there any solution for camera selector (front/rear) on mobile devices? Thx!

[si2w]

I'm interested too.

Thanks !

[ScottDellinger]

Interested in this as well.

[positlabs]

You can do this in the constraints. https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

[ScottDellinger]

While that is fantastic for the getUserMedia side of it, it also has to be made to work with IE/Safari in Flash when in fallback mode.

I'm likely going to just alter my copy of webcamjs to do this, rather than wait for an official update, as I need this.. well... today ;)

[positlabs]

If you get a solve in place, you should totally submit a PR

[imhassan]

I also want camera selection (front/rear) for mobile devices. Please share code snippet if anyone has done this.

[dhala]

I've been working with constraints to try and force the use of the rear camera. Here's my attempt: Webcam.set( 'constraints', { audio: false, video: { facingMode: { exact: 'environment' } } } );

So far, I've been unsuccessful.

[positlabs]

I'm running this code in a chrome app and it has successfully changed the camera.

var constraints = {
    audio: false,
    video: {
        mandatory: {},
        optional: []
    }
}

// set specific camera
if(appModel.camera && appModel.camera.deviceId){
    constraints.video.mandatory.sourceId = appModel.camera.deviceId;
}

gUM.call(navigator, constraints,
    function(stream){
        video.src = (URL && URL.createObjectURL(stream)) || stream;
        video.play();
    },
    function(error){}
);

[positlabs]

This totally ignores the flash interface, though...

[dhala]

When I run this code, I get: " environment is not defined". Same error when I use "user". Am I missing something obvious here? Webcam.set( { audio: false, video: { mandatory: {facingMode: { exact: environment } }, optional: [] } } )

[positlabs]

Use quotes.

mandatory: {facingMode: { exact: "environment" } }

[dhala]

That helps. Thanks.
I'm trying to force the Webcam using webcam.set. The code below displays the default image, the correct size and functions, but appears to be ignoring the "facingMode".

Webcam.set( { width: 320, height: 240, image_format: "jpeg", jpeg_quality: 90, audio: false, video: { facingMode: { exact: "environment" } } });

[rafverhaert]

My webapp shows always (in chrome) the front camera but i need the back camera.

How is it possible to get this thing done?

[danilvalov]

@defji @rafverhaert I wrote the following script to fix this problem:

var webcamOptions = {
  width: 320,
  height: 240,
  image_format: 'jpeg',
  jpeg_quality: 100,
};
// if you don't need any additional options then use `var webcamOptions = true;`

// `enumerateDevices` is a method for getting all available media devices
if (typeof navigator.mediaDevices.enumerateDevices === 'undefined') {
  // if method `enumerateDevices` doesn't support on the device we just run webcam
  webcam.set(webcamOptions);
} else {
  navigator.mediaDevices.enumerateDevices()
    .then(function (devices) {
      // Get all cameras on the device
      var cameras = devices.filter(function (device) {
        return device.kind === 'videoinput';
      });

      var deviceId = null;

      cameras.forEach(function (camera) {
        // Search back camera on the device
        if (camera.label.toLowerCase().search('back') > -1) {
          deviceId = camera.deviceId;
        }
      });

      // If we don't find the back camera we use last camera in the list
      if (!deviceId && cameras.length) {
        deviceId = cameras[cameras.length - 1].deviceId;
      }

      if (deviceId) {
        // If we have `deviceId` of a camera we run webcam with the following params:
        webcamOptions.constraints = {
          deviceId: {
            exact: deviceId
          },
          facingMode: 'environment'
        }
      }

      webcam.set(webcamOptions);
    })
    .catch(function (error) {
      console.log(error);
    });
}

[babelshift]

The above suggestion doesn't work with IE/Safari. Is there any way we can force a specific camera to be used via Flash Settings / OS settings?

EDIT: Just found out you can manually switch using Flash Settings by right clicking --> Settings. I know that isn't optimal, but it solves my case where the wrong camera was selected by default.

[dirkk0]

There is a working (albeit ugly) workaround in this SO thread with a working jsFiddle: https://stackoverflow.com/questions/41724545/select-rear-camera-on-android-device-jsartoolkit5