Create static/js/script.js

static/js/script.js

@@ -0,0 +1,98 @@
+let video = document.getElementById('video');
+let canvas = document.getElementById('canvas');
+let captureButton = document.getElementById('capture-btn');
+let switchButton = document.getElementById('switch-btn');
+let retakeButton = document.getElementById('retake-btn');
+let uploadButton = document.getElementById('upload-btn');
+let cameraIcon = document.getElementById('camera-icon');
+let status = document.getElementById('status');
+let stream = null;
+let facingMode = 'environment'; // Default to back camera
+
+// Start camera when clicking the camera icon
+cameraIcon.addEventListener('click', async () => {
+    try {
+        if (stream) {
+            stream.getTracks().forEach(track => track.stop());
+        }
+        stream = await navigator.mediaDevices.getUserMedia({
+            video: { facingMode: facingMode }
+        });
+        video.srcObject = stream;
+        video.style.display = 'block';
+        cameraIcon.style.display = 'none';
+        captureButton.style.display = 'inline-block';
+        switchButton.style.display = 'inline-block';
+        status.textContent = 'Camera started. Click Capture to take a photo.';
+    } catch (err) {
+        status.textContent = 'Error accessing camera: ' + err.message;
+    }
+});
+
+// Capture image
+captureButton.addEventListener('click', () => {
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    canvas.getContext('2d').drawImage(video, 0, 0);
+    video.style.display = 'none';
+    canvas.style.display = 'block';
+    captureButton.style.display = 'none';
+    switchButton.style.display = 'none';
+    retakeButton.style.display = 'inline-block';
+    uploadButton.style.display = 'inline-block';
+    status.textContent = 'Image captured. Choose to retake or upload.';
+});
+
+// Switch camera view
+switchButton.addEventListener('click', async () => {
+    facingMode = facingMode === 'environment' ? 'user' : 'environment';
+    if (stream) {
+        stream.getTracks().forEach(track => track.stop());
+    }
+    try {
+        stream = await navigator.mediaDevices.getUserMedia({
+            video: { facingMode: facingMode }
+        });
+        video.srcObject = stream;
+        status.textContent = `Switched to ${facingMode === 'environment' ? 'back' : 'front'} camera.`;
+    } catch (err) {
+        status.textContent = 'Error switching camera: ' + err.message;
+    }
+});
+
+// Retake photo
+retakeButton.addEventListener('click', () => {
+    canvas.style.display = 'none';
+    video.style.display = 'block';
+    captureButton.style.display = 'inline-block';
+    switchButton.style.display = 'inline-block';
+    retakeButton.style.display = 'none';
+    uploadButton.style.display = 'none';
+    status.textContent = 'Camera restarted. Click Capture to take a new photo.';
+});
+
+// Upload to Instagram
+uploadButton.addEventListener('click', () => {
+    let imageData = canvas.toDataURL('image/jpeg');
+    status.textContent = 'Uploading to Instagram...';
+    fetch('/upload', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: 'image=' + encodeURIComponent(imageData)
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.error) {
+            status.textContent = 'Error: ' + data.error + (data.details ? ' - ' + JSON.stringify(data.details) : '');
+        } else {
+            status.textContent = data.message;
+            canvas.style.display = 'none';
+            retakeButton.style.display = 'none';
+            uploadButton.style.display = 'none';
+            cameraIcon.style.display = 'block';
+        }
+    })
+    .catch(err => {
+        status.textContent = 'Upload failed: ' + err.message;
+    });
+});