// JavaScript for capturing photos and handling user input
const video = document.getElementById('video');
const captureButton = document.getElementById('captureButton');
const numericalValueInput = document.getElementById('numericalValue');
const submitButton = document.getElementById('submitButton');

// Constraints for capturing photos at 1080x1080 resolution
const constraints = {
  video: {
    width: { ideal: 1080 },
    height: { ideal: 1080 }
  }
};

// Access the device's camera with specified constraints
navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {
    video.srcObject = stream;
  })
  .catch(function(err) {
    console.error('Error accessing camera:', err);
  });

// Function to capture photo
captureButton.addEventListener('click', function() {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.width = 1080; // Set canvas width to 1080
  canvas.height = 1080; // Set canvas height to 1080
  context.drawImage(video, 0, 0, canvas.width, canvas.height);

  // Convert canvas to base64 encoded image
  const photoData = canvas.toDataURL('image/jpeg');

  // Display captured photo (optional)
  const photoPreview = document.createElement('img');
  photoPreview.src = photoData;
  document.body.appendChild(photoPreview);

  // Optionally, you can save the base64 encoded image to a server
  // Send photoData to server using AJAX or fetch API
});

// Function to handle form submission
submitButton.addEventListener('click', function() {
  const numericalValue = numericalValueInput.value;
  // Send numericalValue to server or perform other actions
  console.log('Numerical value:', numericalValue);
});