Update templates/index.html

templates/index.html

@@ -365,8 +365,7 @@
 
                         <video id="local-video" autoplay playsinline class="hidden"></video>
 
-                        <img id="processed-feed" src="" alt="Processed Feed"
-                            class="w-full h-auto max-h-[400px] md:max-h-[600px] object-contain hidden z-10">
+                        <canvas id="output-canvas" class="w-full h-auto max-h-[400px] md:max-h-[600px] object-contain hidden z-10"></canvas>
 
                         <div
                             class="absolute top-2 left-2 md:top-4 md:left-4 w-6 h-6 md:w-8 md:h-8 border-t-4 border-l-4 border-blue-500 opacity-70 z-20 pointer-events-none">
@@ -436,19 +435,60 @@
         sidebarOverlay.addEventListener('click', toggleSidebar);
 
 
-        //MAIN CAMERA
         const toggleBtn = document.getElementById('toggle-camera');
         const localVideo = document.getElementById('local-video');
-        const processedFeed = document.getElementById('processed-feed');
+        const outputCanvas = document.getElementById('output-canvas');
+        const outputCtx = outputCanvas.getContext('2d');
         const placeholder = document.getElementById('camera-placeholder');
 
         let isCameraOn = false;
         let localStream = null;
-        let processingInterval = null;
+        let latestFaces = [];
 
         const canvas = document.createElement('canvas');
         const context = canvas.getContext('2d');
 
+        function renderLoop() {
+            if (!isCameraOn) return;
+            if (localVideo.readyState === localVideo.HAVE_ENOUGH_DATA) {
+                // Keep canvas resolution synced with original video resolution
+                if (outputCanvas.width !== localVideo.videoWidth) {
+                    outputCanvas.width = localVideo.videoWidth;
+                    outputCanvas.height = localVideo.videoHeight;
+                }
+                
+                // Draw local webcam feed smoothly
+                outputCtx.drawImage(localVideo, 0, 0, outputCanvas.width, outputCanvas.height);
+                
+                // Draw bounding boxes based on backend coordinates
+                const scaleX = outputCanvas.width / (canvas.width || 640);
+                const scaleY = outputCanvas.height / (canvas.height || 480);
+                
+                latestFaces.forEach(face => {
+                    const top = face.box.top * scaleY;
+                    const right = face.box.right * scaleX;
+                    const bottom = face.box.bottom * scaleY;
+                    const left = face.box.left * scaleX;
+                    const name = face.name;
+                    
+                    outputCtx.lineWidth = 4;
+                    outputCtx.strokeStyle = name !== "Unknown" ? "#22c55e" : "#3b82f6";
+                    outputCtx.fillStyle = name !== "Unknown" ? "#22c55e" : "#3b82f6";
+                    
+                    outputCtx.strokeRect(left, top, right - left, bottom - top);
+                    
+                    let labelText = name;
+                    outputCtx.font = "bold 20px Arial";
+                    const textWidth = outputCtx.measureText(labelText).width;
+                    outputCtx.fillRect(left, top - 30, textWidth + 20, 30);
+                    
+                    outputCtx.fillStyle = "#FFFFFF";
+                    outputCtx.fillText(labelText, left + 10, top - 8);
+                });
+            }
+            requestAnimationFrame(renderLoop);
+        }
+
         // TTS (SpeechSynthesis) Helper
         let spokenNames = new Map();
 
@@ -464,13 +504,18 @@
 
         async function startCamera() {
             try {
-                localStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } });
+                localStream = await navigator.mediaDevices.getUserMedia({ 
+                    video: { 
+                        facingMode: 'user',
+                        width: { ideal: 640 },
+                        height: { ideal: 480 }
+                    } 
+                });
                 localVideo.srcObject = localStream;
                 placeholder.classList.add('hidden');
-                processedFeed.classList.remove('hidden');
+                outputCanvas.classList.remove('hidden');
                 localVideo.onloadedmetadata = () => {
-                    canvas.width = localVideo.videoWidth;
-                    canvas.height = localVideo.videoHeight;
+                    requestAnimationFrame(renderLoop);
                     sendFrameToServer();
                 };
             } catch (err) {
@@ -482,16 +527,36 @@
 
         function stopCamera() {
             if (localStream) localStream.getTracks().forEach(t => t.stop());
-            if (processingInterval) clearInterval(processingInterval);
-            processedFeed.src = "";
-            processedFeed.classList.add('hidden');
+            outputCanvas.classList.add('hidden');
             placeholder.classList.remove('hidden');
+            latestFaces = [];
         }
 
         async function sendFrameToServer() {
             if (!isCameraOn) return;
+            
+            // Resize image to max 640x480 to reduce CPU load and latency
+            const MAX_WIDTH = 640;
+            const MAX_HEIGHT = 480;
+            let width = localVideo.videoWidth;
+            let height = localVideo.videoHeight;
+            
+            if (width > height) {
+                if (width > MAX_WIDTH) {
+                    height *= MAX_WIDTH / width;
+                    width = MAX_WIDTH;
+                }
+            } else {
+                if (height > MAX_HEIGHT) {
+                    width *= MAX_HEIGHT / height;
+                    height = MAX_HEIGHT;
+                }
+            }
+            canvas.width = width || 640;
+            canvas.height = height || 480;
+            
             context.drawImage(localVideo, 0, 0, canvas.width, canvas.height);
-            const dataURL = canvas.toDataURL('image/jpeg', 0.7);
+            const dataURL = canvas.toDataURL('image/jpeg', 0.6);
             try {
                 const response = await fetch('/process_frame', {
                     method: 'POST',
@@ -499,10 +564,9 @@
                     body: JSON.stringify({ image: dataURL })
                 });
                 const data = await response.json();
-                if (data.image) processedFeed.src = data.image;
                 
-                // Speak if attendance is successfully marked
                 if (data.faces) {
+                    latestFaces = data.faces;
                     data.faces.forEach(face => {
                         if (face.name && face.name !== "Unknown") {
                             const now = Date.now();
@@ -521,7 +585,7 @@
             } catch (err) {
                 console.error("Error communicating with backend", err);
             } finally {
-                if (isCameraOn) setTimeout(sendFrameToServer, 250);
+                if (isCameraOn) setTimeout(sendFrameToServer, 500); // reduced frequency to 2 FPS
             }
         }