Opencv.js face detect

@@ -41,50 +41,54 @@ if (navigator.mediaDevices.getUserMedia){
 }
 }
 </script>
 </script>
 <script>
 <script>
-    let video = document.getElementById('videoElement');
-    let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
-    let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
-    let gray = new cv.Mat();
-    let cap = new cv.RectVector();
-    let classifier = new cv.CascadeClassifier();
-    classifier.load({{url_for('static', filename='js/haarcascade_frontalface_default.xml')}})
-    const FPS = 30;
-    function processVideo() {
-        try {
-            if (!streaming) {
-                // clean and stop.
-                src.delete();
-                dst.delete();
-                gray.delete();
-                faces.delete();
-                classifier.delete();
-                return;
-            }
-            let begin = Date.now();
-            // start processing.
-            cap.read(src);
-            src.copyTo(dst);
-            cv.cvtColor(dst, gray, cv.COLOR_RGBA2GRAY, 0);
-            // detect faces.
-            classifier.detectMultiScale(gray, faces, 1.1, 3, 0);
-            // draw faces.
-            for (let i = 0; i < faces.size(); ++i) {
-                let face = faces.get(i);
-                let point1 = new cv.Point(face.x, face.y);
-                let point2 = new cv.Point(face.x + face.width, face.y + face.height);
-                cv.rectangle(dst, point1, point2, [255, 0, 0, 255]);
-            }
-            cv.imshow('canvasOutput', dst);
-            // schedule the next one.
-            let delay = 1000/FPS - (Date.now() - begin);
-            setTimeout(processVideo, delay);
-        } catch (err) {
-            utils.printError(err);
+function openCvReady() {
+    cv['onRuntimeInitialized']=()=>{
+        // do all your work here
+        let video = document.getElementById('videoElement');
+        let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
+        let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
+        let gray = new cv.Mat();
+        let cap = new cv.RectVector();
+        let classifier = new cv.CascadeClassifier();
+        classifier.load({{url_for('static', filename='js/haarcascade_frontalface_default.xml')}})
+        const FPS = 30;
+        function processVideo() {
+            try {
+                if (!streaming) {
+                    // clean and stop.
+                    src.delete();
+                    dst.delete();
+                    gray.delete();
+                    faces.delete();
+                    classifier.delete();
+                    return;
+                }
+                let begin = Date.now();
+                // start processing.
+                cap.read(src);
+                src.copyTo(dst);
+                cv.cvtColor(dst, gray, cv.COLOR_RGBA2GRAY, 0);
+                // detect faces.
+                classifier.detectMultiScale(gray, faces, 1.1, 3, 0);
+                // draw faces.
+                for (let i = 0; i < faces.size(); ++i) {
+                    let face = faces.get(i);
+                    let point1 = new cv.Point(face.x, face.y);
+                    let point2 = new cv.Point(face.x + face.width, face.y + face.height);
+                    cv.rectangle(dst, point1, point2, [255, 0, 0, 255]);
+                }
+                cv.imshow('canvasOutput', dst);
+                // schedule the next one.
+                let delay = 1000/FPS - (Date.now() - begin);
+                setTimeout(processVideo, delay);
+            } catch (err) {
+                utils.printError(err);
         }
         }
+        // schedule the first one.
+        setTimeout(processVideo, 0);
     };
     };
-
-// schedule the first one.
-setTimeout(processVideo, 0);
+  };
+}
 </script>
 </script>
 </body>
 </body>
 </html>
 </html>