<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video id="video" autoplay></video>
<canvas id="canvas" style="display:none;"></canvas>
<button onclick="takePhoto()">Take Photo</button>

<script>
  const video = document.getElementById('video');

  // Request camera access
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => video.srcObject = stream)
    .catch(err => console.error("Camera access denied", err));

  function takePhoto() {
    const canvas = document.getElementById('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    // Draw current frame
    const context = canvas.getContext('2d');
    context.drawImage(video, 0, 0);

    // Convert to base64 or Blob
    canvas.toBlob(blob => {
      // Upload blob to server
      const formData = new FormData();
      formData.append("photo", blob, "photo.jpg");

      fetch("https://your-upload-url.com/upload", {
        method: "POST",
        body: formData
      }).then(res => console.log("Uploaded"))
        .catch(err => console.error("Upload failed", err));
    }, "image/jpeg");
  }
</script>
</body>
</html>


