Spaces:
Sleeping
Sleeping
File size: 4,680 Bytes
c660adf 77b3303 c660adf 77b3303 c660adf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
document.addEventListener('DOMContentLoaded', () => {
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const capturedImage = document.getElementById('capturedImage');
const cameraBtn = document.getElementById('cameraBtn');
const frontCam = document.getElementById('frontCam');
const backCam = document.getElementById('backCam');
const captureBtn = document.getElementById('captureBtn');
const retakeBtn = document.getElementById('retakeBtn');
const uploadBtn = document.getElementById('uploadBtn');
const cameraControls = document.getElementById('cameraControls');
const postCapture = document.getElementById('postCapture');
let stream = null;
cameraBtn.addEventListener('click', async () => {
try {
stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } });
video.srcObject = stream;
video.classList.remove('hidden');
cameraBtn.classList.add('hidden');
cameraControls.classList.remove('hidden');
} catch (err) {
alert('Error accessing camera: ' + err.message);
}
});
frontCam.addEventListener('click', async () => {
if (stream) {
stream.getTracks().forEach(track => track.stop());
}
try {
stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } });
video.srcObject = stream;
fetch('/switch_camera', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ camera_type: 'user' })
});
} catch (err) {
alert('Error switching to front camera: ' + err.message);
}
});
backCam.addEventListener('click', async () => {
if (stream) {
stream.getTracks().forEach(track => track.stop());
}
try {
stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
video.srcObject = stream;
fetch('/switch_camera', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ camera_type: 'environment' })
});
} catch (err) {
alert('Error switching to back camera: ' + err.message);
}
});
captureBtn.addEventListener('click', () => {
const context = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
canvas.toBlob(blob => {
const formData = new FormData();
formData.append('image', blob, 'captured.jpg');
fetch('/capture', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.status === 'captured') {
video.classList.add('hidden');
capturedImage.src = '/uploads/captured.jpg?' + new Date().getTime();
capturedImage.classList.remove('hidden');
cameraControls.classList.add('hidden');
postCapture.classList.remove('hidden');
if (stream) {
stream.getTracks().forEach(track => track.stop());
}
} else {
alert(data.message);
}
});
}, 'image/jpeg');
});
retakeBtn.addEventListener('click', () => {
fetch('/retake', { method: 'POST' })
.then(response => response.json())
.then(data => {
if (data.status === 'retake') {
capturedImage.classList.add('hidden');
video.classList.remove('hidden');
cameraControls.classList.remove('hidden');
postCapture.classList.add('hidden');
cameraBtn.click();
}
});
});
uploadBtn.addEventListener('click', () => {
fetch('/upload', { method: 'POST' })
.then(response => response.json())
.then(data => {
if (data.status === 'uploaded') {
alert('Image uploaded to Instagram!');
capturedImage.classList.add('hidden');
cameraBtn.classList.remove('hidden');
postCapture.classList.add('hidden');
} else {
alert('Error uploading: ' + data.message);
}
});
});
}); |