Create static/js/camera.js

static/js/camera.js

@@ -0,0 +1,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);
+                }
+            });
+    });
+});