Friday, 27 July 2012

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 SafariMozilla FirefoxGoogle 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

Ditulis Oleh : Unknown // 09:44
Kategori:

0 comments:

Post a Comment

 

Followers

Powered by Blogger.