What constraints should I pass to getUserMedia() in order to get two video mediaStreamTracks?

Question

I can get mediaDevices of 'videoinput' kind via navigator.mediaDevices.enumerateDevices() promise.

I can get mediaStream via navigator.mediaDevices.getUserMedia(constraints) promise.

What should constraints look like in order to have two video tracks in userMedia?

Solution

You can get max one video track and one audio track each time you call getUserMedia(), but you can call it multiple times. This may ask the user more than once though, depending on https, browser, and what the user does.

Following the standard (which at this time requires using adapter.js in Chrome), to get a specific "videoinput" device, pass its deviceId into getUserMedia using the deviceId constraint:

navigator.mediaDevices.enumerateDevices()
.then(devices => {
  var camera = devices.find(device => device.kind == "videoinput");
  if (camera) {
    var constraints = { deviceId: { exact: camera.deviceId } };
    return navigator.mediaDevices.getUserMedia({ video: constraints });
  }
})
.then(stream => video.srcObject = stream)
.catch(e => console.error(e));

The exact keyword makes the constraint required, guaranteeing it'll return only the right one, or fail.

If you want two cameras, you'll have to call getUserMedia again with a different deviceId, and hope the OS you're on supports it (e.g. phones generally don't).

Comments

[vadirn]

Thank you! But we still can switch from back to front camera on phones, right?

[jib]

Yes, provided you .stop() existing tracks before calling getUserMedia again. You can use either enumerateDevices or the facingMode constraint for this stackoverflow.com/a/32364912/918910