How to capture image from both front and rear camera using JavaScript?

Question

I am trying to build an application that can capture an image from the front and rear camera simultaneously (on a mobile device). I have experience with the library p5.js, which will allow me to take a picture from either the front or rear camera. Does anyone have an idea, example or suggestion for how to achieve the functionality of capturing an image from both cameras?

It seems as though the Media Capture and Streams API only allows a binary selection of either 'user' or 'environment' for the facingMode. This also seems to be the case for the p5.js library. Does anyone have an idea or example of what to do when the goal is to capture an image from the front and rear camera simultaneously?

Answer 1

You can definitely capture either camera by specifying the appropriate constraint. You can also enumerate and capture any of the available cameras if constraints don't work (although note that device enumeration will not work until after the user has consented to allow your page to access the camera). Unfortunately due to a limitation in WebKit, on iPhones it is not possible to actually simultaneously capture both the front and rear cameras. You can alternate between them, but the performance is not ideal.

    function setup() {
      createCanvas(400, 400);
    }

    let environmentCam;
    let isDrawing = false;
    function draw() {
      if (!isDrawing) {
        isDrawing = true;

        // Mobile Safari can only capture one camera at a time
        // https://bugs.webkit.org/show_bug.cgi?id=179363
        // capture user then environment, this may be slow
        let userCam =
          createCapture(
            { video: { facingMode: "user" } },
            async () => {
              if (environmentCam) {
                environmentCam.remove();
              }
              // give the camera time to focus
              await delay(100);
              image(userCam, 0, 0, width / 2, height);
              environmentCam = createCapture(
                { video: { facingMode: "environment" } },
                async () => {
                  userCam.remove();
                  // give the camera time to focus
                  await delay(100);
                  image(environmentCam, width / 2, 0, width / 2, height);
                  isDrawing = false;
                }
              )
            }
          );
      }
    }

    function delay(ms) {
      return new Promise(resolve => {
        setTimeout(resolve, ms);
      });
    }