Accessing Multiple camera javascript getusermedia

Solution 1:

You can create two different streams, one for each camera, and show them simultaneously in two <video> tags.

The list of available devices is available using navigator.mediaDevices.enumerateDevices(). After filtering the resulting list for only videoinputs, you have access to the deviceIds without needing permission from the user.

With getUserMedia you can then request a stream from the camera with id camera1Id using

navigator.mediaDevices.getUserMedia({
  video: {
    deviceId: { exact: camera1Id }
  }
});

The resulting stream can be fed into a <video> (referenced here by vid) by calling vid.srcObject = stream.

I have done this for two streams from two webcams simultaneously.