Update index.html

index.html

@@ -101,8 +101,10 @@
 
         // Initialize camera and AI model
         async function init() {
+            console.log('Loading COCO-SSD model...');
             // Load COCO-SSD model
             model = await cocoSsd.load();
+            console.log('COCO-SSD model loaded.');
 
             // Setup camera
             const constraints = {
@@ -128,6 +130,15 @@
                 video.className = 'night-vision';
             }
 
+            // Check if video is playing
+            video.onplaying = () => {
+                console.log('Video stream started successfully.');
+            };
+
+            video.onerror = (e) => {
+                console.error('Error starting video stream:', e);
+            };
+
             // Start detection loop
             requestAnimationFrame(detect);
         }
@@ -144,58 +155,64 @@
                 }
 
                 // Detect objects
-                const predictions = await model.detect(video);
-
-                // Clear previous detections
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-                // Draw new detections
-                predictions.forEach(prediction => {
-                    // Draw bounding box
-                    ctx.strokeStyle = '#00ff00';
-                    ctx.lineWidth = 2;
-                    ctx.strokeRect(
-                        prediction.bbox[0],
-                        prediction.bbox[1],
-                        prediction.bbox[2],
-                        prediction.bbox[3]
-                    );
-
-                    // Draw label background
-                    ctx.fillStyle = '#00ff00';
-                    ctx.fillRect(
-                        prediction.bbox[0],
-                        prediction.bbox[1] - 20,
-                        prediction.bbox[2],
-                        20
-                    );
-
-                    // Draw label text
-                    ctx.fillStyle = '#000000';
-                    ctx.font = '16px monospace';
-                    ctx.fillText(
-                        `${prediction.class} ${Math.round(prediction.score * 100)}%`,
-                        prediction.bbox[0] + 5,
-                        prediction.bbox[1] - 5
-                    );
-                });
-
-                // Update detection info
-                document.getElementById('objects').textContent =
-                    `Objects detected: ${predictions.length}`;
-
-                document.getElementById('detections').innerHTML =
-                    predictions.map(p =>
-                        `Detected ${p.class} (${Math.round(p.score * 100)}% confidence)`
-                    ).join('<br>');
+                try {
+                    const predictions = await model.detect(video);
+
+                    // Clear previous detections
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+                    // Draw new detections
+                    predictions.forEach(prediction => {
+                        // Draw bounding box
+                        ctx.strokeStyle = '#00ff00';
+                        ctx.lineWidth = 2;
+                        ctx.strokeRect(
+                            prediction.bbox[0],
+                            prediction.bbox[1],
+                            prediction.bbox[2],
+                            prediction.bbox[3]
+                        );
+
+                        // Draw label background
+                        ctx.fillStyle = '#00ff00';
+                        ctx.fillRect(
+                            prediction.bbox[0],
+                            prediction.bbox[1] - 20,
+                            prediction.bbox[2],
+                            20
+                        );
+
+                        // Draw label text
+                        ctx.fillStyle = '#000000';
+                        ctx.font = '16px monospace';
+                        ctx.fillText(
+                            `${prediction.class} ${Math.round(prediction.score * 100)}%`,
+                            prediction.bbox[0] + 5,
+                            prediction.bbox[1] - 5
+                        );
+                    });
+
+                    // Update detection info
+                    document.getElementById('objects').textContent =
+                        `Objects detected: ${predictions.length}`;
+
+                    document.getElementById('detections').innerHTML =
+                        predictions.map(p =>
+                            `Detected ${p.class} (${Math.round(p.score * 100)}% confidence)`
+                        ).join('<br>');
+
+                } catch (error) {
+                    console.error('Error in detection:', error);
+                }
             }
 
+            // Continue calling the detection loop
             requestAnimationFrame(detect);
         }
 
         // Start application
         init().catch(err => {
-            console.error('Error initializing camera:', err);
+            console.error('Error initializing application:', err);
         });
 
         // Add image processing for better night vision