ブラウザでARやってみよう。 ~カメラ編~

2014.11.03(月) AR
このエントリーをはてなブックマークに追加

頭の中ですでに出来上がっていて、それをプログラムするっていうのが、最近辛いんですよね。できるとわかっているものを作るより、できるかどうかわからないものを作って動いた方がやっぱり数倍楽しいですので。本も同じで、東野圭吾氏とか、伊坂幸太郎氏とか、おもしろいとわかってる作家さんよりも、おもしろいうかどうかわからないけど、読んでみたらすっごいおもしろかった、みたいな方が好きなので、なかなかメジャーな作品が読めません。
それはさておき、前回からかなり時間が経ちましたが、ブラウザでカメラ起動してみました。例によって、GoogleChromeで確認してくださいね~。


Step1.カメラを起動する






navigator.getUserMediaというメソッドを利用しますが、以下の説明がわかりやすいです。



で、そちらになかった要素としては、最近のスマフォは大抵外側と内側のカメラがあるので、それを切り替えるところですね。
getUserMediaメソッド呼び出し時の第1引数に、MediaStreamConstraintsを渡しますが、optional: [{sourceId: カメラID}]を指定することで、どちらのカメラを使うかを決めることができます。
では、そのカメラIDをどこから取得するか?が記載されているのが、以下の部分です。

$(function(){

    // メディアソース取得
    MediaStreamTrack.getSources(
        //カメラソース取得成功時CallBack
        function (media_sources) {
            //カメラ選択用コンボボックスクリア
            $("#cameraid").empty();
            //メディアソース中のVideoのみを抽出
            for (var i=0; i < media_sources.length; i++) {
                if( media_sources[i].kind == "video" ){
                    //コンボボックス選択生成(value=カメラID)
                    var name = media_sources[i].label = "" ? media_suorces[i].label : "camera-" + (i+1);
                    var selstr = (media_sources[i].id == cameraid ) ? "selected" : "";
                    var childstr = '<option value="'+media_sources[i].id+'"';
                    childstr = childstr + selstr + '>';
                    childstr = childstr + name + '</option>';
                    $("#cameraid").append(childstr);
                }
            }
            //初回の描画
            setCamera(media_sources[0].id);
        }
    );
});



MediaStreamTrack.getSourcesメソッドの呼び出しで成功した場合のcallback関数に返される、media_sourcesの中に、カメラや音声などのリソース情報が入った形で返却されます。
その中のidがカメラIDとなるので、その一覧をコンボボックスにしています。labelで名称も取得できるのですが、私の持っているPC、スマフォなどでは空でしたので空の場合も多いのかもしれません。

終わりに

ここまで4回分、ARっぽいものをブラウザ上で動作させるためのモジュールを紹介してきましたが、組み合わせることでもっといろいろできるのかな?と思いますね。ただ、ほぼGoogleChromeでしか動かないとか、センサー関連もOSアップデートで動きが変わったり(ような気がしているだけかも)まだ、完全ではないところも多いので、今後にまた期待ですかね。
しかしながら、それでもまたなにか作ってみたいと思う今日この頃です。

コメントをどうぞ