Scratch_Vision_Game_dup2

Sleeping

App Files Files Community

prthm11 commited on Jul 16

Commit

6754f55

verified ·

1 Parent(s): 0b4cb38

Update templates/test_streaming_index.html

Browse files

Files changed (1) hide show

templates/test_streaming_index.html +15 -27

templates/test_streaming_index.html CHANGED Viewed

@@ -38,51 +38,39 @@
 <html>
 <head>
     <title>Live Stream</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>
-        video, img {
-            max-width: 100%;
-            border: 1px solid black;
-        }
-    </style>
 </head>
 <body>
     <h1>Live Camera Stream</h1>
-    <video id="video" autoplay muted playsinline></video>
-    <img id="serverStream" src="/video_feed">
     <script>
         const video = document.getElementById('video');
-        // Try accessing rear camera
-        navigator.mediaDevices.getUserMedia({
-            video: { facingMode: { ideal: "environment" } }, // back camera
-            audio: false
-        }).then(stream => {
-            video.srcObject = stream;
-            const canvas = document.createElement('canvas');
-            const context = canvas.getContext('2d');
-            video.addEventListener('loadedmetadata', () => {
-                canvas.width = video.videoWidth;
-                canvas.height = video.videoHeight;
                 setInterval(() => {
                     context.drawImage(video, 0, 0, canvas.width, canvas.height);
                     const dataUrl = canvas.toDataURL('image/jpeg');
                     fetch('/upload_frame', {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({ image: dataUrl })
                     });
-                }, 100);
             });
-        }).catch(err => {
-            alert("Could not access the camera: " + err.message);
-            console.error("Camera error:", err);
-        });
     </script>
 </body>
 </html>

 <html>
 <head>
     <title>Live Stream</title>
 </head>
 <body>
     <h1>Live Camera Stream</h1>
+    <video id="video" autoplay muted playsinline style="max-width: 80%; border: 1px solid black;"></video>
+    <img id="serverStream" src="/video_feed" style="max-width: 80%; border:1px solid black;">
     <script>
         const video = document.getElementById('video');
+        navigator.mediaDevices.getUserMedia({ video: true })
+            .then(stream => {
+                video.srcObject = stream;
+                const canvas = document.createElement('canvas');
+                const context = canvas.getContext('2d');
                 setInterval(() => {
+                    canvas.width = video.videoWidth;
+                    canvas.height = video.videoHeight;
                     context.drawImage(video, 0, 0, canvas.width, canvas.height);
                     const dataUrl = canvas.toDataURL('image/jpeg');
                     fetch('/upload_frame', {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({ image: dataUrl })
                     });
+                }, 100); // ~10 FPS
+            })
+            .catch(err => {
+                alert('Camera access denied or unavailable.');
+                console.error(err);
             });
     </script>
 </body>
 </html>