Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>YOLOv8 Real-Time Detection</title> | |
| </head> | |
| <body> | |
| <h2>🎥 Real-Time Object Detection with YOLOv8</h2> | |
| <video id="video" width="640" height="480" autoplay muted></video> | |
| <canvas id="canvas" style="display:none;"></canvas> | |
| <img id="result" width="640" height="480"/> | |
| <script> | |
| const video = document.getElementById('video'); | |
| const canvas = document.getElementById('canvas'); | |
| const result = document.getElementById('result'); | |
| const ctx = canvas.getContext('2d'); | |
| navigator.mediaDevices.getUserMedia({ video: true }) | |
| .then(stream => { | |
| video.srcObject = stream; | |
| video.play(); | |
| detectLoop(); | |
| }); | |
| async function detectLoop() { | |
| canvas.width = video.videoWidth; | |
| canvas.height = video.videoHeight; | |
| ctx.drawImage(video, 0, 0, canvas.width, canvas.height); | |
| const dataUrl = canvas.toDataURL('image/jpeg'); | |
| const response = await fetch('/detect', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ image: dataUrl }) | |
| }); | |
| const resultJson = await response.json(); | |
| result.src = resultJson.image; | |
| requestAnimationFrame(detectLoop); // Repeat | |
| } | |
| </script> | |
| </body> | |
| </html> | |