Create app.js

app.js

@@ -0,0 +1,71 @@
+// Access the video and canvas elements
+const video = document.getElementById('video');
+const canvas = document.getElementById('outputCanvas');
+const ctx = canvas.getContext('2d');
+const status = document.getElementById('status');
+
+// Initialize the hand pose detection model
+async function setupHandPoseDetection() {
+  try {
+    // Load the hand pose detection model
+    const model = handPoseDetection.SupportedModels.MediaPipeHands;
+    const detectorConfig = {
+      runtime: 'tfjs', // Use TensorFlow.js runtime
+      modelType: 'full' // Choose between 'lite' or 'full'
+    };
+    const detector = await handPoseDetection.createDetector(model, detectorConfig);
+
+    status.textContent = 'Model loaded!';
+
+    // Start video stream
+    await setupCamera();
+
+    // Detect hands in real-time
+    detectHands(detector);
+  } catch (error) {
+    console.error('Error loading the model:', error);
+    status.textContent = 'Failed to load model.';
+  }
+}
+
+// Set up the camera feed
+async function setupCamera() {
+  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+  video.srcObject = stream;
+  return new Promise((resolve) => {
+    video.onloadedmetadata = () => {
+      resolve(video);
+    };
+  });
+}
+
+// Detect hands and draw keypoints
+async function detectHands(detector) {
+  if (video.readyState === video.HAVE_ENOUGH_DATA) {
+    // Clear the canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Detect hands in the video frame
+    const hands = await detector.estimateHands(video);
+
+    // Draw keypoints on the canvas
+    if (hands.length > 0) {
+      hands.forEach((hand) => {
+        const keypoints = hand.keypoints;
+        keypoints.forEach((keypoint) => {
+          const { x, y } = keypoint;
+          ctx.beginPath();
+          ctx.arc(x, y, 5, 0, 2 * Math.PI); // Draw a circle at each keypoint
+          ctx.fillStyle = 'red';
+          ctx.fill();
+        });
+      });
+    }
+  }
+
+  // Repeat detection
+  requestAnimationFrame(() => detectHands(detector));
+}
+
+// Initialize the application
+setupHandPoseDetection();