update objectDetection-webcam example

Author: yiyujin

examples/objectDetection/index.html renamed to examples/objectDetection-webcam/index.html

@@ -1,13 +1,10 @@
-// Copyright (c) 2020 ml5
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
-/* ===
-ml5 Example
-Object Detection using COCOSSD
-This example uses a callback pattern to create the classifier
-=== */
+/*
+ * 👋 Hello! This is an ml5.js example made and shared with ❤️.
+ * Learn more about the ml5.js project: https://ml5js.org/
+ * ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
+ *
+ * This example demonstrates detecting objects in a live video through ml5.imageClassifier.
+ */
 
 let video;
 let detector;
@@ -20,30 +17,34 @@ function preload(){
 function setup() {
   createCanvas(640, 480);
 
+  // Using webcam feed as video input, hiding html element to avoid duplicate with canvas
   video = createCapture(VIDEO);
   video.size(width, height);
   video.hide();
 
   detector.detectStart(video, gotDetections);
 }
 
+// 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 draw() {
+  // Draw the current video frame onto the canvas.
   image(video, 0, 0);
 
   for (let i = 0; i < detections.length; i += 1) {
-    const detection = detections[i];
+    let detection = detections[i];
 
-    // draw bounding box
+    // Draw bounding box
     stroke(0, 255, 0);
     strokeWeight(4);
     noFill();
     rect(detection.x, detection.y, detection.width, detection.height);
 
-    // draw label
+    // Draw label
     noStroke();
     fill(255);
     textSize(24);

examples/objectDetection/sketch.js renamed to examples/objectDetection-webcam/sketch.js

@@ -40,6 +40,7 @@ export class CocoSsd {
    */
   async detect(imgToPredict) {
     mediaReady(imgToPredict, true);
+    
     await tf.nextFrame();
 
     const detections = await this.model.detect(imgToPredict);

src/ObjectDetector/cocossd.js

@@ -13,7 +13,7 @@ import handleArguments from "../utils/handleArguments";
 import callCallback from "../utils/callcallback";
 import { mediaReady } from "../utils/imageUtilities";
 
-const MODEL_OPTIONS = ["cocossd"]; // Expandable for other models like YOLO
+const MODEL_OPTIONS = ["cocossd", "yolo"]; // Expandable for other models like YOLO
 
 class ObjectDetector {
   /**
@@ -24,8 +24,7 @@ class ObjectDetector {
    */
   /**
    * Create ObjectDetector model. Works on video and images.
-   * @param {string} modelNameOrUrl - The name or the URL of the model to use. Current model name options
-   *    are: 'YOLO' and 'CocoSsd'.
+   * @param {string} modelNameOrUrl - The name or the URL of the model to use. Current model name options are: 'YOLO' and 'CocoSsd'.
    * @param {Object} options - Optional. A set of options.
    * @param {function} callback - Optional. A callback function that is called once the model has loaded.
    */
@@ -46,7 +45,6 @@ class ObjectDetector {
       "objectDetector"
     );
 
-
     switch (this.modelName) {
       case "cocossd":
         this.modelToUse = cocoSsd;