JavaScript Face Recognition technology and JavaScript class library ES2en.ES3en

I am very interested in artificial intelligence identification technology, because I cannot imagine what kind of algorithm and analysis process it is. Whether it's voice recognition, face recognition or other kinds of recognition, people look so different, the way they speak, 1 picture you can take in different ways, from different angles, I don't understand how these recognition technologies do it. There's a game called "Mask" that USES this technology, and I think we should look at face recognition as well. Facebook USES this technology and also USES it in gesture control, so there will be applications on your website as well.

The first JavaScript package I found that can be used for face recognition is Face Detection, developed by Jay Salvat and Liu Liu. It is a standard jQuery plug-in that returns the coordinates of all found facial images by analyzing the images provided. Let's see how it works!

jQuery.faceDetection

Using Face Detection jQuery plugin, you need to import 4 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>

In the first two files of the face recognition plugin are its various functional programs, which can be used to obtain an array of objects that store the coordinates of the faces in the image. Here 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,
 neighbour: undefined,
 }
*/

You can also add event callbacks to the detection methods:

var coords = jQuery("#myImage").faceDetection({
 complete: function(image, coords) {
 // Do something
 },
 error: function() {
 console.warn(" Unable to analyze images ");
 }
});

You can do whatever you want with the faces you recognize. You can frame the position of the face in the picture:

jQuery("img").each(function() {
 var img = this;
 //  Get facial coordinates 
 var coordinates = jQuery(img).faceDetection();
 //  Frame lines on your face 
 if(coordinates.length) {
 coordinates.forEach(function(coord) {
 jQuery("<div&gt", {
 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);
 });
 }
});

It's easy, but of course you can do complicated things like extract.

I tried face recognition with a variety of images, and as I expected, the results weren't perfect. But anyway, it's pretty good. This is a very simple scripting technique, and no technique is 10 perfect 10. This face recognition plugin doesn't have face comparison, you need to do it in other ways and provide facial features. Anyway, it's pretty good, and I strongly recommend you try it.

Face recognition JavaScript class library ES41en.js

For Web developers, the open source JavaScript library, Tracking.js, is making it easy to use computer vision and augmented reality to show off motion sensing applications similar to Kinect or Wii. The JavaScript library is small in size (~7k), very lightweight, and has simple interfaces.

Tracking.js works in mobile Web applications, desktop applications, and even matches Node.js based servers. It brings computer graphics algorithms and technology to the browser. It has features: face recognition (when a particular color or person/face/body moves), real-time color tracking. For Web development, a similar effect was previously achieved through the techniques of C or C++. Now ES64en. js provides one Web component, so Web front-end developers can access the HTML tag component to achieve similar functionality without knowing JavaScript, greatly simplifying Web development.

Tracking.js includes a color tracking algorithm and an object tracking component that enables the Web browser to recognize changes in faces and eyes. For example, the Web front end can also use this feature to set users' avatars, which is also a cool feature for some websites. At the same time to track the face data and background database to match, and feedback to users more useful data.

At present, Tracking.js source code project on GitHub has been more than 200 times by Fork. In early August, the JS library was upgraded to version 1.0.

The above content is to share JavaScript face recognition technology and face recognition JavaScript class library ES91en. js, I hope you like it.