index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Controle Refeitório</title>
</head>
<body>
  <h1>Controle Refeitório</h1>
  <video id="video" width="300" height="200" autoplay></video>
  <p id="output">QR Code não escaneado.</p>
  <button id="enviar">Registrar Presença</button>

  <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>
  <script>
    const video = document.getElementById('video');
    const output = document.getElementById('output');
    const enviarButton = document.getElementById('enviar');
    let qrCodeData = null;

    // Acessar a câmera
    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
      .then((stream) => {
        video.srcObject = stream;
        video.play();
        scanQRCode();
      });

    function scanQRCode() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      setInterval(() => {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const code = jsQR(imageData.data, canvas.width, canvas.height);

        if (code) {
          qrCodeData = code.data;
          output.textContent = `QR Code lido: ${qrCodeData}`;
        }
      }, 500);
    }

    enviarButton.addEventListener('click', () => {
      if (!qrCodeData) {
        alert('Escaneie um QR Code antes de enviar.');
        return;
      }

      // Enviar dados ao backend
      fetch('http://127.0.0.1:5000/registrar', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ qrData: qrCodeData }),
      })
        .then(response => response.json())
        .then(data => {
          alert(data.message);
        })
        .catch(error => {
          alert('Erro ao registrar presença.');
          console.error(error);
        });
    });
  </script>
</body>
</html>