Create static/js/script.js

static/js/script.js

@@ -0,0 +1,73 @@
+$(document).ready(function() {
+    const video = document.getElementById('videoElement');
+    const canvas = document.getElementById('canvas');
+    const capturedImage = document.getElementById('capturedImage');
+    const hfResult = document.getElementById('hfResult');
+    const cameraSelect = document.getElementById('cameraSelect');
+    let stream = null;
+
+    // Open camera
+    $('#openCamera').click(function() {
+        $('#cameraContainer').show();
+        startCamera(cameraSelect.value);
+    });
+
+    // Switch camera
+    cameraSelect.addEventListener('change', function() {
+        if (stream) {
+            stopCamera();
+            startCamera(this.value);
+        }
+    });
+
+    // Capture image
+    $('#captureButton').click(function() {
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        canvas.getContext('2d').drawImage(video, 0, 0);
+        const dataUrl = canvas.toDataURL('image/jpeg');
+
+        // Send to server
+        $.ajax({
+            type: 'POST',
+            url: '/capture',
+            data: { image: dataUrl },
+            success: function(response) {
+                if (response.status === 'success') {
+                    capturedImage.src = response.image_url;
+                    capturedImage.style.display = 'block';
+                    hfResult.textContent = JSON.stringify(response.hf_result, null, 2);
+                    stopCamera();
+                    $('#cameraContainer').hide();
+                } else {
+                    alert('Error: ' + response.message);
+                }
+            },
+            error: function() {
+                alert('Failed to capture image.');
+            }
+        });
+    });
+
+    function startCamera(facingMode) {
+        const constraints = {
+            video: { facingMode: facingMode }
+        };
+        navigator.mediaDevices.getUserMedia(constraints)
+            .then(function(mediaStream) {
+                stream = mediaStream;
+                video.srcObject = stream;
+            })
+            .catch(function(err) {
+                alert('Error accessing camera: ' + err.message);
+            });
+    }
+
+    function stopCamera() {
+        if (stream) {
+            stream.getTracks().forEach(track => track.stop());
+            stream = null;
+            video.srcObject = null;
+        }
+    }
+});