facekit.netをWebページに埋め込む方法
Thursday, April 12th, 2007<p>ここでは、Webページに顔認識機能を埋め込む方法について解説します。 facekit.netによって作成された顔認識プログラムはFlashの実行環境で動作するswf形式のファイルとして配布され、Webブラウザ上で動作させることができます。 以下の簡単な手順であなたのWebページに顔認識機能を付加することができます。 １．Javascriptファイルを読み込む HTMLのヘッダ部分に以下のコードを書き込むことでJavascriptファイル"swfobject.js"を読み込みます。</p>
<pre lang=”html4strict”><script src=”http://facekit.net/javascripts/swfobject.js” type=”text/javascript”></script></pre>
<p>２．顔認識プログラムを表示する場所を決める 顔認識プログラムを表示したい場所に、以下のコードを書き込みます。</p>
<pre lang=”html4strict”><div id=”flashcontent”><br />This page requires flash9.<br /><br />Please install or upgrade flash player if you see this message.<br /><br /><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></pre>
<p>３．顔認識プログラムを表示するJavascriptコードを書き込む 以下のJavascriptコードを書き込むことで、２．で決めた場所にプログラムが表示されるようになります。</p>
<pre lang=”javascript”>
var so = new SWFObject("http://facekit.net/flash/facekit_1", "facekit_1", "320", "263", "9", "#869ca7");
so.addVariable("url", location.href);
so.write("flashcontent");</pre>
<p>（４）．顔認識プログラムの出力する結果を利用する 顔認識プログラムの出力する結果を利用するには、３．で作成したJavascriptコードを以下のように変更します。</p>
<pre lang=”javascript”>
var so = new SWFObject("http://facekit.net/flash/facekit_1", "facekit_1", "320", "263", "9", "#869ca7");
so.addVariable("url", location.href);
so.addVariable("callback", "getResult");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");</pre>
<p>このように変更することで、顔認識プログラムは認識を行うごとに関数getResultを呼び出すようになります。getResultの引数には以下のようなフォーマットのJSON形式の認識結果が与えられます。</p>
<pre lang=”javascript”>
{
state: "detected", // 顔検出結果 "detected", "none" の2種類
label: "front", // 認識結果
x:40, y:50, // 検出された顔の座標
width:20, height:20, // 検出された顔の大きさ
time:100.0 // 検出された時刻（flvを入力とした場合のみ）
}</pre>
<p>ここで以下のような関数を定義することで、認識結果に応じて動的に内容を変化するWebページを作成することができます。</p>
<pre lang=”javascript”>
function getResult(value) {
var data = eval("("+value+")");
if (data.label == "left") {
do_something…
} else if (data.label == "right") {
do_something_else…
}
}</pre>
<p>上記機能の具体的な利用例は、<a href=”http://demos.facekit.net/googlemaps/”>このページ</a>などを参考にしてください。</p>
Subscribe to RSS