Spaces:
Sleeping
Sleeping
| <!-- <!DOCTYPE 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'); | |
| // Access webcam | |
| navigator.mediaDevices.getUserMedia({ video: true }) | |
| .then(stream => { | |
| video.srcObject = stream; | |
| const canvas = document.createElement('canvas'); | |
| const context = canvas.getContext('2d'); | |
| // Capture and send frames | |
| 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); // Send every 100ms (~10 FPS) | |
| }); | |
| </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> | |