Skip to main content

Facebook like jQuery face recognition tutorial and demo


Facebook influences our life each and everyday. One of the features which has contributed enormously to make Facebook appealing to even to its average users is Photos.
Facebook like jQuery Face detection in photosWhenever we upload photos to Facebook, Facebook automatically recognizes the faces in the photo and allow you to tag them.
If you ever wondered how to detect faces in photos in your own website, then the answer is very simple, Faces in photos  can be easily detected using a jQuery plugin.
In this tutorial i will show you how to detect faces in a photo.
Face recognition
Below you can download the Source Code, or have a look at the Live Demo
Download Source Code
DOWNLOAD
Live Demo
LIVE DEMO
Important Note
Many users have complained that the Live Demo does not work in Internet Explorer, So I recommend using any other updated versions of the browser like Safari, Mozilla Firefox, Google chrome(Best) or Opera for maximum impact.
For this tutorial we are going to use FaceDetection jQuery plugin which uses an algorithm by Liu Liu
This is what the download file and the live demo contains
  • In the first example you can see the face detection plugin applied to photos on the server
  • In the second example you can upload an image file of your choice and detect faces in the photo you upload.

Something that can let you improve this tutorial is enabling photo tagging after face recognition ( that is exactly what Facebook does), right now this tutorial only shows face recognition, in coming tutorials I will try to show photo tagging as well
Below is the PHP code of the file index.php
Important Note
The following code is just the simplest example as to how to use the plugin, the source code available for download has many more examples and scenarios at which face detection can be used,hence I strongly advise you to download the source code and also have a look at the Live demo.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Facebook like jQuery face recognition demo| Files on server 1 | http://blog.geotitles.com</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script src="../../js/facedetection/ccv.js"></script>
    <script src="../../js/facedetection/face.js"></script>
    <script src="../../js/jquery.facedetection.js"></script>
    <script>
    $(function() {
        $('#try').click(function() {
            var $this = $(this);
            var coords = $('img').faceDetection({
                complete:function() {
                    $this.text('Done!');
                },
                error:function(img, code, message) {
                    $this.text('error!');
                    alert('Error: '+message);
                }
            });
            for (var i = 0; i < coords.length; i++) {
                $('<div>', {
                    'class':'face',
                    'css': {
                        'position': 'absolute',
                        'left':     coords[i].positionX +'px',
                        'top':      coords[i].positionY +'px',
                        'width':    coords[i].width     +'px',
                        'height':   coords[i].height    +'px'
                    }
                })
                .appendTo('#content');
            }
        });
        return false;
    });
    </script>
    <style>
        .face {
            border:2px solid #FFF;
        }
    </style>
</head>
<body>
<div id="container">
  <div id="header">
        <h3>These are the demos of<a href="http://blog.geotitles.com/2011/08/facebook-like-face-detect/"> Facebook like face detection tutorial</a> at GEO WEB STATION Click <a href="http://blog.geotitles.com/2011/08/facebook-like-face-detect/">here</a> to go back to the <a href="http://blog.geotitles.com/2011/08/facebook-like-face-detect/">tutorial</a> to download the demo files</h3>
  </div>
    <div id="content">
        <a href="#" id="try">Detect Faces</a>
        <img src="../../images/faces.jpg" />
    </div>
</div>
</body>
</html>
After downloading the source files open the readme file for installation instructions
Labels:

Comments

Post a Comment

Popular posts from this blog

75 Surprisingly Creative Facebook Timeline Covers

Now that you have shifted to “Facebook Timeline” to display you profile in a better way, get creative with it. Facebook timeline gives you a chance to turn you profile exclusive and innovative. Putting up a personal picture as cover, will only make you look outdated. You can try some exciting covers to design your very own Facebook profile in distinguished style. We have scrounged through web to pick 75 amazing Facebook Timeline covers for this list. Unique cover pictures can give your timeline a different-from-the-rest look. You can create your own creative covers picking ideas from these cool pictures listed below. If you like this article, you might be interested in some of our other articles on  Facebook Scripts, Best Facebook Apps, Best Facebook Games, and Facebook Tips You Should Check . Ekkapong Techawongthaworn Be a brand ambassador and flaunt your fanaticism for gadgets and shopping on your cover. Ekkapong Techawongthaworn Gabriel Fort A snapshot of an App...
Post a Comment
Read more

23 Best jQuery Slideshow (Gallery)

JQuery is becoming almost every programmer’s favorite. It gives you freedom of displaying images galleries in most effective way and that too with very little coding. When slideshows have become an integral part of the websites, the importance of jQuery cannot be ignored. Its easy usability has given it’s an edge over Flash. Do you remember the days when we used to see images grouped in tables (tr / td) and once clicked they opened in a new window or pop up! Those days are gone. Now we can use awesome jQuery plugins to showcase images in far more interesting ways. Slideshows provides great user experience. Checking and viewing image galleries have covered a long way in terms of development. Thanks to jQuery. Today we have come up with a power pack of Slideshows provides great user experience. Checking and viewing image galleries have covered a long way in terms of development. Thanks to jQuery. Today we have come up with a power pack of  Best jQuery Slideshow Plugins , which you wo...
Post a Comment
Read more

GMAP3 – A jQuery Google Maps Plugin For The Developers

GMAP3  is one of the finest Google Maps jQuery Plugin which uses Google Map API version 3 to create maps with the advanced features available in it.  Google themselves has simplified the efforts in adding the maps in any website, but still applying some advance features are tricky sometimes. Unlike the other Google Maps plugin, GMAP3 aims to allows many manipulation of the google map API version 3. Let me take a look on the integration part. As I said, integration Google Maps with GMAP3 is simple and all you need is adding few things to get start with it Step 1:  Add the Google Maps script before closing  </head> <script type = "text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false" ></script> Step 2:  Download the GMAP3 jQuery Plugin and upload it to your server <script type = "text/javascript" src = "gmap3.min.js" ></script> Now in order to embed the Google Maps, do the followi...
Post a Comment
Read more