Untitled

<!DOCTYPE html>
<html lang="en">

<head>
  <title>poseNet</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- p5 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
  <!-- ml5 -->
  <script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>
</head>
<style>
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
  }
</style>

<body>
  <script>
    let video;
    let poseNet;
    let pose;
    let skeleton;

    function setup() {
      createCanvas(640, 480);
      video = createCapture(VIDEO);
      video.hide();
      poseNet = ml5.poseNet(video, modelLoaded);
      poseNet.on('pose', gotPoses);
    }

    const gotPoses = poses => {
      if (poses.length > 0) {
        pose = poses[0].pose;
        skeleton = poses[0].skeleton;
      }
    }

    const modelLoaded = () => {
      console.log('poseNet ready')
    }

    function draw() {
      image(video, 0, 0);

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

        for (let j = 0; j < skeleton.length; j++) {
          let a = skeleton[j][0];
          let b = skeleton[j][1];
          strokeWeight(2);
          stroke(255);
          line(a.position.x, a.position.y, b.position.x, b.position.y);
        }
      }
    }
  </script>
</body>
</html>