face-attendance/app/static/js/kiosk.js

const kiosk = document.querySelector(".kiosk-grid");
const video = document.getElementById("cameraStream");
const canvas = document.getElementById("snapshotCanvas");
const preview = document.getElementById("snapshotPreview");
const startButton = document.getElementById("startCamera");
const captureButton = document.getElementById("capturePhoto");
const statusText = document.getElementById("cameraStatus");
const results = document.getElementById("recognitionResults");
const frame = document.querySelector(".camera-frame");

const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");

let activeStream = null;
let lastFaces = [];

startButton.addEventListener("click", async () => {
  try {
    activeStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, audio: false });
    video.srcObject = activeStream;
    frame.classList.remove("has-preview");
    captureButton.disabled = false;
    statusText.textContent = "Camera is active.";
  } catch (error) {
    statusText.textContent = `Camera access failed: ${error.name}`;
  }
});

captureButton.addEventListener("click", async () => {
  if (!video.videoWidth || !video.videoHeight) {
    statusText.textContent = "Camera is not ready yet.";
    return;
  }

  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
  const image = canvas.toDataURL("image/png");
  await identify(image);
});

async function identify(image) {
  setLoading("Identifying faces...");
  const formData = new FormData();
  formData.append("image", image);

  const response = await fetch(kiosk.dataset.identifyUrl, {
    method: "POST",
    body: formData,
    credentials: "same-origin",
    headers: { "X-CSRFToken": csrfToken, "Accept": "application/json" },
  });

  const payload = await response.json();
  if (!response.ok) {
    showError(payload.error || "Recognition failed.");
    return;
  }

  lastFaces = payload.faces;
  preview.src = payload.annotated_image;
  frame.classList.add("has-preview");
  renderFaces(payload.faces);
}

function renderFaces(faces) {
  results.innerHTML = "";
  if (!faces.length) {
    results.innerHTML = '<div class="empty-state">No faces were detected.</div>';
    return;
  }

  faces.forEach((face) => {
    const card = document.createElement("div");
    card.className = "result-card";

    if (!face.matched) {
      card.innerHTML = "<h3>Unknown person</h3><p>No enrolled person matched this face.</p>";
      results.appendChild(card);
      return;
    }

    const confidence = face.confidence === null ? "n/a" : `${Math.round(face.confidence * 100)}%`;
    card.innerHTML = `
      <h3>${escapeHtml(face.full_name)}</h3>
      <p>${escapeHtml(face.employee_id)} · Confidence ${confidence}<br>${escapeHtml(face.last_presence)}</p>
      <div class="result-actions">
        <button class="btn btn-success btn-sm" data-event-type="check_in" data-person-id="${face.person_id}">Check in</button>
        <button class="btn btn-warning btn-sm" data-event-type="check_out" data-person-id="${face.person_id}">Check out</button>
      </div>
      <div class="small text-secondary mt-2" data-status></div>
    `;
    results.appendChild(card);
  });
}

results.addEventListener("click", async (event) => {
  const button = event.target.closest("button[data-event-type]");
  if (!button) {
    return;
  }
  const face = lastFaces.find((item) => item.person_id === Number(button.dataset.personId));
  const status = button.closest(".result-card").querySelector("[data-status]");
  button.disabled = true;
  status.textContent = "Recording attendance...";

  const formData = new FormData();
  formData.append("person_id", button.dataset.personId);
  formData.append("event_type", button.dataset.eventType);
  if (face && face.confidence !== null) {
    formData.append("confidence", face.confidence);
  }

  const response = await fetch(kiosk.dataset.recordUrl, {
    method: "POST",
    body: formData,
    credentials: "same-origin",
    headers: { "X-CSRFToken": csrfToken, "Accept": "application/json" },
  });
  const payload = await response.json();
  button.disabled = false;

  if (!response.ok) {
    status.textContent = "Could not record attendance.";
    return;
  }
  status.textContent = `${payload.event_type} recorded at ${payload.occurred_at}. ${payload.summary}`;
});

function setLoading(message) {
  statusText.textContent = message;
  results.innerHTML = `<div class="empty-state">${escapeHtml(message)}</div>`;
}

function showError(message) {
  statusText.textContent = message;
  results.innerHTML = `<div class="empty-state">${escapeHtml(message)}</div>`;
}

function escapeHtml(value) {
  return String(value)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#039;");
}