JavaScript + Androidで、Oculusっぽいサイドバイサイドカメラ表示。

  • このエントリーをはてなブックマークに追加
  • 0

最近はJavaScriptでカメラを使ったり出来る時代だが、折角なので流行になりつつある「Oculus Rift」系のサイドバイサイドになるカメラを作ってみた。

こちら。

SANWA SUPPLY SlimPort-HDMI変換アダプタ 黒 AD-HD14SP

SANWA SUPPLY SlimPort-HDMI変換アダプタ 黒 AD-HD14SP

定価:¥ 6,264

Amazon価格:¥ 2,322

カテゴリ:エレクトロニクス

発売日:2013-10-01



EMOBILE NEXUS 5 32GB ブラック LG-D821 SIMフリー

EMOBILE NEXUS 5 32GB ブラック LG-D821 SIMフリー

中古価格: ¥ 10,000 より

Amazon価格:¥ 29,700

カテゴリ:エレクトロニクス




こちらは、Nexus 5を使ってセブンイレブン限定カラーのユニコーンガンダムを写した所のスクリーンショット。

サイドバイサイド

Chromeでしか動かないが、Androidのケータイで複数カメラがある場合、中央上部のドロップダウンリストで、使うカメラを選択できる。
ソースを参考にしたjs-arucoのサンプルだとFirefoxでも動くが、カメラを選択することが出来ず、手持ちのNexus 5だと、フロントカメラしか使えなくて顔しか映らなかったので、ここからChromeの新機能を見つけて、カメラを選択出来るようにしてある。

ということで、以下にやり方を記載。

カメラを選択する

とりあえず、全体のコードはこちら
まず、使えるカメラの一覧を拾う。これには「MediaStreamTrack#getSources(func(data){})」を使う。今回のサンプルだと、拾ったカメラIDの一覧をドロップダウンリストに入れている。

で、ドロップダウンの変更をキャッチするonchangeに、start関数を入れて動かす。start関数内では、まずカメラ変更時に動いていたカメラプレビューを止める。

javascript

  1. if (!!window.stream) {
  2.         video.src = null;
  3.         window.stream.stop();
  4.       }

で、次に取得したカメラ情報から、プレビュー画面を出す。
カメラプレビューは「getUserMedia」っていう関数で出すんだが、これの第一引数にカメラの情報を与えてやる。

javascript

  1. var videoSource = videoSelect.value;
  2.       navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  3.       if (navigator.getUserMedia){
  4.         navigator.getUserMedia(
  5.           {
  6.             video:{
  7.               optional:[{sourceId:videoSource}]
  8.             }
  9.           },<正常系コールバック>, <異常系コールバック>);

こんな感じ。Firefoxでも動く、普通の「getUserMedia」の使い方だと、こうなる。

javascript

  1. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  2.       if (navigator.getUserMedia){
  3.         navigator.getUserMedia({video:true},,<正常系コールバック>, <異常系コールバック>);

第一引数にカメラのIDを指定することで、指定したカメラでのプレビュー表示が出来るようになる。Chrome30以上で使えるらしい。俺が試したのはAndroid4.4だけだが、他の端末でもそれなりには使えるんじゃないかな?

サイドバイサイド

実は、カメラプレビュー自体は表示していない。
Three.jsを使って、カメラプレビューをテクスチャにして、レンダリングしている。以下のコード辺りを使っている。

これは、カメラプレビューを使うためのHTMLタグ。display:none;を指定して、見せないようにしている。

  1. <video id="video" width=320 height=240 autoplay="true" style="display:none;"></video>

で、こっちはテクスチャを作っているところ。videoというのは、上記のvideoタグ。

javascript

  1. var texture = new THREE.Texture(video),

で、これで何が出来るかというと、Nexsus 5はSlimPort使ってHDMI出力が出来るので、Oculus Riftに繋いで何かできるかもしれない、という状態までは来た。

スポンサーリンク
スポンサーリンク
  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク