View Code - 20260920

attendance-enroll.js | 20260920_164915.php Initial Domain Snapshot

// attendance-enroll.js
document.addEventListener('DOMContentLoaded', function(){
  const video = document.getElementById('fc-enroll-video');
  const captureBtn = document.getElementById('fc-enroll-capture');
  const stopBtn = document.getElementById('fc-enroll-stop');
  const samplesWrap = document.getElementById('fc-samples');
  const sendBtn = document.getElementById('fc-send-enroll');
  const resultBox = document.getElementById('fc-enroll-result');
  const employeeSel = document.getElementById('enroll_employee_id');

let stream = null;
  const samples = []; // dataURLs

function log(msg, ok=true){
    resultBox.textContent = msg;
    resultBox.className = ok ? 'notice notice-success' : 'notice notice-error';
  }

async function startCamera(){
    if (stream) return;
    try {
      stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' }, audio:false });
      video.srcObject = stream;
    } catch (e) {
      console.error(e);
      log('Camera not available', false);
    }
  }

function stopCamera(){
    if (!stream) return;
    stream.getTracks().forEach(t=>t.stop());
    stream = null;
    video.srcObject = null;
  }

captureBtn.addEventListener('click', function(){
    if (!stream) { log('Start camera first', false); return; }
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth || 640;
    canvas.height = video.videoHeight || 480;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    const dataUrl = canvas.toDataURL('image/jpeg', 0.85);
    samples.push(dataUrl);
    renderSamples();
  });

stopBtn.addEventListener('click', stopCamera);

sendBtn.addEventListener('click', async function(){
    const eid = employeeSel.value;
    if (!eid) { log('Select employee', false); return; }
    if (samples.length < 2) { log('Capture at least 2 samples (3 recommended)', false); return; }

const payload = {
      employee_id: parseInt(eid),
      device_id: 'web-enroll-' + (navigator.userAgent || '').slice(0,50),
      images: samples
    };

try {
      const res = await fetch('/erp/api/attendance/enroll_face.php', {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body:JSON.stringify(payload)
      });
      const j = await res.json();
      if (j && j.ok) {
        log('Enrollment successful ✔ Template: ' + (j.template_id || ''), true);
        // clear samples
        samples.length = 0;
        renderSamples();
      } else {
        log('Enroll failed: ' + (j.error || j.msg || 'unknown'), false);
      }
    } catch (err) {
      console.error(err);
      log('Network error while enrolling', false);
    }
  });

// start camera automatically
  startCamera();
});