Opencv.js face detection

@@ -16,6 +16,8 @@
 	height: 480px;
 	background-color: #666;
 }
+
+
 </style>
 </head>
  
@@ -24,7 +26,7 @@
 	<video autoplay="true" id="videoElement"> <!-- style="visibility: hidden"-->
 	
 	</video>
-	<canvas id='canvasOutput'>
+	<canvas id='canvasOutput' width='640' height='480'>
 	
 	</canvas>
 </div>
@@ -41,12 +43,19 @@ if (navigator.mediaDevices.getUserMedia){
 }
 </script>
 <script>
+cv['onRuntimeInitialized']=()=>{
     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 cap = new cv.VideoCapture(video);
+    let faces = new cv.RectVector();
     let classifier = new cv.CascadeClassifier();
+    var streaming = true;
+    if (typeof streaming === 'undefined')
+    {
+        streaming = false;
+    }
     classifier.load("{{url_for('static', filename='js/haarcascade_frontalface_default.xml')}}")
     const FPS = 30;
     function processVideo() {
@@ -79,13 +88,12 @@ if (navigator.mediaDevices.getUserMedia){
             let delay = 1000/FPS - (Date.now() - begin);
             setTimeout(processVideo, delay);
         } catch (err) {
-            utils.printError(err);
+            console.log(err);
         }
     }
     // schedule the first one.
-    cv['onRuntimeInitialized']=()=>{
-        setTimeout(processVideo, 0);
-    }
+    setTimeout(processVideo, 0);
+}
 </script>
 </body>
 </html>