<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Debug</title>
  </head>
  <body>
    <video autoplay="true" id="videoStream"></video>
    <button id="webcamButton">Enable Webcam</button>
    
    <!-- Require the peer dependencies of pose-detection. -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>

    <!-- You must explicitly require a TF.js backend if you're not using the TF.js union bundle. -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
  </body>
</html>
const video = document.getElementById('videoStream');
const model = poseDetection.SupportedModels.BlazePose;
const detectorConfig = {
  runtime: 'tfjs',
  enableSmoothing: true,
  modelType: 'full'
};
const estimationConfig = {flipHorizontal: true};
let detector = undefined;

// 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) {
  if (!detector) {
    console.log('Wait! Model not loaded yet.')
    return;
  }
    
  // getUsermedia parameters.
  const constraints = {
    video: true
  };

  // Activate the webcam stream.
  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    video.srcObject = stream;
    video.addEventListener('loadeddata', predictWebcam);
  });
}

async function init() {
   detector = await poseDetection.createDetector(model, detectorConfig);
}

function detect() {

}

async function predictWebcam() {
  video.width = video.videoWidth;
  video.height = video.videoHeight;
  const timestamp = performance.now();
  const poses = await detector.estimatePoses(video, estimationConfig, timestamp);
  console.log(poses.length);
  window.requestAnimationFrame(predictWebcam);
}

// 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');
}
init();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.