Fri. Jan 27th, 2023

[ANSWERED] javascript – Is there a way to use PoseNet with live webcam feed?

By

Nov 20, 2022 html, javascript, tensorflow.js

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

Related Post

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022

[ANSWERED] html – Hidden Div Text Reappears?

Nov 20, 2022

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

Nov 20, 2022

Leave a Reply Cancel reply