Bilderkennung erkennt nur 1 Objekt?
Warum erkennt mein Programm, dass Gefahren und Menschen mit Punkten markiert immer nur eine Gefahr und eine Person? Sobald mehr als ein Objekt (von Person oder Gefahr) springt der Punkt immer zwischen den beiden Objekten her, oder bleibt bei einem Objekt. Edit: Eine Person und eine Gefahr gleichzeitig geht.
JS:
const video = document.getElementById('video');
// Funktion zum Zugriff auf die Kamera
async function getCameraAccess() {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: true
});
video.srcObject = stream;
video.addEventListener('loadedmetadata', () => {
video.play(); // Video abspielen, sobald die Metadaten geladen sind
loadModel();
});
} catch (err) {
console.error("Error accessing camera: ", err);
alert("Kamerazugriff wurde verweigert. Bitte erlaube den Zugriff auf die Kamera.");
}
}
// Modell laden und Objekterkennung starten
let model;
async function loadModel() {
model = await cocoSsd.load();
console.log("Modell geladen!");
detectFrame();
}
// Objekterkennung in Echtzeit
function detectFrame() {
model.detect(video).then(predictions => {
console.log("Predictions: ", predictions); // Log predictions to see what is detected
drawDetectionPoints(predictions);
requestAnimationFrame(detectFrame);
});
}
// Punkte für die Objekterkennung zeichnen
function drawDetectionPoints(predictions) {
// Vorherige Punkte entfernen
const detectionPoints = document.querySelectorAll('.detection-point');
detectionPoints.forEach(point => point.remove());
predictions.forEach(prediction => {
const [x, y, width, height] = prediction.bbox;
const className = prediction.class;
// Mittelpunkt der Bounding Box berechnen
const centerX = x + width / 2;
const centerY = y + height / 2;
// Erstelle ein div-Element für den Detektionspunkt
const point = document.createElement('div');
point.classList.add('detection-point');
// Berechne die Position des Punktes relativ zum Video
const videoRect = video.getBoundingClientRect();
const offsetX = window.pageXOffset + videoRect.left; // Berücksichtige die Scrollposition horizontal
const offsetY = window.pageYOffset + videoRect.top; // Berücksichtige die Scrollposition vertikal
const pointX = (offsetX + centerX) * (video.offsetWidth / video.videoWidth);
const pointY = (offsetY + centerY) * (video.offsetHeight / video.videoHeight);
// Position des Punktes setzen
point.style.left = `${pointX}px`;
point.style.top = `${pointY}px`;
// Zusätzliche Anpassungen für die Positionierung
point.style.position = 'absolute'; // Absolute Positionierung
point.style.width = '10px'; // Größe des Punktes
point.style.height = '10px';
point.style.borderRadius = '50%'; // Runder Punkt
// Marker Farben basierend auf der erkannten Klasse setzen
switch (className) {
case 'person':
point.style.backgroundColor = 'limegreen'; // Grüner Punkt für Personen
break;
case 'knife':
case 'scissors':
case 'gun':
point.style.backgroundColor = 'red'; // Roter Punkt für Messer, Scheren und Pistolen
break;
default:
point.style.backgroundColor = 'yellow'; // Gelber Punkt für andere erkannte Objekte
break;
}
// Füge den Punkt zum Dokument hinzu
document.body.appendChild(point);
});
}
// Kamerazugriff anfordern
getCameraAccess();
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Objekterkennung: Test</title>
<style>
video {
width: 100%; /* Breite auf 100% setzen */
height: auto; /* Höhe automatisch anpassen */
transform: scaleX(1) !important; /* Keine Spiegelung des Videos */
}
.bounding-box {
position: absolute;
border: 2px solid;
}
.bounding-box.danger {
border-color: red;
}
.bounding-box.safe {
border-color: green;
}
</style>
</head>
<body>
<video id="video" autoplay></video>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
<script src="script.js"></script>
</body>
</html>
