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

Question

I can get mediaDevices of type "videoinput" through navigator.mediaDevices.enumerateDevices() Promise.

I can get the mediaStream through navigator.mediaDevices.getUserMedia(constraints) promises.

In order to have two video tracks in userMedia, what should the constraints look like?

Answer 1

You can get at most one video track and one audio track each time you call getUserMedia(), but you can call it multiple times. However, this may ask the user multiple times, depending on https, browser, and user actions.

Follow the standard (currently requires adapter.js in Chrome) to get a specific "videoinput" device, constrain it # using deviceId ##deviceId is passed to getUserMedia:

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, ensuring that it only returns the correct constraint, otherwise it will fail.

If you want two cameras, you have to call

getUserMedia again with a different deviceId and hope that the operating system you are on supports it (e.g. mobile phones usually don't).