Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

流行ってんの?

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

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

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

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;
});

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

よっしゃ!!!?

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


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

しかし。。。。かっこわる!(悲)

教訓

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

ふん!!!

tadfmac
aka D.F.Mac. 実験音楽家。TripArts Music主宰。ハンディーレコーダーでの音集めが趣味。 Web技術、フィジカルコンピューティングなどにも興味があります。
http://soundcloud.com/tadfmac
kddi
KDDIは、通信を中心に周辺ビジネスを拡大する「通信とライフデザインの融合」をより一層推進し、国内はもとよりグローバルにおいても、5G/IoT時代における新たな価値創造を実現し、お客さまの期待を超える新たな体験価値の提供を追求してまいります。
http://www.kddi.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away