Graduate

Opencv.js

...@@ -7,13 +7,13 @@ ...@@ -7,13 +7,13 @@
7 <style> 7 <style>
8 #container { 8 #container {
9 margin: 0px auto; 9 margin: 0px auto;
10 - width: 500px; 10 + width: 640px;
11 - height: 375px; 11 + height: 480px;
12 border: 10px #333 solid; 12 border: 10px #333 solid;
13 } 13 }
14 #videoElement { 14 #videoElement {
15 - width: 500px; 15 + width: 640px;
16 - height: 375px; 16 + height: 480px;
17 background-color: #666; 17 background-color: #666;
18 } 18 }
19 </style> 19 </style>
...@@ -25,11 +25,12 @@ ...@@ -25,11 +25,12 @@
25 25
26 </video> 26 </video>
27 <canvas id='canvasOutput'> 27 <canvas id='canvasOutput'>
28 - 28 +
29 </canvas> 29 </canvas>
30 </div> 30 </div>
31 +<script type='text/javascript' src={{url_for('static', filename='js/opencv.js')}}>
31 <script type='text/javascript'> 32 <script type='text/javascript'>
32 -var video = document.querySelector("#videoElement"); 33 +let video = document.getElementById('videoElement');
33 if (navigator.mediaDevices.getUserMedia){ 34 if (navigator.mediaDevices.getUserMedia){
34 navigator.mediaDevices.getUserMedia({ video: true }) 35 navigator.mediaDevices.getUserMedia({ video: true })
35 .then(function (stream) { 36 .then(function (stream) {
...@@ -39,5 +40,49 @@ if (navigator.mediaDevices.getUserMedia){ ...@@ -39,5 +40,49 @@ if (navigator.mediaDevices.getUserMedia){
39 }); 40 });
40 } 41 }
41 </script> 42 </script>
43 +<script>
44 + let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
45 + let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
46 + let gray = new cv.Mat();
47 + let cap = new cv.RectVector();
48 + let classifier = new cv.CascadeClassifier();
49 + classifier.load({{url_for('static', filename='js/haarcascade_frontalface_default.xml')}})
50 + const FPS = 30;
51 + function processVideo() {
52 + try {
53 + if (!streaming) {
54 + // clean and stop.
55 + src.delete();
56 + dst.delete();
57 + gray.delete();
58 + faces.delete();
59 + classifier.delete();
60 + return;
61 + }
62 + let begin = Date.now();
63 + // start processing.
64 + cap.read(src);
65 + src.copyTo(dst);
66 + cv.cvtColor(dst, gray, cv.COLOR_RGBA2GRAY, 0);
67 + // detect faces.
68 + classifier.detectMultiScale(gray, faces, 1.1, 3, 0);
69 + // draw faces.
70 + for (let i = 0; i < faces.size(); ++i) {
71 + let face = faces.get(i);
72 + let point1 = new cv.Point(face.x, face.y);
73 + let point2 = new cv.Point(face.x + face.width, face.y + face.height);
74 + cv.rectangle(dst, point1, point2, [255, 0, 0, 255]);
75 + }
76 + cv.imshow('canvasOutput', dst);
77 + // schedule the next one.
78 + let delay = 1000/FPS - (Date.now() - begin);
79 + setTimeout(processVideo, delay);
80 + } catch (err) {
81 + utils.printError(err);
82 + }
83 + };
84 + // schedule the first one.
85 + setTimeout(processVideo, 0);
86 +</script>
42 </body> 87 </body>
43 </html> 88 </html>
......