Fix loadeddata errors in bodypix examples

Author: bomanimc

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