Skip to content

Commit fe06856

Browse files
asmorkalovasmorkalov
authored
Merge pull request #3712 from kaingwade:clean_haarcascades_jsbindings
Fix broken js build after moving HaarCascades to contrib
2 parents 1400863 + 5ce3b61 commit fe06856

File tree

2 files changed

+242
-0
lines changed

2 files changed

+242
-0
lines changed

‎modules/xobjdetect/tutorials/js_tutorials/js_assets/js_face_detection.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Face Detection Example</title>
6+
<link href="js_example_style.css" rel="stylesheet" type="text/css" />
7+
</head>
8+
<body>
9+
<h2>Face Detection Example</h2>
10+
<p>
11+
&lt;canvas&gt; elements named <b>canvasInput</b> and <b>canvasOutput</b> have been prepared.<br>
12+
Click <b>Try it</b> button to see the result. You can choose another image.<br>
13+
You can change the code in the &lt;textarea&gt; to investigate more.
14+
</p>
15+
<div>
16+
<div class="control"><button id="tryIt" disabled>Try it</button></div>
17+
<textarea class="code" rows="9" cols="100" id="codeEditor" spellcheck="false">
18+
</textarea>
19+
<p class="err" id="errorMessage"></p>
20+
</div>
21+
<div>
22+
<table cellpadding="0" cellspacing="0" width="0" border="0">
23+
<tr>
24+
<td>
25+
<canvas id="canvasInput"></canvas>
26+
</td>
27+
<td>
28+
<canvas id="canvasOutput"></canvas>
29+
</td>
30+
</tr>
31+
<tr>
32+
<td>
33+
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
34+
</td>
35+
<td>
36+
<div class="caption">canvasOutput</div>
37+
</td>
38+
</tr>
39+
</table>
40+
</div>
41+
<script src="utils.js" type="text/javascript"></script>
42+
<script id="codeSnippet" type="text/code-snippet">
43+
let src = cv.imread('canvasInput');
44+
let gray = new cv.Mat();
45+
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
46+
let faces = new cv.RectVector();
47+
let eyes = new cv.RectVector();
48+
let faceCascade = new cv.CascadeClassifier();
49+
let eyeCascade = new cv.CascadeClassifier();
50+
// load pre-trained classifiers
51+
faceCascade.load('haarcascade_frontalface_default.xml');
52+
eyeCascade.load('haarcascade_eye.xml');
53+
// detect faces
54+
let msize = new cv.Size(0, 0);
55+
faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
56+
for (let i = 0; i < faces.size(); ++i) {
57+
let roiGray = gray.roi(faces.get(i));
58+
let roiSrc = src.roi(faces.get(i));
59+
let point1 = new cv.Point(faces.get(i).x, faces.get(i).y);
60+
let point2 = new cv.Point(faces.get(i).x + faces.get(i).width,
61+
faces.get(i).y + faces.get(i).height);
62+
cv.rectangle(src, point1, point2, [255, 0, 0, 255]);
63+
// detect eyes in face ROI
64+
eyeCascade.detectMultiScale(roiGray, eyes);
65+
for (let j = 0; j < eyes.size(); ++j) {
66+
let point1 = new cv.Point(eyes.get(j).x, eyes.get(j).y);
67+
let point2 = new cv.Point(eyes.get(j).x + eyes.get(j).width,
68+
eyes.get(j).y + eyes.get(j).height);
69+
cv.rectangle(roiSrc, point1, point2, [0, 0, 255, 255]);
70+
}
71+
roiGray.delete(); roiSrc.delete();
72+
}
73+
cv.imshow('canvasOutput', src);
74+
src.delete(); gray.delete(); faceCascade.delete();
75+
eyeCascade.delete(); faces.delete(); eyes.delete();
76+
</script>
77+
<script type="text/javascript">
78+
let utils = new Utils('errorMessage');
79+
80+
utils.loadCode('codeSnippet', 'codeEditor');
81+
utils.loadImageToCanvas('lena.jpg', 'canvasInput');
82+
utils.addFileInputHandler('fileInput', 'canvasInput');
83+
84+
let tryIt = document.getElementById('tryIt');
85+
tryIt.addEventListener('click', () => {
86+
utils.executeCode('codeEditor');
87+
});
88+
89+
utils.loadOpenCv(() => {
90+
let eyeCascadeFile = 'haarcascade_eye.xml';
91+
utils.createFileFromUrl(eyeCascadeFile, eyeCascadeFile, () => {
92+
let faceCascadeFile = 'haarcascade_frontalface_default.xml';
93+
utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
94+
tryIt.removeAttribute('disabled');
95+
});
96+
});
97+
});
98+
</script>
99+
</body>
100+
</html>

‎modules/xobjdetect/tutorials/js_tutorials/js_assets/js_face_detection_camera.html

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Face Detection Camera Example</title>
6+
<link href="js_example_style.css" rel="stylesheet" type="text/css" />
7+
</head>
8+
<body>
9+
<h2>Face Detection Camera Example</h2>
10+
<p>
11+
Click <b>Start/Stop</b> button to start or stop the camera capture.<br>
12+
The <b>videoInput</b> is a &lt;video&gt; element used as face detector input.
13+
The <b>canvasOutput</b> is a &lt;canvas&gt; element used as face detector output.<br>
14+
The code of &lt;textarea&gt; will be executed when video is started.
15+
You can modify the code to investigate more.
16+
</p>
17+
<div>
18+
<div class="control"><button id="startAndStop" disabled>Start</button></div>
19+
<textarea class="code" rows="29" cols="80" id="codeEditor" spellcheck="false">
20+
</textarea>
21+
</div>
22+
<p class="err" id="errorMessage"></p>
23+
<div>
24+
<table cellpadding="0" cellspacing="0" width="0" border="0">
25+
<tr>
26+
<td>
27+
<video id="videoInput" width=320 height=240></video>
28+
</td>
29+
<td>
30+
<canvas id="canvasOutput" width=320 height=240></canvas>
31+
</td>
32+
<td></td>
33+
<td></td>
34+
</tr>
35+
<tr>
36+
<td>
37+
<div class="caption">videoInput</div>
38+
</td>
39+
<td>
40+
<div class="caption">canvasOutput</div>
41+
</td>
42+
<td></td>
43+
<td></td>
44+
</tr>
45+
</table>
46+
</div>
47+
<script src="https://webrtc.github.io/adapter/adapter-5.0.4.js" type="text/javascript"></script>
48+
<script src="utils.js" type="text/javascript"></script>
49+
<script id="codeSnippet" type="text/code-snippet">
50+
let video = document.getElementById('videoInput');
51+
let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
52+
let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
53+
let gray = new cv.Mat();
54+
let cap = new cv.VideoCapture(video);
55+
let faces = new cv.RectVector();
56+
let classifier = new cv.CascadeClassifier();
57+
58+
// load pre-trained classifiers
59+
classifier.load('haarcascade_frontalface_default.xml');
60+
61+
const FPS = 30;
62+
function processVideo() {
63+
try {
64+
if (!streaming) {
65+
// clean and stop.
66+
src.delete();
67+
dst.delete();
68+
gray.delete();
69+
faces.delete();
70+
classifier.delete();
71+
return;
72+
}
73+
let begin = Date.now();
74+
// start processing.
75+
cap.read(src);
76+
src.copyTo(dst);
77+
cv.cvtColor(dst, gray, cv.COLOR_RGBA2GRAY, 0);
78+
// detect faces.
79+
classifier.detectMultiScale(gray, faces, 1.1, 3, 0);
80+
// draw faces.
81+
for (let i = 0; i < faces.size(); ++i) {
82+
let face = faces.get(i);
83+
let point1 = new cv.Point(face.x, face.y);
84+
let point2 = new cv.Point(face.x + face.width, face.y + face.height);
85+
cv.rectangle(dst, point1, point2, [255, 0, 0, 255]);
86+
}
87+
cv.imshow('canvasOutput', dst);
88+
// schedule the next one.
89+
let delay = 1000/FPS - (Date.now() - begin);
90+
setTimeout(processVideo, delay);
91+
} catch (err) {
92+
utils.printError(err);
93+
}
94+
};
95+
96+
// schedule the first one.
97+
setTimeout(processVideo, 0);
98+
</script>
99+
<script type="text/javascript">
100+
let utils = new Utils('errorMessage');
101+
102+
utils.loadCode('codeSnippet', 'codeEditor');
103+
104+
let streaming = false;
105+
let videoInput = document.getElementById('videoInput');
106+
let startAndStop = document.getElementById('startAndStop');
107+
let canvasOutput = document.getElementById('canvasOutput');
108+
let canvasContext = canvasOutput.getContext('2d');
109+
110+
startAndStop.addEventListener('click', () => {
111+
if (!streaming) {
112+
utils.clearError();
113+
utils.startCamera('qvga', onVideoStarted, 'videoInput');
114+
} else {
115+
utils.stopCamera();
116+
onVideoStopped();
117+
}
118+
});
119+
120+
function onVideoStarted() {
121+
streaming = true;
122+
startAndStop.innerText = 'Stop';
123+
videoInput.width = videoInput.videoWidth;
124+
videoInput.height = videoInput.videoHeight;
125+
utils.executeCode('codeEditor');
126+
}
127+
128+
function onVideoStopped() {
129+
streaming = false;
130+
canvasContext.clearRect(0, 0, canvasOutput.width, canvasOutput.height);
131+
startAndStop.innerText = 'Start';
132+
}
133+
134+
utils.loadOpenCv(() => {
135+
let faceCascadeFile = 'haarcascade_frontalface_default.xml';
136+
utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
137+
startAndStop.removeAttribute('disabled');
138+
});
139+
});
140+
</script>
141+
</body>
142+
</html>

0 commit comments

Comments
 (0)