Update app.py

app.py

@@ -3,6 +3,8 @@ import pandas as pd
 from datetime import datetime
 import os
 import base64
+from io import BytesIO
+from PIL import Image
 
 # 🌟🔥 Initialize session state like a galactic DJ spinning tracks!
 if 'file_history' not in st.session_state:
@@ -33,79 +35,101 @@ with st.sidebar:
         st.write("🕳️ Empty Stash!")
 
 # 🌍🎨 Main UI kicks off like a cosmic art show!
-st.title("📸 Multi-Cam Snap Craze")
+st.title("📸 Live Camera Snap Craze")
 
-# 📸📷 JS camera zone with multiple streams!
-st.header("📸🎥 Snap Zone")
-multi_cam_html = """
-<div id="videoContainer"></div>
+# 📸📷 JS live camera zone!
+st.header("📸🎥 Live Snap Zone")
+live_camera_html = """
+<div>
+    <select id="cameraSelect"></select>
+    <button id="startBtn" onclick="toggleStream()">📷 Start Live</button>
+    <button onclick="takeSnapshot()">📸 Snap Now</button>
+    <video id="video" autoplay playsinline style="width:100%;"></video>
+    <canvas id="canvas" style="display:none;"></canvas>
+</div>
 <script>
-    let streams = [];
-    const container = document.getElementById('videoContainer');
-    let autoCaptureIntervals = [];
+    let stream = null;
+    const video = document.getElementById('video');
+    const canvas = document.getElementById('canvas');
+    let autoCaptureInterval = null;
+    let isStreaming = false;
 
     // 📹🔍 Enumerate cameras like a tech detective!
-    async function enumerateAndStartCameras() {
+    async function enumerateCameras() {
         const devices = await navigator.mediaDevices.enumerateDevices();
         const videoDevices = devices.filter(device => device.kind === 'videoinput');
+        const select = document.getElementById('cameraSelect');
+        select.innerHTML = '';
         videoDevices.forEach((device, index) => {
-            const div = document.createElement('div');
-            div.innerHTML = `
-                <p>${device.label || 'Camera ' + index}</p>
-                <video id="video${index}" autoplay playsinline style="width:100%;"></video>
-                <canvas id="canvas${index}" style="display:none;"></canvas>
-                <button onclick="takeSnapshot(${index})">📸 Snap Cam ${index}</button>
-            `;
-            container.appendChild(div);
-            startStream(device.deviceId, index);
+            const option = document.createElement('option');
+            option.value = device.deviceId;
+            option.text = device.label || `Camera ${index}`;
+            select.appendChild(option);
         });
+        if (videoDevices.length === 0) {
+            select.innerHTML = '<option>No cameras found</option>';
+        }
     }
 
-    // 📸🎥 Start streaming like a live broadcast pro!
-    async function startStream(deviceId, index) {
-        const constraints = { video: { deviceId: { exact: deviceId } } };
-        const stream = await navigator.mediaDevices.getUserMedia(constraints);
-        const video = document.getElementById(`video${index}`);
-        video.srcObject = stream;
-        streams.push(stream);
-        // Auto-capture every 10 seconds
-        autoCaptureIntervals[index] = setInterval(() => takeSnapshot(index), 10000);
+    // 📸🎥 Toggle live stream like a broadcast pro!
+    async function toggleStream() {
+        const startBtn = document.getElementById('startBtn');
+        if (isStreaming) {
+            stopStream();
+            startBtn.textContent = '📷 Start Live';
+            isStreaming = false;
+        } else {
+            const cameraId = document.getElementById('cameraSelect').value;
+            if (!cameraId) {
+                alert('No camera selected or available!');
+                return;
+            }
+            const constraints = { video: { deviceId: { exact: cameraId } } };
+            try {
+                stream = await navigator.mediaDevices.getUserMedia(constraints);
+                video.srcObject = stream;
+                startBtn.textContent = '⏹️ Stop Live';
+                isStreaming = true;
+                autoCaptureInterval = setInterval(takeSnapshot, 10000); // Auto-save every 10s
+            } catch (e) {
+                alert('Failed to start camera: ' + e.message);
+            }
+        }
     }
 
     // 📸✂️ Snap a pic like a stealthy paparazzi!
-    function takeSnapshot(index) {
-        const video = document.getElementById(`video${index}`);
-        const canvas = document.getElementById(`canvas${index}`);
+    function takeSnapshot() {
+        if (!stream) return;
         canvas.width = video.videoWidth;
         canvas.height = video.videoHeight;
         canvas.getContext('2d').drawImage(video, 0, 0);
         const dataUrl = canvas.toDataURL('image/jpeg');
-        window.parent.postMessage({ type: 'snapshot', data: dataUrl, camIndex: index }, '*');
+        window.parent.postMessage({ type: 'snapshot', data: dataUrl }, '*');
     }
 
-    // ⏹️📴 Stop all streams like a broadcast kill switch!
-    function stopStreams() {
-        streams.forEach(stream => stream.getTracks().forEach(track => track.stop()));
-        streams = [];
-        autoCaptureIntervals.forEach(interval => clearInterval(interval));
-        autoCaptureIntervals = [];
+    // ⏹️📴 Stop the stream like a broadcast kill switch!
+    function stopStream() {
+        if (stream) {
+            stream.getTracks().forEach(track => track.stop());
+            stream = null;
+            video.srcObject = null;
+            clearInterval(autoCaptureInterval);
+        }
     }
 
     // 🎬 Kick off the camera party!
-    enumerateAndStartCameras();
-    window.onunload = stopStreams;
+    enumerateCameras();
 </script>
 """
-st.markdown(multi_cam_html, unsafe_allow_html=True)
+st.markdown(live_camera_html, unsafe_allow_html=True)
 
 # 📸📥 Handle snapshots from JS
 def handle_snapshot():
     if "snapshot" in st.session_state:
         snapshot_data = st.session_state["snapshot"]
-        cam_index = st.session_state.get("camIndex", 0)
-        filename = f"cam{cam_index}_snap_{datetime.now().strftime('%Y%m%d_%H%M%S')}.jpg"
+        filename = f"snap_{datetime.now().strftime('%Y%m%d_%H%M%S')}.jpg"
         save_to_history("🖼️ Image", filename, snapshot_data)
-        st.image(Image.open(BytesIO(base64.b64decode(snapshot_data.split(',')[1]))), caption=f"Cam {cam_index} Snap", use_container_width=True)
+        st.image(Image.open(BytesIO(base64.b64decode(snapshot_data.split(',')[1]))), caption="Latest Snap", use_container_width=True)
         del st.session_state["snapshot"]
 
 st.components.v1.html(
@@ -113,7 +137,7 @@ st.components.v1.html(
     <script>
     window.addEventListener('message', function(event) {
         if (event.data.type === 'snapshot') {
-            window.streamlitAPI.setComponentValue({snapshot: event.data.data, camIndex: event.data.camIndex});
+            window.streamlitAPI.setComponentValue({snapshot: event.data.data});
         }
     });
     </script>