[p5.js 2.0 Bug Report]: p5 reference error for p5.MediaElement

[lukejans]

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [x] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Build process
• [ ] Unit testing
• [ ] Internationalization
• [ ] Friendly errors
• [ ] Other (specify if possible)

p5.js version

v2.0.3

Web browser and version

Firefox 140.0.4

Operating system

MacOS (Sequioa 15.5)

Steps to reproduce this

Steps:

1. Install p5.js from npm
2. Create the sketch.js file show in the snippet section
3. Run Vite in dev mode to view the page.

Snippet:

import P5 from "p5";

/**
 * @type {P5.MediaElement}
 */
let videoFeed;

window.setup = async function setup() {
    noCanvas();
    videoFeed = createCapture(VIDEO);
    videoFeed.size(90, 90);
};

window.draw = function draw() {
    videoFeed.loadPixels();
};

Errors

fes_core.js:166:9
🌸 p5.js says: 
[p5.js?v=8fb9faf4, line 47924] Cannot read property of undefined. Check the line number in error and make sure the variable which is being operated is not undefined.

 + More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property#what_went_wrong

fes_core.js:566:22
Uncaught TypeError: can't access property "functionName", stacktrace2[(friendlyStack[0].frameIndex - 2)] is undefined
    processStack fes_core.js:566
    fesErrorMonitor fes_core.js:662
    fesCore fes_core.js:946
    registerAddon main-BKN5yFoS.js:1258
    friendlyErrors index.js:16
    <anonymous> app.js:108
[Learn More]
    processStack fes_core.js:566
    fesErrorMonitor fes_core.js:662
    (Async: EventListener.handleEvent)
    fesCore fes_core.js:946
    registerAddon main-BKN5yFoS.js:1258
    friendlyErrors index.js:16
    <anonymous> app.js:108

p5.MediaElement.js:796:5
Uncaught (in promise) ReferenceError: p5 is not defined
    loadPixels p5.MediaElement.js:796
    setup sketch.js:11
    #_setup main-BKN5yFoS.js:1303
    #_start main-BKN5yFoS.js:1277
    _p5 main-BKN5yFoS.js:1241
    _globalInit init.js:82
    promise callback* app.js:118
[Learn More]
    #_start main-BKN5yFoS.js:1277
    AsyncFunctionThrow self-hosted:804
    (Async: async)
    _p5 main-BKN5yFoS.js:1241
    _globalInit init.js:82
    (Async: promise callback)
    <anonymous> app.js:118

Additional Notes

loadPixels() is working on variables with the p5.Image type but does not work for the p5.MediaElement. Something to note is that the language server correctly picks up on most p5 types. For instance when an image is loaded with loadImage() and stored into a variable, it implicitly has a type of p5.Image. However createCapture() is given an implicit type of any, so the videoFeed variable above is also of type any. Additionally when I hover over the import line: import P5 from "p5"; I get the following message:

Could not find a declaration file for module 'p5'. '/Users/lukejans/Code/testing/p5-issue/node_modules/.pnpm/[email protected]/node_modules/p5/dist/app.js' implicitly has an 'any' type.
There are types at '/Users/lukejans/Code/testing/p5-issue/node_modules/p5/types/p5.d.ts', but this result could not be resolved when respecting package.json "exports". The 'p5' library may need to update its package.json or typings. (ts 7016)

So when I explicitly set the type in a JSDoc comment I get a language server hint that P5.MediaElement cannot be resolved.

Potentially Related Code

https://github.com/processing/p5.js/blob/746a481a059152a7755423589a7860f4f1e0dcdc/src/dom/p5.MediaElement.js#L787-L790

[davepagurek]

looks like p5 is not imported in this file where it's used https://github.com/processing/p5.js/blob/dev-2.0/src%2Fdom%2Fp5.MediaElement.js#L789

[pratham-radadiya]

hii, i am interested in this issue. can you please assign me?

[davepagurek]

Thanks @pratham-radadiya!

[adityaapraveen]

@davepagurek if its still not solved, I would be happy to solve it dave!

[akshatajmera7]

@davepagurek If its still not solved could you please assign this issue to me, would be happy to solve

[ksen0]

Hi @pratham-radadiya , are you currently working on this one? Please let us know in the next week or so; no worries if you're not working on it anymore. In that case, we can reassign to the next volunteer. Thanks so much!

[Homaid]

@ksen0 hey I’m interested in working on this. Is this issue still open for contribution if yes can you assign to me

[ksen0]

Hi @Homaid , looks like a few others expressed interest before, sorry. So far, in order, the people who expressed interest are: @pratham-radadiya @adityaapraveen @akshatajmera7 - If none of you comment on this in the next week (by August 12th), then it will go to @Homaid . Thanks for the patience everyone.

[akshatajmera7]

Hwy @ksen0, I'm interested in working on this. If the guys previous to me don't respond. You can allot this to me.

[adityaapraveen]

@ksen0 im active you can assign it to me if no one else in order before me is active

[ksen0]

Ok, going in order - @adityaapraveen you were next in the original volunteer queue, please feel free to take a look. There's a comment in the top of the thread with an idea of how to start, please don't hesitate to reach out with questions or if you find other ideas/solutions!

Thanks for understanding, everyone.

[akshatajmera7]

Hey @ksen0 , if there's another issue further, could you please assign it to me. I'm really interested to gain hands on experience..

[Monkey-d-prince]

hey @davepagurek if this issues isn't fixed yet can you assign this to me i think i can fix this?

[limzykenneth]

The direct reference to p5 in MediaElement class is definitely one issue to resolve however with the original snippet and the intended usage for ESM, it is still not going to work. Imports into ESM is not attached to the global object (window), which means that if the global init process is made to run like this, the final step is for it to invoke new p5() where p5 here references window.p5 and not the imported p5 because of the way scoping works in ESM.

The recommendation is to use instance mode when using ESM, however if you still do want to use global mode with ESM, a possible bypass is to assign the imported p5 to window:

import p5 from 'p5';
window.p5 = p5;

It may be enough for it to work but I don't personally recommend this especially if you are building out a more complex project with additional frontend frameworks.

[ChaitanyaChute]

@ksen0 if this issue is still pending , can you assign it to me.

[Kurapa]

@ksen0 if this issue is still pending, can you assign it to me. I found the bug. I need more information to complete the function properly. the bug is in using load pixels method. the video element does not have load pixels which is causing the error

[sameerkrdev]

@lukejans @davepagurek

@lukejans, I think you are initialising the p5 incorrectly. Here is the corrected code

import P5 from "p5";

/**
 * @type {P5.MediaElement}
 */
let videoFeed;

const sketch = (p5) => {
  p5.setup = () => {
    p5.noCanvas();
    videoFeed = p5.createCapture(p5.VIDEO);
    videoFeed.size(90, 90);
  };

  p5.draw = () => {
    p5.loadPixels();
  };
};

const app = new P5(sketch);

[ayushman1210]

Hi @ksen0 if these issue still pending can you assign it to me

[Shruti2110-coder]

hii if this issue is pending can you assign it to me

[Homaid]

Hey @ksen0 i think it should be me no with the order?

[perminder-17]

Hi @Shruti2110-coder, I noticed your PR: https://github.com/processing/p5.js/pull/8127 As per the contributor guidelines, this issue was originally assigned to @adityaapraveen, so ideally, they should have opened the PR. However, since there has been around two months of inactivity from their side, I’m considering reassigning the issue to someone who’s currently active, following the queue order.

Could someone please confirm if there’s any contributor who commented before @Shruti2110-coder and is still active? If not, I’ll proceed to review @Shruti2110-coder’s PR (by October 8th).

Thanks everyone for your understanding!

[ayushman1210]

Hi @perminder-17 , thanks for raising this clarification.

I had commented on the issue before @Shruti2110-coder and have been active since then. As per the contributor guidelines, priority should go to the earliest active commenter in the queue.

Could you please consider reassigning this issue to me? I’d be happy to work on it and open a PR soon.

Thanks for your understanding!

[Homaid]

Hey @perminder-17 I had commented way before @Shruti2110-coder and @ayushman1210 so I think it should be me by that order

[perminder-17]

Yes, @ayushman1210 and @Shruti2110-coder can help reviewing PR by @Homaid. I'll assign @Homaid, feel free to open up the PR. Thanks everyone for understanding.

[maynkxx]

hii davepagurek if this issue still open i would like to work on it

[ayushman1210]

Hi maintainer @perminder-17 if this issue is still opens please let me know i would like to work on it