Vanilla HTML & JS example

How to use PoseTracker in a vanilla html page ?

PreviousReact Native example with react-native-vision-camera NextMore to come...

Last updated 8 months ago

Vanilla HTML & JS example

How to use PoseTracker in a vanilla html page ?

Base on the schema on. You need to call our URL through an iframe.

Base on this here is a tutorial to use PoseTracker in a web app :

Create an HTML file

touch test.html

Integrate PoseTracker

Copy/past this in your test.html and modify your API_KEY :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PoseTracker Example</title>
    <style>
        #container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            margin: 20px;
            position: relative;
        }

        #videoContainer {
            position: relative;
            width: 100%;
            max-width: 640px;
        }

        video, canvas {
            width: 100%;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
        }

        #resultsContainer {
            flex: 1;
            min-width: 300px;
            margin: 10px;
            border: 1px solid #ddd;
            padding: 10px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="videoContainer">
        <video id="webcam" autoplay playsinline></video>
        <canvas id="canvasOverlay"></canvas>
    </div>
    <div id="resultsContainer">
        <h3>Pose Tracking Results</h3>
        <pre id="results">Waiting for data...</pre>
    </div>
</div>

<!-- Pixel Tracking replace YOUR_API_TOKEN -->
<iframe id="pixelPoseTracker" src="https://app.posetracker.com/pose_tracker/pixel?token=YOUR_API_TOKEN&exercise=squat" style="display:none;" width="0" height="0"></iframe>

<script>
  const videoElement = document.getElementById('webcam');
  const canvasOverlay = document.getElementById('canvasOverlay');
  const ctxOverlay = canvasOverlay.getContext('2d');
  const resultsElement = document.getElementById('results');
  const iframe = document.getElementById('pixelPoseTracker');

  // Access the webcam
  navigator.mediaDevices.getUserMedia({
    video: true
  }).then(stream => {
    videoElement.srcObject = stream;

    videoElement.addEventListener('loadeddata', () => {
      // Match the canvas size to the video size
      canvasOverlay.width = videoElement.videoWidth;
      canvasOverlay.height = videoElement.videoHeight;

      // Capture frames from the video and send to the Pixel iframe
      setInterval(() => {
        sendFrameToPixel();
      }, 100); // Adjust interval as needed
    });
  }).catch(error => {
    console.error('Error accessing webcam:', error);
  });

  function sendFrameToPixel() {
    const canvas = document.createElement('canvas');
    canvas.width = videoElement.videoWidth;
    canvas.height = videoElement.videoHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
    const dataURL = canvas.toDataURL('image/jpeg');

    iframe.contentWindow.postMessage({
      type: 'posetracker_image',
      image: dataURL
    }, '*');
  }

  // Listen to messages from the Pixel iframe
  window.addEventListener('message', (event) => {
    if (event.origin !== "https://app.posetracker.com") return;
    const data = JSON.parse(event.data);

    if (data.type === 'keypoints') {
      drawKeypoints(data.data.keypoints);
      updateResults(data);
    }
  });

  function drawKeypoints(keypoints) {
    // Clear the canvas
    ctxOverlay.clearRect(0, 0, canvasOverlay.width, canvasOverlay.height);

    keypoints.forEach(keypoint => {
      if (keypoint.score > 0.5) { // Only draw keypoints with a certain confidence level
        const { x, y } = keypoint;
        ctxOverlay.beginPath();
        ctxOverlay.arc(x, y, 5, 0, 2 * Math.PI); // Draw a circle at each keypoint
        ctxOverlay.fillStyle = 'red';
        ctxOverlay.fill();
      }
    });
  }

  function updateResults(data) {
    resultsElement.textContent = JSON.stringify(data, null, 2);
  }
</script>
</body>
</html>