Code is not executed in Processing, but in p5.js Web Editor

p5.js Beginners
3

The array is not filled in getDevices(); therefore we can’t expect it to be filled in setup(); Furthermore, the following console.log is with two cameras connected. navigator.mediaDevices.enumerateDevices() found only one camera and the DeviceInfo fields are not filled in. This is with Processing IDE in mode p5.js and a Safari browser on a Mac. It does not work correctly in the p5.js web editor with a Chrome browser either with an initial setting of deviceList[1]. As soon as I switch it to deviceList[0] it works. I can then switch to deviceList[1] and get the second camera (after starting with zero). The deviceList array is filled correctly in getDevices() in Chrome.

getDevices
getDevices1392×106 27 KB

Try running the following code in Processing IDE (I used Safari browser) then try the same code in p5.js web editor preferably with Chrome. Check the console output of each and note the differences. This code came from: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

function setup() {
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices() not supported.");
  return;
}

// List cameras and microphones.
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
  devices.forEach(function(device) {
    console.log(device.kind + ": " + device.label + " id = " + device.deviceId);
  });
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});
}

function draw() {
}