« 2012年05月 | メイン | 2012年07月 »

2012年06月 アーカイブ

2012年06月09日

WebRTCとWeb Audio APIでテルミンみたいなものを作ってみた - Facemin -

テルミンは手の位置よって音程や音量が変わる楽器。
WebRTCとccv.jsで顔検出させて、顔の位置で音程が変わるテルミンみたいなものを作ってみた。
FaceとThereminでFacemin。
処理の流れは以下の通り。

WebRTCでカメラの画像を取得
ccv.jsを使って画像から顔を検出
顔の横方向の位置と大きさから周波数を計算
顔の縦方向の位置が音量
Web Audio APIで正弦波を再生

コードはGitHubも公開している。

2012年06月14日

getUserMedia の第一引数に toString を加えたら汎用的になったという話

「すばらしい!」と言われて嬉しかったのでブログを書くメソッド。
@agektmr エージさんが考えたgUM用の{video: true, audio: true, toString: function(){return 'video audio';}、すばらしい!元々のブログポストやgistへのリンクがありますか。
@ourmaninjapan おっとこれを考えたのは僕じゃないです。 @kanasan です
@agektmr Ah, ごめん.間違いました。 @kanasan のブログとかにあるかな。
以前、WebRTCのエントリーを書いた時に指摘があった。
webkitGetUserMediaの仕様が変わってるので僕のCanaryではデモが動かないでござる
それまで第一引数が文字列だった getUserMedia(Chromeは現バージョンではベンダープレフィックス付のwebkitGetUserMedia) の仕様が、最新のものではオブジェクトを指定するように変更されたとのこと。
//old
navigator.getUserMedia(
    "video, audio",
    function(stream){/*onSuccess*/},
    function(e){/*onError*/}
);

//new
navigator.getUserMedia(
    {audio : true, video : true},
    function(stream){/*onSuccess*/},
    function(e){/*onError*/}
);
Chromeのdev版の実装が新しい仕様になったため、文字列指定では動かない。
オブジェクトを指定すると現行バージョンのChromeだと当然のようにエラーに...。
なんとなく、第一引数のオブジェクトに、試しにtoStringを加えてみた。
navigator.getUserMedia(
    {audio : true, video : true, toString : function(){return "video, audio";}},
    function(stream){/*onSuccess*/},
    function(e){/*onError*/}
);
なんとまあ、動くじゃないですか!

ということで、今だと以下のように書くとdev版を含めたChromeとOperaの仕様を吸収することができる。
function attachUserMedia(videoElement) {
    if ("getUserMedia" in navigator) {
        navigator.getUserMedia(
            {audio : true, video : true, toString : function(){return "video, audio";}},
            function(stream) {
                videoElement.src = stream;
            },
            function(e) {
                console.log(err);
            }
        );
    } else if ("webkitGetUserMedia" in navigator) {
        navigator.webkitGetUserMedia(
            {audio : true, video : true, toString : function(){return "video, audio";}},
            function(stream) {
                var url = webkitURL.createObjectURL(stream);
                videoElement.src = url;
            },
            function(e) {
                console.log(err);
            }
        );
    } else {
        console.log("nothing : user stream");
    }
}
本当は try...catch... を使ったりしてもっとスマートに書けるんだけど、今後仕様がどう変わるのかわからないのと、別のブラウザがどう実装してくるのか不明なので冗長なままにしてある。

2012年06月15日

WebRTCとccv.jsの顔検出とBox2DJSの物理エンジンを組み合わせて遊んでみた

WebRTCでWebカメラ画像を取り込んで、ccv.jsで顔を検出する。
Box2DJSで検出した顔にも衝突判定を持たせて、顔の周囲を物体が浮遊する物を作ってみた。
検出した顔の数によって物体の色が変わるようにしている。

コードはGitHubに置いた。
達人出版のBox2DJSの本がわかりやすかった。
その他の参考リンク
使ったライブラリの所在は以下。
Google

タグ クラウド