Archive for April 12th, 2007

How to embed face recognition feature to your web page

Thursday, April 12th, 2007

Here we explains how to embed face recognition feature to your web page. Face recognition program generated by facekit.net runs on Flash execution environment on your web browser. You can embed face recognition program to your own web page by following simple procedures. 1. Import Javascript file Import Javascript file “swfobject.js”, by inserting following code on the head part of your HTML.

  1. <script src="http://facekit.net/javascripts/swfobject.js" type="text/javascript"></script>

2. Decide where to place face recognition program Insert following code to the place where you want to put the face recognition program.

  1. <div id="flashcontent">This page requires flash9.
  2.  Please install or upgrade flash player if you see this message.
  3.  <a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="" /></a></div>

3. Insert Javascript code By inserting following Javascript code, the face recognizer will show up on the place you have defined in step 2.

  1.  
  2. var so = new SWFObject("http://facekit.net/flash/facekit_1", "facekit_1", "320", "263", "9", "#869ca7");
  3. so.addVariable("url", location.href);
  4. so.write("flashcontent");

(4). Use face recognition result to control your web page To use face recognition result, modify the Javascript code written in step 3 as follows.

  1.  
  2. var so = new SWFObject("http://facekit.net/flash/facekit_1", "facekit_1", "320", "263", "9", "#869ca7");
  3. so.addVariable("url", location.href);
  4. so.addVariable("callback", "getResult");
  5. so.addParam("allowScriptAccess", "always");
  6. so.write("flashcontent");

By this modification, the face recognition program will call the function “getResult” for each time of the recognition loops. Recognition result is given as following JSON format on calling the function “getResult”.

  1.  
  2. {
  3.   state: "detected",  // Detection result "detected" or "none"
  4.   label: "front",  // Recognition result
  5.   x:40, y:50,  // Detected position
  6.   width:20, height:20,  // Size of the detected face
  7.   time:100.0  // Timestamp (only when the input type is flv)
  8. }

By creating a function like below, you can now create a dynamic web page which changes it’s behavior depending on the recognition results.

  1.  
  2. function getResult(value) {
  3.     var data = eval("("+value+")");
  4.     if (data.label == "left") {
  5.         do_something…
  6.     } else if (data.label == "right") {
  7.         do_something_else…
  8.     }
  9. }

You can see a concrete example of above features from this page.

Posted in Document | No Comments »