added detectStart and detectStop to cocossd.js and updated example code to call detectStart in setup()

yiyujin · yiyujin · commit ce82f51a7627 · 2025-07-11T02:15:07.000-04:00
diff --git a/examples/objectDetection/index.html b/examples/objectDetection/index.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ml5.js objectDetection Webcam Example</title>
     <script src="https://cdn.jsdelivr.net/npm/p5@1.11.7/lib/p5.js"></script>
-    <!-- <script src="https://unpkg.com/ml5@0.5.0/dist/ml5.min.js"></script> -->
     <script src="../../dist/ml5.js"></script>
-    <meta charset="utf-8" />
-
   </head>
   <body>
     <main>
diff --git a/examples/objectDetection/sketch.js b/examples/objectDetection/sketch.js
@@ -24,12 +24,14 @@ function setup() {
   video.size(640, 480);
   video.hide();
 
-  detector.detect(video, gotDetections);
+  // detector.detect(video, gotDetections);
+  detector.detectStart(video, gotDetections);
 }
 
 function gotDetections(results) {
   detections = results;
-  detector.detect(video, gotDetections);
+  // console.log(results);
+  // detector.detect(video, gotDetections);
 }
 
 function draw() {
diff --git a/src/ObjectDetector/cocossd.js b/src/ObjectDetector/cocossd.js
@@ -27,7 +27,11 @@ export class CocoSsdBase {
   constructor(video, options, constructorCallback) {
     this.video = video || null;
     this.modelReady = false;
+
     this.isPredicting = false;
+    this.signalStop = false;
+    this.prevCall = "";
+
     this.config = {
       base: options.base || DEFAULTS.base,
       modelUrl: options.modelUrl || DEFAULTS.modelUrl,
@@ -37,9 +41,6 @@ export class CocoSsdBase {
     this.ready = callCallback(this.loadModel(), this.callback);
   }
 
-  /**
-   * load model
-   */
   async loadModel() {
     await tf.setBackend("webgl"); // this line resolves warning : performance is poor on webgpu backend
     await tf.ready();
@@ -74,8 +75,11 @@ export class CocoSsdBase {
    * @returns {ObjectDetectorPrediction}
    */
   async detectInternal(imgToPredict) {
-    this.isPredicting = true;
-    mediaReady(imgToPredict, true)
+    // this.isPredicting = true;
+    await this.ready;
+    
+    mediaReady(imgToPredict, true);
+
     await tf.nextFrame();
 
     const predictions = await this.model.detect(imgToPredict);
@@ -95,7 +99,9 @@ export class CocoSsdBase {
         },
       };
     });
+
     this.isPredicting = false;
+    
     return formattedPredictions;
   }
 
@@ -107,16 +113,48 @@ export class CocoSsdBase {
    * @returns {ObjectDetectorPrediction}
    */
   async detect(inputOrCallback, cb) {
-    await this.ready;
-    await tf.nextFrame();
-
     const args = handleArguments(this.video, inputOrCallback, cb);
     args.require("image", "Detection subject not supported");
 
-    await mediaReady(args.image, true);
-
     return callCallback(this.detectInternal(args.image), args.callback);
   }
+
+  async detectStart(inputNumOrCallback, numOrCallback, cb){
+    const { image, number, callback } = handleArguments(
+      inputNumOrCallback,
+      numOrCallback,
+      cb
+    ).require("image", "No input provided.");
+
+    const detectFrame = async () => {
+      await mediaReady(image, true);
+
+      await callCallback(this.detectInternal(image), callback);
+
+      if(!this.signalStop){
+        requestAnimationFrame(detectFrame);
+      } else {
+        this.isPredicting = false;
+      }
+    };
+
+    // start the detection
+    this.signalStop = false;
+    if (!this.isPredicting) {
+      this.isPredicting = true;
+      detectFrame();
+    }
+
+    if (this.prevCall === "start") {
+      console.warn("warning");
+    }
+    this.prevCall = "start";
+  }
+
+  detectStop(){
+    if (this.isPredicting) { this.signalStop = true; }
+    this.prevCall = "stop";
+  }
 }
 
 export const CocoSsd = (...inputs) => {

Original file line number	Diff line number	Diff line change
`@@ -24,12 +24,14 @@ function setup() {`
`24`	`24`	`video.size(640, 480);`
`25`	`25`	`video.hide();`
`26`	`26`
`27`		`- detector.detect(video, gotDetections);`
	`27`	`+ // detector.detect(video, gotDetections);`
	`28`	`+ detector.detectStart(video, gotDetections);`
`28`	`29`	`}`
`29`	`30`
`30`	`31`	`function gotDetections(results) {`
`31`	`32`	`detections = results;`
`32`		`- detector.detect(video, gotDetections);`
	`33`	`+ // console.log(results);`
	`34`	`+ // detector.detect(video, gotDetections);`
`33`	`35`	`}`
`34`	`36`
`35`	`37`	`function draw() {`