Create waitForResources function for hats and glasses

Sometimes we got error that resource is not yet loaded but we are
already trying to process it.
Now we wait for all resources incrementing counter in onload callback
and checking it in a loop.

samples/funnyHats/js/index.js

@@ -17,6 +17,11 @@ let gray = null;
 const imageWidth = 320;
 const imageHeight = 240;
 
+let nImagesLoaded = 0;
+// NOTE! Update this value if you add or remove files
+// from hatsData and glassesData in ui.js.
+const N_IMAGES = 34;
+
 
 function initOpencvObjects() {
   src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
@@ -72,6 +77,21 @@ function completeStyling() {
   document.getElementById('takePhotoButton').disabled = false;
 }
 
+function waitForResources() {
+  if (nImagesLoaded == N_IMAGES) {
+    requestAnimationFrame(processVideo);
+    return;
+  }
+
+  // Show video stream while we are waiting for resources.
+  canvasInputCtx.drawImage(video, 0, 0, video.width, video.height);
+  let imageData = canvasInputCtx.getImageData(0, 0, video.width, video.height);
+  src.data.set(imageData.data);
+  cv.imshow(canvasOutput, src);
+
+  requestAnimationFrame(waitForResources);
+}
+
 function processVideo() {
   try {
     if (!streaming) {
@@ -145,13 +165,24 @@ function processVideo() {
 function startCamera() {
   if (!streaming) {
     utils.clearError();
-    utils.startCamera(videoConstraint, 'videoInput', onVideoStarted);
+    utils.startCamera(videoConstraint, 'videoInput', onVideoStartedCustom);
   } else {
     utils.stopCamera();
     onVideoStopped();
   }
 }
 
+function onVideoStartedCustom() {
+  streaming = true;
+  setMainCanvasProperties(video);
+  videoTrack = video.srcObject.getVideoTracks()[0];
+  imageCapturer = new ImageCapture(videoTrack);
+  document.getElementById('mainContent').classList.remove('hidden');
+  completeStyling();
+  initOpencvObjects();
+  requestAnimationFrame(waitForResources);
+}
+
 function cleanupAndStop() {
   deleteOpencvObjects();
   deleteHats(); deleteGlasses();

samples/funnyHats/js/ui.js

@@ -208,6 +208,7 @@ function loadHats() {
     });
 
     hatImage.onload = function () {
+      ++nImagesLoaded;
       let rgbaVector = new cv.MatVector();
       hatSrc = cv.imread(hatImage);
       cv.split(hatSrc, rgbaVector); // Create mask from alpha channel.
@@ -236,6 +237,7 @@ function loadGlasses() {
     });
 
     glassesImage.onload = function () {
+      ++nImagesLoaded;
       let rgbaVector = new cv.MatVector();
       glassesSrc = cv.imread(glassesImage);
       cv.split(glassesSrc, rgbaVector); // Create mask from alpha channel.