Spaces:
Sleeping
Sleeping
File size: 4,293 Bytes
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 |
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', () => {
fetch('/capture', { method: 'POST' })
.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());
}
}
});
});
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);
}
});
});
}); |