File size: 1,590 Bytes
35eb4d9 211452e 35eb4d9 211452e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!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');
// Start webcam
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
video.srcObject = stream;
});
// Send a frame every second to backend (flipped)
setInterval(() => {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
// Flip the canvas horizontally
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>
|