Face Tracking Effectorがあんまりカッコいいモンだからheadtrackrを触ってみた

流行ってんの?

最近、某イベントで顔追跡を使った凄いアプリを目撃しました。

• Face Tracking Effector (Web Music ハッカソン #3優勝作品)

なんか、メチャメチャかっこいい！

• LiveBeats (g200kgさん作のVJアプリ)

これも、顔認識ですね。なんか流行ってるんですか？

headtrackrを使ってみる

というわけで、Face Tracking Effectorで使ってるheadtrackrを私も使ってみることに。

headtrackrのreadme.mdを見ると、そんなに難しくなさそうです。

書いてある通りにやってみることに。

まず、

<script src="headtrackr.min.js"></script>

これは、コピペ。

<canvas id="inputCanvas" width="100%" height="100%" style="display:none"></canvas>
<video id="inputVideo" autoplay loop></video>
<script type="text/javascript">
  var videoInput = document.getElementById('inputVideo');
  var canvasInput = document.getElementById('inputCanvas');

  var htracker = new headtrackr.Tracker();
  htracker.init(videoInput, canvasInput);
  htracker.start();
</script>

ここもコピペw （Canvasのサイズは適宜変更）

あとは、イベントリスナーを追加しときます。

var head = {};
document.addEventListener('headtrackingEvent',function(event){
  head.x = event.x;
  head.y = event.y;
  head.z = event.z;
});

まー、こんな感じ。
びっくり！簡単！

よっしゃ！！！？

というわけで、私も顔追跡アプリを作ってみました。

[画像クリックでアプリ起動]

しかし。。。。かっこわる！（悲）

教訓

『同じライブラリを使ったからと言ってカッコいいモノが作れるわけじゃない！』

ふん！！！