JavaScript face recognition technology and face recognition JavaScript class library Tracking. js, javascript class library
I have been very interested in artificial intelligence recognition technology because I cannot imagine what kind of algorithm and analysis process it is. Whether it's voice recognition, face recognition, or other types of recognition, people's appearance and speech methods are so different. You can take a picture in different ways and from different angles, I cannot understand how these recognition technologies are implemented. A game called "Mask" also uses this recognition technology. I think we should also study facial recognition technology. Facebook uses this technology and can also use it in gesture control, so there will be applications on your website.
A JavaScript package I found for Face recognition is Face Detection, which was developed by Jay Salvat and Liu. It is a standard jQuery plug-in that analyzes the provided images and returns the coordinates of all the face images. Let's take a look at how it is used!
JQuery. faceDetection
To use Face Detection jQuery plugin, You need to introduce four js files:
<script src="jquery-1.4.3.min.js"></script><!-- mas js --><script src="facedetection/ccv.js"></script><script src="facedetection/face.js"></script><script src="jquery.facedetection.js"></script>
The first two files of this facial recognition plug-in are its various functional programs. They can be used to obtain an array object storing the facial coordinate information in the image. The following is an example:
Var coords = jQuery ("# myImage "). faceDetection ();/* returns: {x: 525 y: 435, width: 144, height: 144, positionX: 532.6353328125226, positionY: 443.240976080536, offsetX: 532.6353328125226, offsetY: 443.240976080536, confidence: 12.93120119, neighbor: undefined ,}*/
You can also add the Event Callback Function to the detection method:
Var coords = jQuery ("# myImage "). faceDetection ({complete: function (image, coords) {// Do something}, error: function () {console. warn ("Images cannot be analyzed ");}});
You can process any recognized face information. You can draw a line at the face position in the image:
JQuery ("img "). each (function () {var img = this; // obtain the face coordinate var coordinates = jQuery (img ). faceDetection (); // draw a box on the face if (coordinates. length) {coordinates. forEach (function (coord) {jQuery ("<div>", {css: {position: "absolute", left: coord. positionX + 5 + "px", top: coord. positionY + 5 + "px", width: coord. width + "px", height: coord. height + "px", border: "3px solid white "}}). appendTo (img. parentNode );});}});
This is very simple. Of course you can perform complicated processing, such as extracting it.
I used a variety of images for face recognition attempts. as I expected, the results were not perfect. But in any case, it is quite good. This is a simple script technology, and no technology is perfect. This facial recognition plug-in does not provide Facial comparison functions. You need to use other methods and provide facial feature information to implement this function. In short, it is quite good. We strongly recommend that you give it a try.
Face recognition JavaScript class library Tracking. js
For Web developers, the open-source JavaScript library Tracking. js is making computer vision and augmented reality technology easy. It can be used to demonstrate somatosensory applications with effects similar to Kinect or Wii, And the JavaScript library is small (~ 7 k), very lightweight, and simple interface.
Tracking. js can work in mobile Web applications and desktop applications, and can even be paired with a Node. js-based server. It brings computer graphics algorithms and technologies to browsers. Its functions include face recognition (when a specific color or character/face/body moves) and real-time color tracking. For Web development, similar effects can be achieved through C or C ++ technology in the past. Now Traking. js provides a Web component, so Web Front-end developers can access HTML Tag components to implement similar functions without understanding JavaScript, which greatly simplifies Web development.
Tracking. js includes a color Tracking algorithm and object Tracking component that enables Web browsers to recognize changes in faces and eyes. For example, the Web Front-end can also use this function to set the user's profile picture. For some websites, this is also a very dazzling feature. It also matches the face data of the trail with the background database, in this way, more useful data can be provided to users.
Currently, the Tracking. js source code project on GitHub has been Fork more than 200 times. In the first half of August, The JS library has been upgraded to Version 1.0.
The above content is the JavaScript face recognition technology and face recognition JavaScript class library Tracking. js, which I hope everyone will like.