added multi webcam functionality

2025-08-27 20:21:38 +02:00
parent 7e4ed56f28
commit f6ef9c39d2
3 changed files with 361 additions and 171 deletions
@@ -28,6 +28,7 @@ document.addEventListener("DOMContentLoaded", function () {
        const webcamVideo = document.getElementById("webcamVideo");
        const captureBtn = document.getElementById("captureBtn");
        const closeWebcamBtn = document.getElementById("closeWebcamBtn");
+        const webcamSelect = document.getElementById("webcamSelect");
        let stream = null;

        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
@@ -41,25 +42,116 @@ document.addEventListener("DOMContentLoaded", function () {
            !webcamArea ||
            !webcamVideo ||
            !captureBtn ||
-            !closeWebcamBtn
+            !closeWebcamBtn ||
+            !webcamSelect
        ) {
-            console.error("Elementi webcam mancanti");
+            console.error("Elementi webcam mancanti", {
+                openWebcamBtn,
+                webcamArea,
+                webcamVideo,
+                captureBtn,
+                closeWebcamBtn,
+                webcamSelect,
+            });
            return;
        }

-        // Apri la webcam
-        openWebcamBtn.addEventListener("click", async () => {
+        // Funzione per avviare la webcam con un deviceId specifico
+        async function startWebcam(deviceId = null) {
            try {
-                stream = await navigator.mediaDevices.getUserMedia({
-                    video: true,
-                });
+                // Ferma il flusso video esistente, se presente
+                if (stream) {
+                    stream.getTracks().forEach((track) => track.stop());
+                    stream = null;
+                    webcamVideo.srcObject = null;
+                }
+
+                // Configura i vincoli per getUserMedia
+                const constraints = {
+                    video: deviceId ? { deviceId: { exact: deviceId } } : true,
+                };
+
+                // Avvia il flusso video
+                stream = await navigator.mediaDevices.getUserMedia(constraints);
                webcamVideo.srcObject = stream;
                webcamArea.style.display = "block";
                openWebcamBtn.style.display = "none";
                dropArea.style.display = "none";
            } catch (error) {
+                console.error("Errore nell'accesso alla webcam:", error);
                alert("Errore nell'accesso alla webcam: " + error.message);
+                webcamArea.style.display = "none";
+                openWebcamBtn.style.display = "block";
+                dropArea.style.display = "block";
            }
+        }
+
+        // Funzione per popolare il dropdown delle webcam
+        async function populateWebcamSelect() {
+            try {
+                // Richiedi i permessi per accedere ai dispositivi
+                await navigator.mediaDevices.getUserMedia({ video: true });
+                const devices = await navigator.mediaDevices.enumerateDevices();
+                const videoDevices = devices.filter(
+                    (device) => device.kind === "videoinput",
+                );
+
+                // Svuota il dropdown
+                webcamSelect.innerHTML =
+                    '<option value="">Select a webcam</option>';
+
+                // Popola il dropdown con le webcam disponibili
+                videoDevices.forEach((device) => {
+                    const option = document.createElement("option");
+                    option.value = device.deviceId;
+                    option.text =
+                        device.label || `Webcam ${webcamSelect.options.length}`;
+                    webcamSelect.appendChild(option);
+                });
+
+                // Mostra il dropdown solo se ci sono più webcam
+                webcamSelect.style.display =
+                    videoDevices.length > 1 ? "block" : "none";
+
+                // Avvia la webcam predefinita se ce n'è almeno una
+                if (videoDevices.length > 0) {
+                    await startWebcam(videoDevices[0].deviceId);
+                } else {
+                    alert("Nessuna webcam rilevata.");
+                    webcamArea.style.display = "none";
+                    openWebcamBtn.style.display = "block";
+                    dropArea.style.display = "block";
+                }
+            } catch (error) {
+                console.error("Errore nel recupero dei dispositivi:", error);
+                alert("Errore nel recupero dei dispositivi: " + error.message);
+                webcamSelect.style.display = "none";
+            }
+        }
+
+        // Apri la webcam e popola il dropdown
+        openWebcamBtn.addEventListener("click", async () => {
+            await populateWebcamSelect();
+        });
+
+        // Gestisci il cambio della webcam selezionata
+        webcamSelect.addEventListener("change", async (e) => {
+            const deviceId = e.target.value;
+            if (deviceId) {
+                await startWebcam(deviceId);
+            }
+        });
+
+        // Chiudi la webcam
+        closeWebcamBtn.addEventListener("click", () => {
+            if (stream) {
+                stream.getTracks().forEach((track) => track.stop());
+                stream = null;
+                webcamVideo.srcObject = null;
+            }
+            webcamArea.style.display = "none";
+            openWebcamBtn.style.display = "block";
+            dropArea.style.display = "block";
        });

        // Cattura la foto
@@ -71,7 +163,6 @@ document.addEventListener("DOMContentLoaded", function () {
                .getContext("2d")
                .drawImage(webcamVideo, 0, 0, canvas.width, canvas.height);

-            // Converti l'immagine in un file
            canvas.toBlob(async (blob) => {
                const file = new File(
                    [blob],
@@ -84,24 +175,16 @@ document.addEventListener("DOMContentLoaded", function () {
                    loader.style.display = "flex";
                }
                await handleFiles([file], iddatadb);
-                closeWebcam();
-            }, "image/jpeg");
-        });
-
-        // Chiudi la webcam
-        closeWebcamBtn.addEventListener("click", () => {
-            closeWebcam();
-        });
-
-        function closeWebcam() {
-            if (stream) {
-                stream.getTracks().forEach((track) => track.stop());
-                webcamVideo.srcObject = null;
+                if (stream) {
+                    stream.getTracks().forEach((track) => track.stop());
+                    stream = null;
+                    webcamVideo.srcObject = null;
+                }
                webcamArea.style.display = "none";
                openWebcamBtn.style.display = "block";
                dropArea.style.display = "block";
-            }
-        }
+            }, "image/jpeg");
+        });
    }

    // Funzione per attaccare gli event listener al contenuto del popup
@@ -198,6 +281,9 @@ document.addEventListener("DOMContentLoaded", function () {
                        });
                        const result = await response.json();
                        if (result.success) {
+                            console.log(
+                                "Foto eliminata con successo, ricarico popup",
+                            );
                            loadPopupContent(iddatadb);
                        } else {
                            alert(