Solution 1 :

Please see our official example code here for using webcam with bodypix (which is very similar to posenet but gives you even more details). The webcam part of the code however would be the same:

CodePen:
https://codepen.io/jasonmayes/pen/QWbNeJd

Or Glitch: https://glitch.com/edit/#!/tensorflow-js-body-segmentation

Essentially the key parts here are:

const video = document.getElementById('webcam');


// Check if webcam access is supported.
function hasGetUserMedia() {
  return !!(navigator.mediaDevices &&
    navigator.mediaDevices.getUserMedia);
}


// Enable the live webcam view and start classification.
function enableCam(event) {
  // getUsermedia parameters.
  const constraints = {
    video: true
  };

  // Activate the webcam stream.
  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    video.addEventListener('loadedmetadata', function() {
      // do something once loaded metadata
    });

    video.srcObject = stream;
    video.addEventListener('loadeddata', function(){
      // Do something once loaded.
    });
  });
}



// If webcam supported, add event listener to button for when user
// wants to activate it.
if (hasGetUserMedia()) {
  const enableWebcamButton = document.getElementById('webcamButton');
  enableWebcamButton.addEventListener('click', enableCam);
} else {
  console.warn('getUserMedia() is not supported by your browser');
}

Problem :

I’ve already tried adding a video tag and then setting the source to the webcam, but this didn’t work. It just produced 404s in the console. Here is the code I tried:

<html>
  <head>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <!-- Load Posenet -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
 </head>

  <body>
    <video autoplay="true" id="videoElement">

    </video>
  </body>
  <script>
    var video = document.querySelector("#videoElement");

    if (navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
    })
}
    var flipHorizontal = false;

    var imageElement = document.getElementById('videoElement');

    posenet.load().then(function(net) {
      const pose = net.estimateSinglePose(imageElement, {
        flipHorizontal: true
      });
      return pose;
    }).then(function(pose){
        var parts = pose["keypoints"];
        console.log(parts[9]);
    })
  </script>
</html>

By

Leave a Reply

Your email address will not be published. Required fields are marked *