Please help, trying to setup BodyPix library from ml5.js, couldn't resolve this TypeError issue, learning and following tutorial here. Thank you.

Reference Material: Dan shiffman Tutorial (https://www.youtube.com/watch?v=jKHgVdyC55M) Official Sketch Example (https://github.com/ml5js/ml5-library/blob/main/examples/p5js/BodyPix/BodyPix_Webcam_Parts/sketch.js)

let video;
let poseNet;
let pose;
let skeleton;

let bodyPix;
let segmentedImage;

function setup() {
    createCanvas(640, 480);
    background(255);
    video = createCapture(VIDEO, videoReady);
    video.size(640, 480);
    video.hide();

    segmentedImage = createImage(640, 480);

    poseNet = ml5.poseNet(video, modelLoaded);
    poseNet.on('pose', gotPoses);
}


function videoReady() {
    console.log('video ready');
    bodyPix = ml5.bodyPix(video, modelReady);
}

function modelReady() {
    console.log('bodypix ready');
    bodyPix.segmentWithParts(gotResult);
}

function gotResult(error, result) {

    if (error) {
        console.log(error);
        return;
    }

    console.log(result);

    segmentedImage = result.partMask; //set result here, default: result.image
    bodyPix.segmentWithParts(gotResult);
}


function modelLoaded() {
    console.log('poseNet ready');
}

function gotPoses(poses) {
    //console.log(poses);

    if (poses.length > 0) {
        pose = poses[0].pose; //could add in confidence filter here.
        skeleton = poses[0].skeleton;
    }
}

function draw() {
    background(255);
    // image(video, 0, 0);

    // if (pose) {
    //  let eyeR = pose.rightEye;
    //  let eyeL = pose.leftEye;
    //  let d = dist(eyeR.x, eyeR.y, eyeL.x, eyeL.y);

    //  noStroke();
    //  fill(0);
    //  ellipse(pose.nose.x, pose.nose.y, d/2);

    //  if(pose.rightWrist.x < 640 && pose.rightWrist.y < 480) {
    //      fill(0, 0, 255);
    //      ellipse(pose.rightWrist.x, pose.rightWrist.y, 20);
    //  }

    //  if(pose.leftWrist.x < 640 && pose.leftWrist.y < 480) {
    //      fill(0, 0, 255);
    //      ellipse(pose.leftWrist.x, pose.leftWrist.y, 20);
    //  }

    //  for (let i = 0; i < pose.keypoints.length; i++) {
    //      let x = pose.keypoints[i].position.x;
    //      let y = pose.keypoints[i].position.y;
    //      fill(255);
    //      if(x < 640 && y < 480) {
    //          ellipse(x, y, 12);
    //      }
    //  }

    //  for (let i = 0; i < skeleton.length; i++) {
    //      let a = skeleton[i][0];
    //      let b = skeleton[i][1];
    //      stroke(255);
    //      strokeWeight(2);
    //      line(a.position.x, a.position.y, b.position.x, b.position.y);
    //  }
    // } //end if statement

    image(segmentedImage, 0, 0);

} //end drawLoop
0

There are 0 best solutions below