Realtimeapp Development Tutorials, Guides & Insights

Create a new file called sketch.js in your project folder. We’ll use p5.js to access the webcam and display the video on a canvas:

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);
    }
  }
}