84 lines
2.2 KiB
JavaScript
84 lines
2.2 KiB
JavaScript
const video = document.getElementById('video');
|
|
const previewImg = document.getElementById('preview-img');
|
|
const canvas = document.getElementById('canvas');
|
|
const cameraStatus = document.getElementById('camera-status');
|
|
const studentNumberInput = document.getElementById('student-number');
|
|
const inputError = document.getElementById('input-error');
|
|
const captureBtn = document.getElementById('capture-btn');
|
|
const downloadLink = document.getElementById('download-link');
|
|
|
|
let captured = false;
|
|
|
|
async function startCamera() {
|
|
try {
|
|
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
|
|
video.srcObject = stream;
|
|
cameraStatus.classList.add('hidden');
|
|
captureBtn.disabled = false;
|
|
} catch (err) {
|
|
cameraStatus.textContent = 'Unable to access camera: ' + err.message;
|
|
}
|
|
}
|
|
|
|
function sanitizeFilename(name) {
|
|
return name.trim().replace(/[^a-z0-9_-]+/gi, '_');
|
|
}
|
|
|
|
function showLiveView() {
|
|
previewImg.classList.add('hidden');
|
|
video.classList.remove('hidden');
|
|
downloadLink.classList.add('hidden');
|
|
captureBtn.textContent = 'Capture Photo';
|
|
captured = false;
|
|
}
|
|
|
|
function showCapturedView() {
|
|
video.classList.add('hidden');
|
|
previewImg.classList.remove('hidden');
|
|
captureBtn.textContent = 'Retake Photo';
|
|
captured = true;
|
|
}
|
|
|
|
function capturePhoto() {
|
|
if (captured) {
|
|
showLiveView();
|
|
return;
|
|
}
|
|
|
|
const studentNumber = studentNumberInput.value.trim();
|
|
if (!studentNumber) {
|
|
inputError.classList.remove('hidden');
|
|
studentNumberInput.focus();
|
|
return;
|
|
}
|
|
inputError.classList.add('hidden');
|
|
|
|
canvas.width = video.videoWidth;
|
|
canvas.height = video.videoHeight;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
|
|
const dataUrl = canvas.toDataURL('image/png');
|
|
const filename = `${sanitizeFilename(studentNumber)}.png`;
|
|
|
|
previewImg.src = dataUrl;
|
|
downloadLink.href = dataUrl;
|
|
downloadLink.download = filename;
|
|
downloadLink.classList.remove('hidden');
|
|
|
|
showCapturedView();
|
|
|
|
downloadLink.click();
|
|
}
|
|
|
|
captureBtn.addEventListener('click', capturePhoto);
|
|
|
|
studentNumberInput.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
capturePhoto();
|
|
}
|
|
});
|
|
|
|
startCamera();
|