-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
155 lines (143 loc) · 4.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>OpenCV人脸检测摄像头示例</title>
</head>
<body>
<h2>OpenCV人脸检测摄像头示例</h2>
<p>
点击 <b>启动/停止</b> 按钮以开始或停止对摄像机捕获。<br>
在 <b>videoinput</b> 视频元素是使用面部检测器的输入。在 <b>canvasOutput</b> 画布元素是用于输出作为面部检测器。
<br> textarea里的代码会被执行，当视频开始。您可以修改该代码以了解更多。
</p>
<div>
<div class="control"><button id="startAndStop" disabled>开始</button></div>
<textarea class="code" rows="10" cols="80" id="codeEditor" spellcheck="false"></textarea>
</div>
<p class="err" id="errorMessage"></p>
<div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<video id="videoInput" width=320 height=240></video>
</td>
<td>
<canvas id="canvasOutput" width=320 height=240></canvas>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div class="caption">视频流</div>
</td>
<td>
<div class="caption">画布流</div>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
<script src="js/utils.js" type="text/javascript"></script>
<script src="js/opencv.js" type="text/javascript"></script>
<script src="js/adapter-5.0.4.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">
let video = document.getElementById('videoInput');
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.VideoCapture(video);
let faces = new cv.RectVector();
let classifier = new cv.CascadeClassifier();
// load pre-trained classifiers
classifier.load('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>
<script type="text/javascript">
let utils = new Utils('errorMessage');
// codeSnippet代码加载到codeEditor上（文本输入框textarea）
utils.loadCode('codeSnippet', 'codeEditor');
let streaming = false;
let videoInput = document.getElementById('videoInput');
let startAndStop = document.getElementById('startAndStop');
let canvasOutput = document.getElementById('canvasOutput');
let canvasContext = canvasOutput.getContext('2d');
// 按钮监听
startAndStop.addEventListener('click', () => {
if (!streaming) {
utils.clearError();
// 开启视频流
utils.startCamera('qvga', onVideoStarted, 'videoInput');
} else {
// 停止视频流
utils.stopCamera();
// 停止视频流后执行
onVideoStopped();
}
});
// 开启视频流后回调
function onVideoStarted() {
streaming = true;
startAndStop.innerText = '停止';
videoInput.width = videoInput.videoWidth;
videoInput.height = videoInput.videoHeight;
// 执行文本输入框内代码
utils.executeCode('codeEditor');
}
// 停止视频流后执行
function onVideoStopped() {
streaming = false;
// 图片加载到画布上
utils.loadImageToCanvas('https://dwz.cn/aXR85yL2', 'canvasOutput');
// 清空画布
canvasContext.clearRect(0, 0, canvasOutput.width, canvasOutput.height);
startAndStop.innerText = '开始';
}
// 同目录下文件名
let faceCascadeFile = 'haarcascade_frontalface_default.xml';
utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
console.log('加载人脸框识别文件，并启用开始按钮')
startAndStop.removeAttribute('disabled');
});
</script>
</body>
</html>