TypeError: Cannot read property 'height' of undefined with Facemesh

[fourcolors]

Dear ml5 community,

I'm submitting a new issue. Please see the details below.

→ Step 1: Describe the issue 📝

Did you find a bug? Want to suggest an idea for feature?

Hey, When using facemesh, I'm running into this issues where I get an TypeError: Cannot read property 'height' of undefined error.

I have something that looks like this videoRef.current.requestVideoFrameCallback(predictAndUpdateCanvas); and I'm calling facemesh like this inside of the predictAndUpdateCanvas facemesh.predict(videoRef.current, predictions => {})

After the error is thrown, it seems to work fine with predictions. It's just the first load for some reason. I've check and all of my video and canvas elements have heights.

→ Step 2: Screenshots or Relevant Documentation 🖼

Here's some helpful screenshots and/or documentation of the new feature

→ Step 3: Share an example of the issue 🦄

Here's some example code or a demonstration of my feature in this issue, separate GitHub repo, or in the https://editor.p5js.org or codepen/jsfiddle/Glitch/etc...

Other relevant information, if applicable

→ Describe your setup 🦄

Here's some helpful information about my setup...

• Web browser & version:
• Operating System:
• ml5 version you're using:
• Any additional notes

[fourcolors]

Ok, I want to give a little more context. From playing around this this more, I've found that, if you try to initialize facemesh without an HTMLVideo element like the docs say you can, you'll get this height error. I personally keep my rendering in sync with the video so want to call facemesh.predict() directly instead of using the facemesh.on('predict', ...) method.

It seems like the on handler works best with P5js however I'm using React with no P5 integration so I'm able to keep my video in sync better calling .predict directly (using requestVideoFrameCallback)

This looks like a legit bug to me. I'm guessing something in the lib is checking for .height on the video element when initialized, even if you're just passing in a callback, not a video element.

For now, there isn't a way to suppress this error but it would be nice to in the future.

[joeyklee]

Many thanks to @lindapaiste for her awesome work! 🥇