2016-01-18

はじめに

Theta S が出たときからずっと、USBカメラとして使えるなら WebRTC に流したい！と思っていたのですが、Dual Fisheye の画像を球面にマップするところが自分では実装できず困っていました。

それからしばらくして、この記事様様さまを拝見し、ありがたやー！と僕は叫びました

qiita.com

まさしく、これです。

しかし実際にページにアクセスしてみたところ、THREEのライブラリが正しく読まれていなかったり、コードの一部がgit上で先祖返りしていたりして、正常に動きませんでした。そこで、自分で動くように修正することにしました。

なので、本日の記事は、あくまで巨人の肩でちょっとだけダンスしてみた案件になります。よろしくお願いします。

完成品

コードはこちらにあげてあります。元がGistで扱いづらかったので、恐縮ですがGitのプロジェクトにしています

github.com

最近 getUserMedia が https じゃないととれなくなってしまったので、実行可能な状態でウェブにはあげていません。皆様、Gitからコードを取得して npm http-server とかで試してみてください。

かわりに、録画した物をあげておきます

RICOH THETA S USB Live Streaming to WebRTC

修正内容

環境

Three.js v73
RICOH THETA S
Google Chrome

球面へのテクスチャマッピング

基本は元記事の通りですが、最新のリビジョンで、theta-view.js のメインの処理を行っているコードがごっそりと削除されています。(コミットミスでしょうか) 一個前のリビジョンにコードが残っているので、こちらを使うことにします。

接合面の調整

本家のコードのままだと、少々カットしすぎてしまっているので、良い感じになるよう数値を調整します。詳細はコードをご覧下さい。スムージングはやっていません。(やりたい！)

Theta S の USBライブストリーミングを受ける

今回は、ローカルに接続されたTheta S の動画像を表示することにします。WebRTC の getUserMedia の定石通り取得して、 <video> タグに流し込みます。 <video> タグは直接は表示されず、jsで作るCanvasに、Three.jsがマッピングした映像が表示されることになります。

おまけ：FOV調整

視野角を広くしたり狭くしたり出来るようにします。 OrbitControl.js のマウスホイールは別のイベントに当てられているので、独自に上下キーでFOVをコントロールできるようにします

  function keydown(e) {
    var keyCode = e.keyCode;
    switch (keyCode) {
      case 40:
        // zoom out
        camera.fov += 1;
        if(camera.fov >= 130) camera.fov = 130;
        camera.updateProjectionMatrix();
        break;
      case 38:
        // zoom in
        camera.fov -= 1;
        if(camera.fov <= 30) camera.fov = 30;
        camera.updateProjectionMatrix();
        break;
    }
  }
  document.addEventListener("keydown", keydown);

おわりに

双方向化

今回は https サーバを立てるのがめんどくさかったりしたのでローカルのカメラを表示するのにとどめましたが、テクスチャとしてWebRTCでリモートから送られてきた動画を使うだけで、双方向全天球ウェブチャットのできあがりです。

連続稼働と用途

蛇足ですが、この記事を書いたりいろいろしている間、8時間以上連続して Theta S を USB ライブストリーミング状態にしていますが、今のところ大丈夫なようです。もう少し連続して使ってみます。

常時接続して監視カメラ的に使えるかなーと思いましたが、ライブストリーミングの状態にするのに現状ハードウェアキーをしかも特殊な作法で押すしか無いので、ちょっと不便そうです。

解像度

球面にマップすると、やはり USBの 1280x720 では全然足りない感じがします。HDMI ライブストリーミングの FullHD を HDMI キャプチャして使ったとしても、おそらくまだまだ足りないんだろうなぁ、という気もします。この辺りは、これからまだまだ発展の余地があるなぁと思いました。将来が楽しみですね！

自習室

こもります

THETA S のUSBライブストリーミングをブラウザで球面マップする