連載インデックスへ
一撃デザインの種明かしHTML5の味見しちゃうよ(1)

Web RTC、Face.jsとJSARToolkitのお味は?

シーエー・モバイル
市川 未吏
2012/5/11

Web RTC、Face.jsとJSARToolkitを試した。JavaScriptを使って、Webカメラで顔認識とARをしよう

HTML5とか勉強会の分科会発足!

 日々めまぐるしい進化を遂げているWebの世界。その世界に身を置き、興味を惹かれるものは多々あれど、なかなか実践するのは難しいものです。私ももちろん、例外ではありません。

 Web先端技術味見部は、気になるあの技術をどこよりも早く取り上げる勉強会です。10人前後の少人数の参加者全員で、気になるフレームワークやAPIなどを味見していきます。

 先日開催された、その第0回、第1回の様子を以下にお伝えします。

その名もWeb最先端技術味見部

 最初に取り上げたのは「Web RTC」。Web RTCとは、Web RealTimeCommunicationのことで、デバイスのカメラ、マイクから音声、動画を取り込んだり、端末間で相互通信P2P(Peer to Peer)を行えるJavaScript APIです。Webカメラを準備しましょう。

 まずは本家のサイトをみんなで見てみるところからスタート。

 正式版のChromeに導入されていない新機能が、毎週のように自動更新されるというChrome Canaryをインストールします。

 手順に従ってChrome Canaryをインストールし、chrome://flagsでEnable the MediaStreamを有効にします。

 デバイスからの音声や動画の取り込みは、JavaScriptのgetUserMediaを使って行われます。この設定によって、getUserMediaメソッドが使えるようになります。

 getUserMediaの基本的な使い方は以下の通りです。第1引数が取得対象メディア、第2引数が取得成功時のコールバック、第三引数がエラー時のコールバック(任意)です。

navigator.getUserMedia(
media,
successCallback,
errorCallback
);

 「getUserMedia の基本」も参考になります。さあ、これでデバイスのWebカメラやマイクを取得する準備が整いました!

「Web RTC」の簡単なサンプルから

 デモの準備ができたら、サンプルにトライします。ソースは以下です。

<!DOCTYPE html>
<script>
navigator.webkitGetUserMedia("video", function(stream) {
var url = webkitURL.createObjectURL(stream);
console.log(url);
document.getElementById("v").src = url;
});
</script>
<video id="v" autoplay></video>

 ここで注意しなければいけないのは、getUserMediaはHTMLをサーバに置かないと、きちんと動作しないということ。私もローカルに置いたままで、見事にハマりました。

P2Pにチャレンジ

 勉強会で盛り上がったのが、複数人で行う動画チャットでした。準備が整った後にアクセスする、動画チャットを行うページはこちら

勉強会裏話:相互通信がなかなか上手くいかず、同じデバイスで2つブラウザを立ち上げて1人チャットで遊んでみたり。もちろん成功しているペアもありました

  最後は、alumicanさんのブログの「webRTCでP2Pの動画チャットを頑張れば試せるデモ作ってみた。」にトライしました。

 ブラウザを2つ立ち上げて、手動でハンドシェイクのようにすると、自分と相手の動画が表示されました。

「JSARToolkit」、「face.js」にも挑戦

 続く味見部の第1回は、さらにカメラを楽しく使うAPI「JSARToolkit」と「face.js」を「味見」しました。

1. Face.js(JavaScript Face Detection + Canvas + Video = HTML5 Glasses!)を使い、顔認識します。alumicanさんのブログを参照して、デモを行いました。

 GitHubから落としたソースを見てみると、実際の顔認識はccv.jsとface.jsによって行われます。ccv.jsがCanvasを扱う画像処理ライブラリで、物体を検出する部分(detect_objects)などが実装されています。face.jsには、顔検出用のパターンがセットされ、HTML5のVideoタグを用いて、Canvasに取り込んだ画像から、顔の部分を検出できます。

 こちらのソースを、そのまま動かそうとするとエラーが出てしまいますが、get_user_mediaをwebkit_get_user_media置換するとOKになります。Chromeのバージョンの差などが影響するようです。

 alumicanさんのデモでは、さらに検出した顔を、笑い男に上書きする処理を行っていました。前回同様、Chromeの開発版でMediaStreamを有効にしてから、こちらのサンプルを試してみます。

 顔の部分が認識され、上書きされると思います。

 間髪入れずに、次はJSARToolkitにも挑戦。

 先ほどのface.jsでは人の顔のパターンにマッチしたものを検出しましたが、今度はWeb上で拡張現実(AR)アプリケーションを実装します。Canvas上の動画からARマーカーにマッチした部分に対して変換を行い、3Dオブジェクトも描画できます。みんなで盛り上がったのが、AR技術を使った初音ミクのこちらの動画です。

 それでは早速デモです。サイトに載っているARマーカーをスマホのカメラで撮影し、こちらにアクセスしてWebカメラにマーカーを映します。

 角度や大きさによっては、なかなかうまくいきませんが、きちんと変換された画像が表示されました。紙に印刷したマーカーを用いるとよりうまくいくようです。

 だいぶ駆け足になりましたが、最後にはこちらのデモにも挑戦します。ビデオ画面上部に鍵盤が表示され、それを指でなぞることで実際に音が出ます。こちらの動画でその様子を見られます。

 こちらの実際の処理は、ソースを見てみると、意外とシンプルでカラーチャネル間のアベレージを計算して、触れた触れないを識別しています。

味見部はこれから

 味見部は、勉強会としての進め方自体も手探りで、テーマとなる最新技術も初めて触れるものです。そんな、他ではちょっと見かけないスタイルで味見部はスタートしました。

 参加者みんなで、わちゃわちゃ手を動かす感じは、新鮮だったり、部活ぽくて、懐かしい感じもしたりします。これからどんな感じになるのか、とても期待しています。個人的には、特にハマったとき、みんなでごにょごにょと解決策を探していくのが、快感です。

 次回の仮テーマは「Meteor」。公開されたばかりのJavaScriptのWebアプリケーションフレームワークを味見します。次回の様子もまた、レポートしますのでお楽しみに!

著者プロフィール

市川未吏(いちかわ みさと)
シーエー・モバイル/エンジニア
女性向けソーシャルゲームの開発を担当。
インフラ経験あり。ガテン系オペレーションもOK。サーバ−も担げる女子エンジニア。
もともとの専門は宇宙物理学


[an error occurred while processing this directive]
「デザインハック」コーナーへ



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間