| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>YOLOv8 Object Detection</title> |
| </head> |
| <body> |
| <h1>Webcam Object Detection with YOLOv8</h1> |
| <video id="video" width="640" height="480" autoplay></video> |
| <canvas id="canvas" style="display:none;"></canvas> |
| <br> |
| <img id="output" width="640" height="480" /> |
|
|
| <script> |
| const video = document.getElementById('video'); |
| const canvas = document.getElementById('canvas'); |
| const ctx = canvas.getContext('2d'); |
| const output = document.getElementById('output'); |
| |
| |
| navigator.mediaDevices.getUserMedia({ video: true }).then(stream => { |
| video.srcObject = stream; |
| }); |
| |
| |
| setInterval(() => { |
| canvas.width = video.videoWidth; |
| canvas.height = video.videoHeight; |
| |
| |
| ctx.save(); |
| ctx.scale(-1, 1); |
| ctx.drawImage(video, -canvas.width, 0, canvas.width, canvas.height); |
| ctx.restore(); |
| |
| const dataURL = canvas.toDataURL('image/jpeg'); |
| |
| fetch('/upload_frame', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ image: dataURL }) |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.image) { |
| output.src = data.image; |
| } |
| }); |
| }, 1000); |
| </script> |
| </body> |
| </html> |
|
|
