The front end uses opencv
I recently learned about opencv, and I looked at the official examples and documents.
Opencvjs document entry version 3.3.1. I
saw the web page structure of the official examples.
Basically all examples use two js
core js : opencv.js
tool js : utils. The
official solution given by js is
Emscripten Installing
Emscripten IS AN LLVM-to-JavaScript Compiler. We use Emscripten by Will to Build OpenCV.js.
Installation Emscripten
Emscripten is LLVM to JavaScript compiler. We will use Emscripten to build OpenCV.js.
But it must use js in its official examples, right?
I have seen a lot of csdn file sharing that requires c coins or credits,
and it is easy to have problems when compiling by yourself. The
official example can run so why not use it
at the same time Officially trained face recognition xml files can be crawled,
then go to the web page to crawl. The
old method is to right-click to check the element.
Download these three files and put them in the project directory
Analyze the structure of
the webpage, copy the key code and put it in your own file
The code comes from the official crawl
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Face Detection Camera Example</title>
<link href="https://docs.opencv.org/3.3.1/js_example_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- <h2>Face Detection Camera Example</h2> -->
<div>
<div class="control"><button id="startAndStop">Start</button></div>
<textarea class="code" rows="29" 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">videoInput</div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
<script type="text/javascript" src="js/opencv.js"></script>
<!-- <script src="js/adapter-5.0.4.js" type="text/javascript"></script> -->
<script src="js/utils.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');
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 = 'Stop';
videoInput.width = videoInput.videoWidth;
videoInput.height = videoInput.videoHeight;
utils.executeCode('codeEditor');
}
function onVideoStopped() {
streaming = false;
canvasContext.clearRect(0, 0, canvasOutput.width, canvasOutput.height);
startAndStop.innerText = 'Start';
}
utils.loadOpenCv(() => {
let faceCascadeFile = 'haarcascade_frontalface_default.xml';
utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
// startAndStop.removeAttribute('disabled');
});
});
</script>
</body>
</html>
effect
Tips
There are many benefits of this page. You can write your own js to test your own functions, and you can run all the examples given by the official by slightly modifying the code.
Hello everyone, I am a code husky, a student of network engineering in the Software College, because I am a "dog", and I can eat meat for thousands of miles. I want to share what I learned during university and make progress with everyone. However, due to the limited level, there will inevitably be some mistakes in the blog. If there are any omissions, please let me know! For the time being, only update on the csdn platform, the blog homepage: https://blog.csdn.net/qq_42027681 .
未经本人允许，禁止转载
Will be launched later
Front-end: vue entry vue development applet, etc.
Back-end: java entry springboot entry, etc.
Server: MySQL entry server simple instructions cloud server to run the project
python: recommended not to warm up, be sure to see
the use of some plug-ins, etc.
The way of university is also in oneself, study hard, youth
with passion. If you are interested in programming, you can join our qq group to communicate together: 974178910
If you have any questions, you can leave a message below, I will reply if you see it