JavaScript face recognition technology and facial recognition JavaScript library Tracking.js_javascript skills

I have always been very interested in artificial intelligence recognition technology, because I can’t imagine what kind of algorithm it is and what kind of analysis process it is. Whether it's voice recognition, face recognition or other types of recognition, people's appearance and the way they speak are so different. You can take a picture in different ways and from different angles. I can't understand how these recognition technologies work. Arrived. There is a game called "Mask" that also uses this recognition technology. I think facial recognition technology should also be studied. Facebook uses this technology, and it can also be used in gesture controls, so there will be a place for it on your website.

One JavaScript package I found that can be used for face recognition is Face Detection, which was developed by Jay Salvat and Liu Liu. It is a standard jQuery plugin that analyzes the provided image and returns the coordinates of all found face images. Let’s see how it is used!

jQuery.faceDetection

To use the Face Detection jQuery plugin, you need to import 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. Through them, you can get an array object. These objects store the facial coordinate information in the picture. Here is an example:

var coords = jQuery("#myImage").faceDetection();
/* 返回：
 {
 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 callback functions to the detection method:

var coords = jQuery("#myImage").faceDetection({
 complete: function(image, coords) {
 // Do something
 },
 error: function() {
 console.warn("无法分析图片");
 }
});

You can do any processing for the recognized facial information. You can draw a frame around the face in the picture:

jQuery("img").each(function() {
 var img = this;
 // 获取脸部坐标
 var coordinates = jQuery(img).faceDetection();
 // 在脸上画出框线
 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);
 });
 }
});

This is very simple, of course you can do complex processing, such as extraction.

I used various pictures to try facial recognition, and as I expected, the results were not perfect. But regardless, it's still pretty good. This is a very simple scripting technique, and no technique is perfect. This facial recognition plug-in does not have a face comparison function. You need to use other methods and provide facial feature information to achieve this function. All in all, it's pretty good and I highly recommend you give it a try.

Facial recognition JavaScript library Tracking.js

For web developers, the open source JavaScript library Tracking.js is making computer vision and augmented reality technology easier. It can be used to display motion sensing applications with effects similar to Kinect or Wii, and the JavaScript library is small in size (~ 7k), very lightweight and with a simple interface.

Tracking.js can work in mobile web applications, desktop applications, and can even be paired with Node.js-based servers. It will bring computer graphics algorithms and technology to the browser, and it has functions: facial recognition (when a specific color or when a person/face/body moves), real-time color tracking. For web development, it used to be possible to achieve similar effects through C or C technology. Now Traking.js provides a web component, so web front-end developers can access HTML tag components to implement similar functions without knowing JavaScript, which greatly simplifies web development.

Tracking.js includes a color tracking algorithm and object tracking components that enable web browsers to recognize changes in faces and eyes. For example, the Web front-end can also use this function to set user avatars, which is also a cool feature for some websites; at the same time, it can match the tracked facial data with the background database to provide more useful feedback to users. data.

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

The above content is the JavaScript face recognition technology and facial recognition JavaScript library Tracking.js shared with you. I hope you like it.