The temperature difference is big recently, please don't catch cold
preface
There will be no table of contents for this article, just start from the beginning.
Because I suddenly received a demand, a xx bureau, internal use of mobile terminal project (we developed), need to add a face recognition login demand.
Internal staff use identification login, only and only do planar image recognition. So, for internal use some of the less privileged platforms. So the development of personal face recognition, customers need to add some sense of technology, do plane face recognition is no problem.
Because the project has the business of image recognition, so the algorithm of human comparison is put in the background. Later investigation, tracking can also achieve image comparison, but in real business image library can not be placed locally, so the logic at this stage can only be put in the background.
I have done some technical research and made a Demo, which will be recorded here. The Demo address is at the end of the article. Just to share this little thing, don’t point to the front to do 3D recognition.
The development of
1. Get a shelf
I directly use dVA-CLI, very convenient, anyway I write demo are directly pull this shelf. Thanks to the author.
Tracking. Js plugin
The tracking.js library brings different computer vision algorithms and techniques to the browser environment. By using the modern HTML5 specification, we enable you to do real-time color tracking, face detection, and more -- all with a lightweight core (around 7KB) and an intuitive interface.
Portal tracking. Js
3. Plug-in face-api.js
Tracking. Js based on the browser side of the plug-in face recognition, provides some API
4, call
Direct import, stats.min.js is face-min
5. Design structure
Here’s a validation of the requirements flow.
- 1. Call the camera
- 2. Detect whether there is a face in the camera
- 3. If there is a face, synchronize it to canvas
- 4. Export Base64
- 5. Send it to the database for comparison. (This part of the background students to do, of course, the front-end can also be done locally, but it is not necessary)
- 6. Return the comparison score to check whether it matches the login node.
6. HTML structure
The core is that you need a video TAB to display the camera content and a canvas to capture the image. (HTML is not complete, just showing the core)
7. Import declarations
8, effects,
9, alignment,
I won’t go into this, the rest is the business phase, you get the picture, send it to the server, the server compares it and gives you the login result or a similarity score, so that we can judge whether you can log in.
GitHub address
Portal: face-Web
END
A simple record of a way to achieve, but also to ask the way, we can communicate together.
I have been on a business trip recently, and I am still very busy. Thank you.
Prepare to correct mistakes
After two days of writing this article, I would like to first thank you for your correction. I am very grateful to @Yoha AI· Front-end for pointing out the mistakes and deficiencies of this article. Next, I plan to have a deeper understanding of the principle of face recognition and correct the mistakes of this article. I hope you understand.