Opencv.js

@@ -7,13 +7,13 @@
 <style>
 #container {
 	margin: 0px auto;
-	width: 500px;
-	height: 375px;
+	width: 640px;
+	height: 480px;
 	border: 10px #333 solid;
 }
 #videoElement {
-	width: 500px;
-	height: 375px;
+	width: 640px;
+	height: 480px;
 	background-color: #666;
 }
 </style>
@@ -28,8 +28,9 @@
 	
 	</canvas>
 </div>
+<script type='text/javascript' src={{url_for('static', filename='js/opencv.js')}}>
 <script type='text/javascript'>
-var video = document.querySelector("#videoElement");
+let video = document.getElementById('videoElement');
 if (navigator.mediaDevices.getUserMedia){
     navigator.mediaDevices.getUserMedia({ video: true })
 	.then(function (stream) {
@@ -39,5 +40,49 @@ if (navigator.mediaDevices.getUserMedia){
         });
 }
 </script>
+<script>
+    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);
+</script>
 </body>
 </html>