107 lines
2.6 KiB
JavaScript
107 lines
2.6 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const video = document.getElementById('webcam');
|
|
const snapshotDiv = document.getElementById('box-camera');
|
|
const flashElement = document.querySelector('.flash');
|
|
|
|
let stream;
|
|
|
|
// Access the webcam
|
|
async function startCameraPhoto() {
|
|
try {
|
|
stream = await navigator.mediaDevices.getUserMedia({
|
|
video: {
|
|
width: { ideal: 896 },
|
|
height: { ideal: 1152 }
|
|
}
|
|
});
|
|
video.srcObject = stream;
|
|
} catch (err) {
|
|
console.error('Error accessing the camera: ', err);
|
|
}
|
|
}
|
|
|
|
async function stopCameraPhoto() {
|
|
stream.getTracks().forEach(track => track.stop());
|
|
video.srcObject = null;
|
|
}
|
|
|
|
function startCapture() {
|
|
startCountdown();
|
|
}
|
|
|
|
function captureImage() {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = video.videoWidth;
|
|
canvas.height = video.videoHeight;
|
|
const context = canvas.getContext('2d');
|
|
|
|
// Apply the horizzontal flip transformation
|
|
context.translate(canvas.width, 0);
|
|
context.scale(-1, 1);
|
|
|
|
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
|
|
// Reset della trasformazione
|
|
context.setTransform(1, 0, 0, 1, 0, 0);
|
|
|
|
let imageDataUrl = canvas.toDataURL('image/png');
|
|
capturedImage = dataURLToFile(imageDataUrl, 'captured-image.png');
|
|
|
|
// Convert the canvas to an image
|
|
const img = new Image();
|
|
img.id = "captured";
|
|
img.src = imageDataUrl;
|
|
img.alt = 'Captured Photo';
|
|
|
|
// Clear previous snapshot and append the new one
|
|
snapshotDiv.innerHTML = '';
|
|
snapshotDiv.appendChild(img);
|
|
|
|
stopCameraPhoto();
|
|
nextPage();
|
|
}
|
|
|
|
// ----- FLASH EFFECT ----- //
|
|
function flashEffect() {
|
|
flashElement.classList.add('active');
|
|
|
|
setTimeout(() => {
|
|
flashElement.classList.remove('active');
|
|
}, 200);
|
|
}
|
|
|
|
// ------- COUNTDOWN TIMER ------- //
|
|
|
|
const numbers = document.querySelectorAll('.number');
|
|
let currentIndex = -1;
|
|
let isRunning = false;
|
|
|
|
function startCountdown() {
|
|
currentIndex = 0;
|
|
showNumber();
|
|
}
|
|
|
|
function showNumber() {
|
|
if (currentIndex >= numbers.length) {
|
|
isRunning = false;
|
|
flashEffect();
|
|
captureImage();
|
|
numbers.forEach(n => {
|
|
n.classList.remove('active')
|
|
n.classList.remove('fade-out')
|
|
});
|
|
return;
|
|
}
|
|
|
|
numbers[currentIndex].classList.add('active');
|
|
|
|
setTimeout(() => {
|
|
numbers[currentIndex].classList.add('fade-out');
|
|
currentIndex++;
|
|
setTimeout(showNumber, 300);
|
|
}, 700);
|
|
}
|
|
|
|
window.startCameraPhoto = startCameraPhoto;
|
|
window.startCapture = startCapture;
|
|
}); |