File size: 5,115 Bytes
47a2d72 6c77ca4 47a2d72 6c77ca4 47a2d72 6c77ca4 47a2d72 6c77ca4 47a2d72 6c77ca4 47a2d72 6c77ca4 47a2d72 6c77ca4 47a2d72 6c77ca4 47a2d72 6c77ca4 47a2d72 6c77ca4 47a2d72 6c77ca4 47a2d72 6c77ca4 47a2d72 42eab6a |
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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time Object Detection</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
#video {
width: 320px; /* Reduced video size */
height: 240px; /* Reduced video size */
display: block;
background-color: #000;
}
#canvas {
width: 320px; /* Reduced canvas size */
height: 240px; /* Reduced canvas size */
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.overlay {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 16px;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
pointer-events: none;
}
#loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
background-color: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<video id="video" width="320" height="240" autoplay muted></video>
<canvas id="canvas" width="320" height="240"></canvas>
<div id="overlay" class="overlay"></div>
<div id="loading" style="display: none;">Loading model...</div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
<script>
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const overlay = document.getElementById('overlay');
const loading = document.getElementById('loading');
let model;
let frameCount = 0;
const detectionInterval = 2; // Process every 2nd frame
// Initialize video stream from webcam
navigator.mediaDevices.getUserMedia({ video: { width: 320, height: 240 } })
.then((stream) => {
video.srcObject = stream;
loadModel();
})
.catch((err) => {
console.error('Error accessing webcam: ', err);
});
// Load the COCO-SSD model for object detection
async function loadModel() {
try {
loading.style.display = 'block'; // Show loading message
model = await cocoSsd.load();
console.log('COCO-SSD model loaded!');
loading.style.display = 'none'; // Hide loading message once model is ready
startDetection();
} catch (err) {
console.error('Error loading model:', err);
loading.innerHTML = 'Error loading model. Please try again.';
}
}
// Function to run object detection on each frame
async function detectFrame() {
if (!model) return; // Only proceed if model is loaded
frameCount++;
// Skip frames to improve performance
if (frameCount % detectionInterval !== 0) {
requestAnimationFrame(detectFrame); // Skip this frame and move to the next
return;
}
frameCount = 0; // Reset frame count after detection
// Clear the canvas before drawing
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw the video frame to canvas
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// Run object detection
const predictions = await model.detect(video);
// Clear previous overlay content
overlay.innerHTML = '';
predictions.forEach(prediction => {
// Draw bounding box
ctx.beginPath();
ctx.rect(
prediction.bbox[0],
prediction.bbox[1],
prediction.bbox[2],
prediction.bbox[3]
);
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.fillStyle = 'red';
ctx.stroke();
// Add label for the detected object
ctx.fillText(
`${prediction.class} (${Math.round(prediction.score * 100)}%)`,
prediction.bbox[0],
prediction.bbox[1] > 10 ? prediction.bbox[1] - 5 : 10
);
// Optionally display detected class names in the overlay
overlay.innerHTML += `<p>${prediction.class} - ${Math.round(prediction.score * 100)}%</p>`;
});
// Call detectFrame repeatedly for continuous object detection
requestAnimationFrame(detectFrame);
}
// Start the detection loop once the model is loaded
function startDetection() {
detectFrame();
}
</script>
</body>
</html>
|