Showing
1 changed file
with
50 additions
and
5 deletions
... | @@ -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> |
... | @@ -28,8 +28,9 @@ | ... | @@ -28,8 +28,9 @@ |
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> | ... | ... |
-
Please register or login to post a comment