O'Reilly

Face Detection with jQuery

By on  
jQuery Face Detection

I've always been intrigued by recognition software because I cannot imagine the logic that goes into all of the algorithms. Whether it's voice, face, or other types of detection, people look and sound so different, pictures are shot differently, and from different angles, I cannot fathom how it's all done. Since I already covered booby nudity detection with JavaScript, I thought it would be worth some time to explore face detection. Facebook uses it, so maybe it has application in your websites.

One face detection library I found is Face Detection by Jay Salvat and Liu Liu. This is a standard jQuery plugin that receives an image and returns an array of coordinates of faces found within the image. Let's have a look at how to use it!

jQuery.faceDetection

Four JS files are required for this jQuery plugin:


<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 faceDetection plugin wraps functionality within the first two JavaScript files, and returns an array of objects which represent the coordinates of the faces within the photo (if any are found). An example would be:

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 may also add event callbacks to every call:

var coords = jQuery("#myImage").faceDetection({
	complete: function(image, coords) {
		// Do something
	},
	error: function() {
		console.warn("Could not process image");
	}
});

It's up to you what you'd like to do when the faces have been found. You could add a square around the person's face:

jQuery("img").each(function() {
	var img = this;
	// Get faces cooridnates
	var coordinates = jQuery(img).faceDetection();
	// Make boxes if faces are found
	if(coordinates.length) {
		coordinates.forEach(function(coord) {
			jQuery("
", { 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); }); } });

There's not much more to it than that!

I tried to vary the photos I used faceDetection on and as I expected, the results are the not perfect. They are, however, quite good; no software will be perfect for all cases. The software also does not do facial comparison, so you would need to provide suggestions as to the face's identity via another method. For what this plugin is meant to do, however, it does pretty well. I encourage you to give this a try!

Track.js Error Reporting

Upcoming Events

Recent Features

Incredible Demos

  • dwImageProtector Plugin for jQuery

    I've always been curious about the jQuery JavaScript library. jQuery has captured the hearts of web designers and developers everywhere and I've always wondered why. I've been told it's easy, which is probably why designers were so quick to adopt it NOT that designers...

  • Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Discussion

  1. Alex

    iPad almost burned when browsing the demo page.

    • Yeah, that will happen with client-side technology like this. In practice, this is better done on the server side, but it’s still fascinating to see on the client side.

  2. Rasmus Fløe

    The perfect companion article would be about webworkers :D

  3. Yep latest FF got an slow/unresponsive script error while loading the demo. Interesting though!

  4. Most facial recognition software is done with neural networks….the varied results are because of a limited data set used in training….in theory they can be nearly as good as people at recognizing faces (same technology for voice recognition, OCR (Object Character Recognition), etc.)..it’s essentially pattern matching. I haven’t seen any good neural networks for javascript though, so this is pretty interesting to me.

  5. It would be great if the software could also recognize if people wear glasses, ear rings, wrinkles, et cetera. So that you would be able to apply filters on the image library and make selections.

  6. Nice work but Slow Script Error on FF

  7. David

    This is done somewhat quite easy using matlab.
    Too bad that my signal processing teacher was a bitch and I did not learn anything…

    • andre

      yeah and god accidentally forgot to give you brain

  8. foluso

    any thing on global browser detection am having battles with site displaying on other browsers as it did on my browser

  9. Tarlenan

    This website http://blog.geotitles.com/2011/08/facebook-like-face-detect

    had made a similar tutorial using the same jQuery pluign by Jay Salvat, but they have presented many examples on using the plugin.

    May be it is useful for your visitors.

  10. thank you for sharing, this is realy one of the complex jQuery plugins, but how the f**k they do it ?? have any one a document of the algorithm ?
    Thank you.

  11. serkan

    Can you add sound output in your face detection program.. it say your name..

  12. Hi i would like to recognize only one face from the group photo as well from the single image photo too. So what should i do in the code.

    It would be great help if anyone say the solution.

    Thanks in advance.

  13. Rufus

    It works great but when there is no face to detect in a picture it does not trigger the error function, but only the “complete” function.

    It does trigger the error function when the pic is below a certain size however.

    I tried checking for undefined (and tried null too) in the array like so:

    if (typeof array[x] === "undefined") {
    alert("");}
    

    but no dice.

    Any suggestions?

    I am developing a chrome app so only testing there.

  14. Nice Tutorial David.. :) you are really rocking.. please share more tutorials on jQuery..

  15. Hi David,

    The demo no longer works (in Chrome) because you can no longer embed javascript from raw.github.com .

    Sairam

  16. Vikram

    Hi David Walsh,
    I am getting the error ‘ this image is invalid’. Can you hint how to solve this problem.

    • Vikram

      (when I tried it locally and on localhost)

  17. Justin O'Neill

    Hi David,
    This doesn’t seem to be working in Chrome at all and in FireFox is spits an error back at me. It did manage to pop out a white border box, however it wasn’t on the face.

  18. Man

    Man.. hotlinking from github has been disabled. Now your demo doesnt work. Can you update your demo? Cheers!

  19. perfo

    hello, all.
    How could I do this but without displaying the video on the screen ?
    I want to detect if someone is in front of the camera and roughly where they are but I don’t need to video to be displayed. Any hints ?
    Thanks

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...