JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<video id="video" width="640" height="480" autoplay></video>
<p id="distance">Distance: <span id="distanceValue">Calculating...</span></p>


<button id="startButton">Start Camera</button>

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const video = document.getElementById('video');
  const distanceValue = document.getElementById('distanceValue');

  document.getElementById('startButton').addEventListener('click', () => {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then((stream) => {
          video.srcObject = stream;
          video.play();

        // Set up motion tracking
        let lastX = null;

        video.addEventListener('canplay', () => {
          setInterval(() => {
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.width = video.width;
            canvas.height = video.height;

            context.drawImage(video, 0, 0, canvas.width, canvas.height);

            const imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;

            let sumX = 0;
            let count = 0;

            for (let i = 0; i < imageData.length; i += 4) {
              const brightness = (imageData[i] + imageData[i + 1] + imageData[i + 2]) / 3;
              if (brightness > 100) {
                sumX += i % (canvas.width * 4);
                count++;
              }
            }

            if (count > 0) {
              const averageX = sumX / count;
              if (lastX !== null) {
                const deltaX = Math.abs(averageX - lastX);
                const distance = Math.round(100 / deltaX); // Adjust this scaling factor as needed
                distanceValue.textContent = `${distance} units`; // You can use any appropriate unit here
              }
              lastX = averageX;
            }
          }, 1000); // Adjust the interval as needed
        });
      })
        .catch((error) => {
          console.error('Error accessing camera:', error);
        });
    } else {
      console.error('getUserMedia is not supported on...