đģVanilla HTML & JS example
How to use PoseTracker in a vanilla html page ?
Base on the schema on the schema. You need to call our URL https://app.posetracker.com/pose_tracker/pixel through an iframe.
Base on this here is a tutorial to use PoseTracker in a web app :
Create an HTML file
touch test.htmlIntegrate 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>Last updated