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

p5.js Beginners
15

Indeed I don’t. Neither P4 (using P3) or a Mac or Safari.

Actually I don’t use Processing’s IDE p5js mode at all.

I prefer to make my own “index.html” & “sketch.js” files.

BtW, I’ve modified your code and I’m posting it below.

However I can’t test it here. My desktop Win 8.1 PC w/ SlimJet browser only have audio devices listed.

index.html:

<script async src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

sketch.js:

/**
 * createCapture() for Found Devices (v1.0.1)
 * modded by GoToLoop (2022-Jan-28)
 *
 * https://Discourse.Processing.org/t/
 * code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/15
 */

'use strict';

const videoDevicesFound = [], captures = [];

addEventListener('load', getAvailableVideoDevices); // delay device search

function getAvailableVideoDevices() {
  navigator.mediaDevices
    .enumerateDevices()
    .then(collectAvailableVideoDevices)
    .catch(console.error);
}

function collectAvailableVideoDevices(devices, type = 'videoinput') {
  console.table(devices);

  for (const device of devices)  if (device.kind == type)
    videoDevicesFound.push(device); // collect video devices only

  startP5();
}

function createCaptures() {
  for (const { deviceId, groupId } of videoDevicesFound) {
    const constraints = {
      video: {}
    };

    if (deviceId)  constraints.video.deviceId = {
      exact: deviceId
    };

    if (groupId)  constraints.video.groupId = {
      exact: groupId
    };

    captures.push(createCapture(constraints));
  }
}

function startP5() {
  globalThis.setup = setup; // place callback setup() into global context
  globalThis.draw  = draw;  // place callback draw()  into global context

  new p5; // manually instantiate the p5js library
}

const setup = function () { // setup() callback is hidden from p5js for now
  createCanvas(1000, 700);
  createCaptures();
};

const draw = function () { // draw() callback is hidden from p5js for now
  frameCount % 60 || background('#' + hex(~~random(0x1000), 3));
};