static/js/script.js

$(document).ready(function() {
    const video = document.getElementById('videoElement');
    const canvas = document.getElementById('canvas');
    const capturedImage = document.getElementById('capturedImage');
    const cameraSelect = document.getElementById('cameraSelect');
    const actionButtons = document.getElementById('actionButtons');
    let stream = null;
    let currentImageUrl = null;

    // Open camera
    $('#openCamera').click(function() {
        $('#cameraContainer').show();
        actionButtons.style.display = 'none';
        capturedImage.style.display = 'none';
        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';
                    actionButtons.style.display = 'block';
                    currentImageUrl = response.image_url;
                    stopCamera();
                    $('#cameraContainer').hide();
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function() {
                alert('Failed to capture image.');
            }
        });
    });

    // Retake button
    $('#retakeButton').click(function() {
        $('#cameraContainer').show();
        actionButtons.style.display = 'none';
        capturedImage.style.display = 'none';
        startCamera(cameraSelect.value);
    });

    // Upload to Zapier
    $('#uploadButton').click(function() {
        if (!currentImageUrl) {
            alert('No image to upload.');
            return;
        }
        $.ajax({
            type: 'POST',
            url: '/upload_zapier',
            data: { image_url: currentImageUrl },
            success: function(response) {
                if (response.status === 'success') {
                    alert('Image sent to Zapier successfully!');
                    actionButtons.style.display = 'none';
                    capturedImage.style.display = 'none';
                } else {
                    alert('Error sending to Zapier: ' + response.message);
                }
            },
            error: function() {
                alert('Failed to send image to Zapier.');
            }
        });
    });

    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;
        }
    }
});