Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Webcam Streaming with Flask-SocketIO</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.3/socket.io.min.js"></script> | |
| <style> | |
| body { | |
| text-align: center; | |
| font-family: Arial, sans-serif; | |
| } | |
| img { | |
| width: 80%; | |
| max-width: 640px; | |
| height: auto; | |
| } | |
| #videoCanvas { | |
| width: 100%; | |
| max-width: 640px; | |
| border: 1px solid #ccc; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Live Webcam Feed</h1> | |
| <canvas id="videoCanvas"></canvas> | |
| <script> | |
| var socket = io.connect('http://127.0.0.1:5000'); // Connect to the Flask server | |
| // When the connection is established, log a message | |
| socket.on('connect', function() { | |
| console.log("Connected to server!"); | |
| }); | |
| // When the server sends a video frame | |
| socket.on('display_frame', function(data) { | |
| console.log("Received video frame from server"); | |
| // Check if the data contains the 'image' field | |
| if (data && data.image) { | |
| var image = new Image(); | |
| image.src = 'data:image/jpeg;base64,' + data.image; | |
| image.onload = function() { | |
| var canvas = document.getElementById('videoCanvas'); | |
| var context = canvas.getContext('2d'); | |
| context.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas before drawing the new frame | |
| context.drawImage(image, 0, 0, canvas.width, canvas.height); // Draw the frame on the canvas | |
| }; | |
| } else { | |
| console.error("Invalid frame data received:", data); | |
| } | |
| }); | |
| socket.on('disconnect', function() { | |
| console.log("Disconnected from server"); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |