Machinelearningweb Development Tutorials, Guides & Insights

let video;
let detector;
let detections = [];

function setup() {
  // Create the canvas to match the video dimensions
  createCanvas(640, 480);
  // Capture video from the webcam
  video = createCapture(VIDEO);
  video.size(640, 480);
  video.hide();

  // Load the pre-trained COCO-SSD model
  cocoSsd.load().then(model => {
    detector = model;
    console.log("Model Loaded!");
    // Begin detecting objects every frame
    detectObjects();
  });
}

function detectObjects() {
  detector.detect(video.elt).then(results => {
    detections = results;
    // Continue detection in a loop
    detectObjects();
  });
}

function draw() {
  // Draw the video
  image(video, 0, 0);

  // Draw detection boxes and labels if available
  if (detections) {
    for (let i = 0; i < detections.length; i++) {
      let object = detections[i];
      stroke(0, 255, 0);
      strokeWeight(2);
      noFill();
      rect(object.bbox[0], object.bbox[1], object.bbox[2], object.bbox[3]);
      noStroke();
      fill(0, 255, 0);
      textSize(16);
      text(object.class, object.bbox[0] + 4, object.bbox[1] + 16);
    }
  }
}

• Setup: The setup function initializes the canvas and video capture. The video is hidden by p5.js’s default element so that we can draw it onto the canvas manually.
• Model Loading: We load the COCO-SSD model asynchronously. Once the model is ready, we start continuous object detection by calling detectObjects().
• Detection Loop: The detectObjects function uses the loaded model to analyze the current video frame and stores the detection results. It recursively calls itself so that new frames are analyzed continuously.
• Drawing: In the draw loop, the video feed is displayed and for each detected object, a rectangle and label are drawn. The bounding box coordinates and object class are provided by the model.