Merge branch 'main' into development

Author: amirfeqhi

examples/javascript/BodyPix/BodyPix_Webcam/sketch.js

@@ -18,15 +18,17 @@ async function setup() {
   video = await getVideo();
   // load bodyPix with video
   bodypix = await ml5.bodyPix(options)
-  // run the segmentation on the video, handle the results in a callback
-  bodypix.segment(video, gotImage, options);
 }
 
 // when the dom is loaded, call make();
 window.addEventListener('DOMContentLoaded', function() {
   setup();
 });
 
+function videoReady() {
+  // run the segmentation on the video, handle the results in a callback
+  bodypix.segment(video, gotImage, options);
+}
 
 function gotImage(err, result){
   if(err) {
@@ -48,6 +50,7 @@ async function getVideo(){
   videoElement.setAttribute("style", "display: none;"); 
   videoElement.width = width;
   videoElement.height = height;
+  videoElement.onloadeddata = videoReady;
   document.body.appendChild(videoElement);
 
   // Create a webcam capture

examples/p5js/BodyPix/BodyPix_Webcam/sketch.js

@@ -11,7 +11,6 @@ BodyPix
 let bodypix;
 let video;
 let segmentation;
-let img;
 
 const options = {
   outputStride: 8, // 8, 16, or 32, default is 16
@@ -25,8 +24,12 @@ function preload() {
 function setup() {
   createCanvas(320, 240);
   // load up your video
-  video = createCapture(VIDEO);
+  video = createCapture(VIDEO, videoReady);
   video.size(width, height);
+  
+}
+
+function videoReady() {
   bodypix.segment(video, gotResults);
 }
 

examples/p5js/BodyPix/BodyPix_Webcam_Parts/sketch.js

@@ -11,7 +11,6 @@ BodyPix
 let bodypix;
 let video;
 let segmentation;
-let img;
 
 const options = {
   outputStride: 8, // 8, 16, or 32, default is 16
@@ -26,15 +25,17 @@ function setup() {
   createCanvas(320, 240);
 
   // load up your video
-  video = createCapture(VIDEO);
+  video = createCapture(VIDEO, videoReady);
   video.size(width, height);
   // video.hide(); // Hide the video element, and just show the canvas
 
   // Create a palette - uncomment to test below
   createHSBPalette();
   // createRGBPalette();
   // createSimplePalette();
+}
 
+function videoReady() {
   bodypix.segmentWithParts(video, gotResults, options);
 }
 

examples/p5js/CartoonGAN/CartoonGan_WebCam/sketch.js

@@ -8,8 +8,11 @@ function preload() {
 
 function setup() {
   createCanvas(320, 240);
-  video = createCapture(VIDEO);
+  video = createCapture(VIDEO, videoReady);
   video.size(320, 240);
+}
+
+function videoReady() {
   cartoonGAN.generate(video, gotResults);
 }
 

examples/p5js/ObjectDetector/ObjectDetector_COCOSSD_Video/sketch.js

@@ -15,9 +15,12 @@ let detections = [];
 
 function setup() {
   createCanvas(640, 480);
-  video = createCapture(VIDEO);
+  video = createCapture(VIDEO, videoReady);
   video.size(640, 480);
   video.hide();
+}
+
+function videoReady() {
   // Models available are 'cocossd', 'yolo'
   detector = ml5.objectDetector('cocossd', modelReady);
 }
@@ -37,8 +40,8 @@ function modelReady() {
 function draw() {
   image(video, 0, 0);
 
-  for (let i = 0; i < detections.length; i++) {
-    let object = detections[i];
+  for (let i = 0; i < detections.length; i += 1) {
+    const object = detections[i];
     stroke(0, 255, 0);
     strokeWeight(4);
     noFill();