Spaces:

srivatsavdamaraju
/

depthmapflask

Running

App Files Files Community

srivatsavdamaraju commited on Nov 8, 2024

Commit

01985bb

verified ·

1 Parent(s): 184bff0

Update templates/depthmap.html

Browse files

Files changed (1) hide show

templates/depthmap.html +24 -20

templates/depthmap.html CHANGED Viewed

@@ -1,4 +1,3 @@
-<!-- templates/index.html -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -13,6 +12,7 @@
     <script>
         const video = document.getElementById('video');
         const output = document.getElementById('output');
         // Access the webcam
         navigator.mediaDevices.getUserMedia({ video: true })
@@ -20,26 +20,30 @@
                 video.srcObject = stream;
                 setInterval(() => {
-                    const canvas = document.createElement('canvas');
-                    canvas.width = 640;
-                    canvas.height = 480;
-                    const ctx = canvas.getContext('2d');
-                    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-                    canvas.toBlob(blob => {
-                        const formData = new FormData();
-                        formData.append('frame', blob, 'frame.jpg');
-                        // Send the frame to the Flask server
-                        fetch('/video_feed', {
-                            method: 'POST',
-                            body: formData
-                        })
-                        .then(response => response.blob())
-                        .then(imageBlob => {
-                            output.src = URL.createObjectURL(imageBlob);
-                        });
-                    }, 'image/jpeg', 0.95);
-                }, 100); // Send every 100ms
             })
             .catch(error => {
                 console.error("Error accessing webcam: ", error);

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <script>
         const video = document.getElementById('video');
         const output = document.getElementById('output');
+        let frameCount = 0;
         // Access the webcam
         navigator.mediaDevices.getUserMedia({ video: true })
                 video.srcObject = stream;
                 setInterval(() => {
+                    frameCount++;
+                    // Only process every 3rd frame
+                    if (frameCount % 3 === 0) {
+                        const canvas = document.createElement('canvas');
+                        canvas.width = 640;
+                        canvas.height = 480;
+                        const ctx = canvas.getContext('2d');
+                        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                        canvas.toBlob(blob => {
+                            const formData = new FormData();
+                            formData.append('frame', blob, 'frame.jpg');
+                            // Send the frame to the Flask server
+                            fetch('/video_feed', {
+                                method: 'POST',
+                                body: formData
+                            })
+                            .then(response => response.blob())
+                            .then(imageBlob => {
+                                output.src = URL.createObjectURL(imageBlob);
+                            });
+                        }, 'image/jpeg', 0.95);
+                    }
+                }, 100); // Adjust interval as needed
             })
             .catch(error => {
                 console.error("Error accessing webcam: ", error);