2015年12月2日水曜日

ひまかん Advent Calendar 2日目: FaceTracking Effector

技術系集団であるひまかんがこれまでに作ってきた作品の紹介や、技術ネタ、ライフハックなど、ノンジャンルな記事を埋めていくアドベントカレンダーです。
ひまかん Advent Calendar 2015


もう昨年のこととなりますが、webmusic hackathonでの作品
「FaceTracking Effector」についてご紹介します。

2014に行われたwebmusic hackathonについてはこちら:
http://googledevjp.blogspot.jp/2014/08/web-music-3.html

FaceTracking Effectorとは


ウェブブラウザのみで
  1. webカメラに写っている顔の位置を検出
  2. 顔の位置に応じて音楽にエフェクトをかけて再生する
ということができるwebアプリケーションです。

webカメラの付いたPCで、Chrome/Firefox等の最新のブラウザであれば
こちらのURLから遊ぶことができます。
https://himakan.github.io/facetracking-effector/


顔の位置とエフェクトは下記のように対応しています。
  • 顔とカメラとの距離: 再生速度
  • 顔のXY座標: フィルタのカットオフ値とQ値



デモ動画


更におまけで、顔の位置をMIDI出力する機能もあります。
デモ動画ではKaossPad3を繋いで、さらにぐちゃぐちゃエフェクトをかけています。

細かい仕様

以下でもうちょっと突っ込んだ内容を説明します。

使用技術

  • WebRTC (webカメラ画像の入力)
  • WebAudio (BGMの再生、フィルタ+再生速度の変更)
  • WebMIDI (MIDI出力)
ちなみに、WebMIDIは作成当時はChromeでβ実装でしたが、
今年正式にサポートされるようになりました。
専用ソフトを持っていなくても、ブラウザとwebアプリケーションだけでMIDI機器を操作できる時代の到来です。

ライブラリ

headtrackr

顔の認識とXYZ軸や傾きを取ることが出来るJSのライブラリです。
kinect等の震度が取れるようなデバイスがなくても、
カメラだけで奥行きを取得できる点には驚きました。


webアプリの良い所は、特別なソフトや機材無しに誰でも使えるところが良い所だと個人的には思っています。
従来はこのアプリと同じようなことをやろうと思ったら、
専用アプリをインストールしてもらって動かしてもらうしか方法がなかったはずです。
今回このアプリの開発を通じて、webアプリだけでやれることはまだまだ沢山あるんだなと思いました。




0 件のコメント:

コメントを投稿