|
|
<!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> |
|
|
|
