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

**URL:** <https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867>\
**Category:** Beginners\
**Created:** [January 27, 2022, 11:05pm UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867 "2022-01-27T23:05:37Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Master\_Kneater](https://avatars.discourse-cdn.com/v4/letter/m/34f0e0/32.png) [@Master\_Kneater](https://discourse.processing.org/u/Master_Kneater)\
**Post date:** [January 27, 2022, 11:05pm UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/1 "2022-01-27T23:05:37Z")

</div>

Hello everyone, as the title suggests I am having a problem running my javascript code in Processing. However, if I copy this code into the p5.js web editor ([https://editor.p5js.org/](https://editor.p5js.org/)) the code works without problems. I use the p5.js extension. Maybe someone knows the problem and has a solution how I can fix this and run this code in processing. Thanks a lot!!!

```auto
var deviceList = [];

function preload() {
  navigator.mediaDevices.enumerateDevices().then(getDevices);
}

function setup() {
  var constraints = {
  video: {
      deviceId: {
        exact: deviceList[1].id
      },
    }
  };

canvas = createCanvas(width, height);
background(255);
video = createCapture(constraints);
//console.log(deviceList);
}

function getDevices(devices) {

  //arrayCopy(devices, deviceList);
  for (let i = 0; i < devices.length; ++i) {
    let deviceInfo = devices[i];
    
      //Only get videodevices and push them into deviceList
      if (deviceInfo.kind == 'videoinput') {
        deviceList.push({
        label: deviceInfo.label,
        id: deviceInfo.deviceId
      });
// console.log("Device name :", devices[i].label);
// console.log("DeviceID :", devices[i].deviceId);
    }
  }
}

```

Edit: When I check the developer tools, i get the following error:

 ![Received_Error](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/da1fc06c56b2cc39be340b64d889098deec3c253.png)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 28, 2022, 12:29am UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/2 "2022-01-28T00:29:14Z")

</div>

There’s no guarantee that the array _deviceList[]_ will be fully filled when the code reaches this line `exact: deviceList[1].id` within **setup()**!

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 28, 2022, 1:23am UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/3 "2022-01-28T01:23:04Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/982d995ef58de001775a0836e7e8703d6040a384.png)

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](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices)

```auto
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() {
}

```

---

<div class="post-metadata">

**Author:** ![Master\_Kneater](https://avatars.discourse-cdn.com/v4/letter/m/34f0e0/32.png) [@Master\_Kneater](https://discourse.processing.org/u/Master_Kneater)\
**Post date:** [January 28, 2022, 7:22am UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/4 "2022-01-28T07:22:45Z")

</div>

> [@GoToLoop](#):
>
> exact: deviceList[1].id

Thank you for the answer. Yes I thought so too, that is why I packed the function into the preload(). Unfortunately that didn’t change anything either. Is there a way to execute the exact: deviceList[1].id only once it exists?

---

<div class="post-metadata">

**Author:** ![Master\_Kneater](https://avatars.discourse-cdn.com/v4/letter/m/34f0e0/32.png) [@Master\_Kneater](https://discourse.processing.org/u/Master_Kneater)\
**Post date:** [January 28, 2022, 7:33am UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/5 "2022-01-28T07:33:31Z")

</div>

Thanks for the reply. Yes, I should have written that. I have 2 webcams on my PC and would like to read the ID of both, or then use them in the connection, therefore deviceList[1]…

I also tried the code with my Chrome browser and get the following output:

![response_Chrome](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d0e1f77e90abc548981671555ed6430d68e18758.png)

However, if I paste the code back into the p5.js online web editor I get the following as a response:

videoinput: HD Pro Webcam C920 (046d:082d) id = 3ff1dc25d725025fc915c7064c6eaee3a4dfb92658f8b0064770f6c9204872c6  
videoinput: HD Webcam (04f2:b71a) id = c19baf8272627d653c907eda9908783b32d4f5b58c90f3887098fdfeab477551

So it is working there.

I don’t think it’s because the deviceList[0] is not loading fast enough. If I remove the comments in the last two lines and display the current device name and ID, it works…

(I mean the following lines of the original code)

```auto
// console.log("Device name :", devices[i].label);
// console.log("DeviceID :", devices[i].deviceId);

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 28, 2022, 12:44pm UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/6 "2022-01-28T12:44:57Z")

</div>

> [@Master\_Kneater](#):
>
> … I packed the function into the **preload()**. Unfortunately that didn’t change anything either.

Callback **preload()** only works for p5js asset loading functions such as **loadImage()**, **loadJSON()**, **loadFont()**, etc.

Also for addon libraries which internally register their own loading functions into the p5js such as [**loadSound()**](https://p5js.org/reference/#/p5/loadSound) from the p5.sound library.

Anything else **preload()** won’t await for them to get fully finished!

> [@Master\_Kneater](#):
>
> Is there a way to execute the exact `deviceList[1].id` only once it exists?

Yes, many ways! But IMO the easiest approach would be to postpone the automatically initialization of the p5js library until your callback **getDevices()** has finished its job.

When p5js library is loaded it searches for callbacks **setup()** & **draw()** in the browser’s global context.

So the trick to cancel that is to hide both **setup()** & **draw()** until all your unregistered loadings have been finished.

In order to hide both **setup()** & **draw()** we’ll have to slightly modify their function declaration so they won’t automatically go into the global context:

Instead of `function setup() {}` go w/ `const setup = function () {};`.

Same for `function draw() {}`. Just replace it w/ `const draw = function () {};`.

Let’s now create a function which will manually start the p5js library:

```auto
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
}

```

Invoke **startP5()** at the end of **getDevices()** callback after its _devices[]_ loop:

And of course move your _navigator_ loading stuff out of callback **preload()**, b/c it won’t be automatically called back until p5js is manually started. 😉

P.S.: You won’t be able to access anything from the [p5js API](https://p5js.org/reference/) until after you invoke **startP5()**. ⚠

---

<div class="post-metadata">

**Author:** ![Master\_Kneater](https://avatars.discourse-cdn.com/v4/letter/m/34f0e0/32.png) [@Master\_Kneater](https://discourse.processing.org/u/Master_Kneater)\
**Post date:** [January 28, 2022, 1:32pm UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/7 "2022-01-28T13:32:53Z")

</div>

It works! Thanks a lot! That was definitely a huge help to me. I thought I post here again the completed code. Maybe it is useful for someone else 🙂

```auto
var deviceList = [];

navigator.mediaDevices.enumerateDevices().then(getDevices);

const setup = function () {
    
    var constraints = {
        video: {
            deviceId: {
                exact: deviceList[0].id
      },
    }
  };
    var constraints1 = {
        video: {
            deviceId: {
                exact: deviceList[1].id
      },
    }
  };
canvas = createCanvas(width, height);
background(255);
video = createCapture(constraints);
    video2 = createCapture(constraints1);
console.log(deviceList);
};

const draw = function () {
    
};

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

function getDevices(devices) {

  //arrayCopy(devices, deviceList);
  for (let i = 0; i < devices.length; ++i) {
    let deviceInfo = devices[i];
    
      //Only get videodevices and push them into deviceList
      if (deviceInfo.kind == 'videoinput') {
        deviceList.push({
        label: deviceInfo.label,
        id: deviceInfo.deviceId
      });
// console.log("Device name :", devices[i].label);
// console.log("DeviceID :", devices[i].deviceId);
    }
  }
    startP5();
}

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 28, 2022, 2:12pm UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/8 "2022-01-28T14:12:49Z")

</div>

Would you mind posting code that will run in Processing IDE? I tried the code that you posted in SO, but it will not run in Safari on my system. I see the error msg below. Also there was a suggestion that new p5 have parentheses, new p5(). Thanks.

![err](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/458f5fe8abc6d0a3f337cf6c725aea4a80b88740.png)

---

<div class="post-metadata">

**Author:** ![Master\_Kneater](https://avatars.discourse-cdn.com/v4/letter/m/34f0e0/32.png) [@Master\_Kneater](https://discourse.processing.org/u/Master_Kneater)\
**Post date:** [January 28, 2022, 2:15pm UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/9 "2022-01-28T14:15:16Z")

</div>

> [@GoToLoop](#):
>
> _deviceList[]_ will be fully filled

For me the code works only in Firefox. In Chrome I get the same error. If you have only one camera you have to change deviceList[1].id to deviceList[0].id as well.

comment: But I have already been able to solve the problem using GoToLoops procedure. The answer I have also already posted, but must be released by a forum admin for the thread.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 28, 2022, 2:41pm UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/10 "2022-01-28T14:41:34Z")

</div>

I just tried the SO code in p5.js web editor with Chrome and it runs without error. I have two cameras connected to my Mac and it flicked both of them on at startup. Right now my conclusion is that it won’t run in Safari. Other possibility is Processing IDE, but supposedly it turns everything over to the browser when running p5.js.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 28, 2022, 2:50pm UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/11 "2022-01-28T14:50:51Z")

</div>

> [@Master\_Kneater](#):
>
> If you have only one camera you have to change `deviceList[1].id` to `deviceList[0].id`…

If you need to pick the last device found you can do this instead:  
`exact: deviceList[deviceList.length - 1].id`

If you’ve got a more updated browser you can shorten it using method **at()**:  
`exact: deviceList.at(-1).id`

> **[Array.prototype.at() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at)**
>
> The at() method of Array instances takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.

Another option is picking a random device:  
`exact: random(deviceList).id`

- [reference | p5.js](http://p5js.org/reference/#/p5/random)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 28, 2022, 8:20pm UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/12 "2022-01-28T20:20:52Z")

</div>

Please don’t take this personally, but I respectfully disagree with your assessment that preload() should not be used for this problem. My assessment is that it is more a function of which browser plays nice with navigator.mediaDevices.enumerateDevices() and which ones do not. As long as the poster is happy that’s really all that counts for this thread. But for the sake of finding the truth, I think there is more to it than has been stated here. Please consider that the following code also runs without error in a Chrome browser running p5.js web editor. Both cameras on my system (Mac) are turned on simultaneously. Note that the demo uses preload() and does not try to hide setup() and draw().

```auto
var deviceList = [];

function preload(){  
  navigator.mediaDevices.enumerateDevices().then(getDevices);
}

function setup() {
 var constraints = {
  video: {
  deviceId: {
    exact: deviceList[0].id
    },
   }
 };
 var constraints1 = {
  video: {
  deviceId: {
   exact: deviceList[1].id
  },
  }
 };
 canvas = createCanvas(width, height);
 background(255);
 video = createCapture(constraints);
 video2 = createCapture(constraints1);
 console.log(deviceList);
}

function draw () {
}

function getDevices(devices) {
  for (let i = 0; i < devices.length; ++i) {
    let deviceInfo = devices[i];
    //Only get videodevices and push them into deviceList
    if (deviceInfo.kind == 'videoinput') {
      deviceList.push( {
      label: deviceInfo.label,
        id: deviceInfo.deviceId
      }
      );
    }
  }
}

```

**Things aren’t what they seem.**

I have repeatedly tested the above code by opening and closing the browser and p5.js web editor multiple times in succession. I concede that sometimes preload() fails. Sometimes it works ok, sometimes it fails to load the array even though it gets to the end of the getDevices() function before going to setup(). I have not tested the other technique as rigorously which I intend to do.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 28, 2022, 9:30pm UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/13 "2022-01-28T21:30:16Z")

</div>

> [@svan](#):
>
> … disagree with your assessment that **preload()** should not be used for this problem.

You don’t have to believe me! Just check w/ your own eyes what are the functions registered to work w/ **preload()** callback by default straight from p5js’ source code: 👀

> <https://github.com/processing/p5.js/blob/v1.4.0/src/core/main.js#L716-L728>

There are only 9 p5js loading functions which cause **preload()** to await their full completion by default.

Anything else gotta precall **registerPreloadMethod()** so **preload()** knows how to await for them as well.

Just placing some unregistered stuff inside callback **preload()** won’t magically make it work!

> [@svan](#):
>
> Please consider that the following code also runs without error in a Chrome browser running p5.js web editor.

The p5.js web editor got lotsa other stuff running behind-the-scene.

It’s more or less expected for the p5js library and its callbacks to run much later on such environments.

In order for the sketch to work the callback **getDevices()** must run before p5js **setup()** is called back.

Otherwise the array _deviceList[]_ will still be empty when the code reaches **setup()**.

Leaving the sketch on a state which depends on how fast a callback is invoked before the other is unacceptable IMO. 🙅‍♂️

Such code is clearly buggy! 🐛

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 28, 2022, 10:14pm UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/14 "2022-01-28T22:14:52Z")

</div>

> [@GoToLoop](#):
>
> Such code is clearly buggy!

Well, since you put it that way, you win!

If it were only a matter of waiting long enough for the deviceList array to fill, then what’s your explanation for why the code using your method won’t run in Processing IDE (4.02b) with a Safari browser (Mac)? Error message below is for two connected cameras:

 ![Safari error](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4d3db2f2f5cf30ce726fba823ee6d17efeb13d14.png)

You may not have the hardware to test this yourself, but this is why I think there’s more to it than meets the eye. If you are unable to test it, I would appreciate someone else testing it for confirmation. Thanks.

preload() should be renamed preloadForCertainThings() IMO.

**Processing IDE with Safari Browser Code to Test (Mac) - Two Cameras**

```auto
var deviceList = [];

navigator.mediaDevices.enumerateDevices().then(getDevices);

const setup = function () {
 var constraints = {
  video: {
  deviceId: {
    exact: deviceList[0].id
    },
   }
 };
 var constraints1 = {
  video: {
  deviceId: {
   exact: deviceList[1].id
  },
  }
 };
 canvas = createCanvas(width, height);
 background(255);
 video = createCapture(constraints);
 video2 = createCapture(constraints1);
 console.log(deviceList);
};

const draw = function () {
};

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

function getDevices(devices) {
  for (let i = 0; i < devices.length; ++i) {
    let deviceInfo = devices[i];
    //Only get videodevices and push them into deviceList
    if (deviceInfo.kind == 'videoinput') {
      deviceList.push( {
      label: deviceInfo.label,
        id: deviceInfo.deviceId
      }
      );
         console.log("Device name :", devices[i].label);
         console.log("DeviceID :", devices[i].deviceId);
    }
  }
  startP5();
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 28, 2022, 11:55pm UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/15 "2022-01-28T23:55:52Z")

</div>

> [@svan](#):
>
> You may not have the hardware to test this yourself,

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:

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

```

## sketch.js:

```auto
/**
 * 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));
};

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 29, 2022, 2:48am UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/16 "2022-01-29T02:48:22Z")

</div>

Interesting demo. The good news is that it does run in Processing IDE with Safari browser on a Mac, which is pretty good since you had no way to test it. The bad news is that you used another method of finding the devices and only opened one of my two cameras, unlike the original demo. The code also placed a multi-color background, flashing canvas on top of the video feed. You could set the canvas to size 0,0 and forget the background changes and it would improve the demo in my opinion. Since you used a new technique of finding the devices and the code ran in Processing IDE I will use this as further evidence that there is a problem using _navigator.mediaDevices.enumerateDevices()_ in Safari until someone proves otherwise.

There were many warnings and one error which you might be interested in knowing.

Use the function form of “use strict”.  
‘console’ is not defined.  
Expected ‘{’ and instead saw ‘if’.  
Expected ‘{’ and instead saw ‘videoDevicesFound’.  
Expected ‘{’ and instead saw ‘constraints’.  
‘createCapture’ is not defined.  
‘globalThis’ is not defined.  
‘p5’ is not defined.  
‘createCanvas’ is not defined.

 ![error](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0f6da2653c51baa03e4e14d6cd6b3093b6bdf694.png)

In spite of all these warnings it still ran.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 29, 2022, 3:34am UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/17 "2022-01-29T03:34:49Z")

</div>

> [@svan](#):
>
> The code also placed a multi-color background, flashing canvas on top of the video feed.

B/c **draw()** had nothing on it I’ve added **background()** just so I knew the sketch was running in my PC.

Of course you can delete it, comment that out or replace it w/ something else.

> [@svan](#):
>
> The good news is that it does run in Processing IDE with Safari browser on a Mac,

You should also try out other browsers and/or environments such as [My Sketch - OpenProcessing](http://OpenProcessing.org/sketch/create).

“p5.js mode” isn’t always up-to-date w/ latest p5js library version (currently at v1.4.0).

> [@svan](#):
>
> Since you used a new technique of finding the devices…

It’s pretty much the same approach as yours.

I’ve only added property _groupId_ in addition to _deviceId_ when creating the _constraints{}_ object for **createCapture()** within **createCaptures()**.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 29, 2022, 4:01am UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/18 "2022-01-29T04:01:11Z")

</div>

> [@svan](#):
>
> … and only opened one of my two cameras, unlike the original demo.

I really don’t get why your original demo would get your both cameras and mine couldn’t. 😕

The most notable difference is that b/c you have **enumerateDevices()** inside the **preload()** callback, the whole thing starts much later in comparison to my demo, which invokes it ASAP. 🏃‍♂️

Maybe if I change my demo to also call **enumerateDevices()** much later, after the whole page and its resources have been fully loaded, I wonder if I could get the same success result as yours on the Safari browser? 🤔

So instead of straight invoking my **getAvailableVideoDevices()**, I’d register it as a load event callback:  
`addEventListener('load', getAvailableVideoDevices);`

> **[Window: load event - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event)**
>
> The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images.
> This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without...

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 29, 2022, 5:33am UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/19 "2022-01-29T05:33:32Z")

</div>

> I really don’t get why your original demo would get your both cameras and mine couldn’t.

I think your method is only getting one video input and the field strings are empty. Just like **navigator.mediaDevices.enumerateDevices()** except your version goes ahead and opens the camera, while the original technique just turned on the camera’s little green light but did not capture the image. Here’s the array from function collectAvailableVideoDevices(): I used console.log() instead of console.table()

 ![v2_err](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c4fd2cd9c951bed3f05856dfbf870b4dc90f9eab.png)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 29, 2022, 7:02am UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867/20 "2022-01-29T07:02:59Z")

</div>

W/ both properties _deviceId_ & _groupId_ having an empty string there’s no way to pick a specific camera using that approach.

My code will end up getting the default camera instead.

Besides empty strings you get a “Failed to load resource” error, perhaps outta **enumerateDevices()**.

Seems like your Safari browser is refusing to reveal your available devices’ detailed info.

[Next page](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867.md?page=2)