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>
