update video example - play video on loop and detect

Author: yiyujin

examples/objectDetection-sigle-image/dog_cat.jpg renamed to examples/objectDetection-image/dog_cat.jpg

@@ -9,81 +9,53 @@
 let video;
 let detector;
 let detections = [];
-let canvasElement;
 
 function preload(){
   detector = ml5.objectDetector("cocossd");
 }
 
+// Callback function is called each time the object detector finishes processing a frame.
+function gotDetections(results) {
+  // Update detections array with the new results
+  detections = results;  
+}
+
 function setup() {
   // Create canvas with initial size - will be resized later
-  canvasElement = createCanvas(640, 480);
-  canvasElement.position(0, 0);
+  createCanvas(640, 480);
 
-  // Create video element (paused by default)
+  // Load and loop the video for object detection
   video = createVideo('test.mov');
-  video.position(0, 0);
-  video.volume(0);
-  video.showControls();
-  
-  // Make canvas transparent and on top
-  canvasElement.style('z-index', '1');
-  canvasElement.style('pointer-events', 'none'); // Allow clicks to pass through to video
-  video.style('z-index', '-1');
-  
-  // Set up video event listeners
-  video.elt.addEventListener('loadedmetadata', () => {
-    console.log('Video metadata loaded');
+  video.size(width, height);
+  video.hide();
+  video.loop();
 
-    // Resize canvas to match video size
-    resizeCanvas(video.elt.videoWidth, video.elt.videoHeight);
-  });
-  
-  video.elt.addEventListener('play', () => {
-    console.log('Video started playing');
-
-    // Start detection
-    detector.detectStart(video, gotDetections);
-  });
-  
-  video.elt.addEventListener('pause', () => {
-    console.log('Video paused');
-
-    // Stop detection when video is paused
-    detector.detectStop();
-  });
-  
-  video.elt.addEventListener('ended', () => {
-    console.log('Video ended');
-    
-    // Stop detection when video ends
-    detector.detectStop();
-  });
+  detector.detectStart(video, gotDetections);
 }
 
 function draw(){
-  // Clear the canvas (this acts as the transparent overlay)
-  clear();
+  image(video, 0, 0, width, height); // draw video frame
+
+  // Scale factors from original video to canvas size
+  let scaleX = width / video.elt.videoWidth;
+  let scaleY = height / video.elt.videoHeight;
 
-  for (let i = 0; i < detections.length; i += 1) {
+  for (let i = 0; i < detections.length; i++) {
     let detection = detections[i];
 
-    // Draw bounding box
+    let x = detection.x * scaleX;
+    let y = detection.y * scaleY;
+    let w = detection.width * scaleX;
+    let h = detection.height * scaleY;
+
     stroke(0, 255, 0);
     strokeWeight(4);
     noFill();
-    rect(detection.x, detection.y, detection.width, detection.height);
+    rect(x, y, w, h);
 
-    // Draw label
     noStroke();
     fill(255);
-    textSize(24);
-    text(detection.label, detection.x + 10, detection.y + 24);
+    textSize(18);
+    text(detection.label, x + 5, y + 20);
   }
-}
-
-// Callback function is called each time the object detector finishes processing a frame.
-function gotDetections(results) {
-  // Update detections array with the new results
-  detections = results;  
 }