Go to Qiita Advent Calendar 2024 Top
LoginSignup
56
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@massie_g(がねこ まさし)

THETA V からリアルタイム360度動画を、Oculus Go のブラウザで見よう

Last updated at Posted at 2018-05-28

はじめに

Oculus Go のブラウザはChromiumをベースにしていてWebGLに対応しています。WebVRのライブラリであるA-FRAMEを使うことで、WebVRを利用することができます。

また、リアルタイム通信のWebRTCが使えることも、@gtk2k氏たちの実験で判明しています。

ならば、USB接続でWebカメラとして認識できるRICOH THETA Vを使えば、リアルタイムの360度映像をOculus Goのブラウザで見れるはずです。

サンプルを動かしてみる

実際にTHETA-Vのリアルタイム映像をOculus Goで360度体験できるサンプルを作ってみました。GitHub Pagesで公開しています。

PCからの配信

  • PCにRICOH THETA VをUSBで接続し、電源を入れてLiveモードに設定
  • PCのChromeブラウザで、 https://mganeko.github.io/aframe/pc.html を開く
    • Roomがランダムに割り振られます。変更することも可能です
    • URLに ?apikey=ZZZZZZZZZ とつけることで、自分のSkayWayのAPI KEYを利用することができます(あらかじめ mganeko.github.io　ドメインでの利用を許可しておいてください）
TV_360_OGO_1.png
  • [Get Devices]ボタンをクリックすると、利用可能な Videoデバイス(カメラ)、Audioデバイス(マイク)のリストを取得します
    • カメラ、マイクへのアクセスを聞かれるので、許可してください
    • THETA V が見つかれば、自動的に選択されます
    • THETA V を接続していても検出できない場合は、Chromeを一旦終了して、再度起動して見てください
TV_360_OGO_2.png
  • [Start Video] ボタンをクリックしてください
    • 映像と音声が取得され、ブラウザ内に表示されます
  • [Connect] ボタンをクリックしてください
    • SkyWay に接続され、指定されたRoomに参加します
    • 自分の映像の下に、Oculus Go で接続するためのURLが表示されます。
    • このURLを、Oculus Go のブラウザ（あるいは、他のWebVR 対応のブラウザ）で開くと映像を見ることができます
TV_360_OGO_3.png
  • 配信を停止する場合には [Disconnect] → [Stop Video] の順にボタンをクリックしてください

Oculus Go での視聴

  • Oculus Go のブラウザ（あるいは、他のWebVR 対応のブラウザ）を起動してください
  • 配信側で表示されたURLを、ブラウザでアクセスします
    • あらかじめ https://mganeko.github.io/aframe/go.html?room= までをブックマークに入れておき、最後にroom名だけ追加すると手間が少なくなるのでお勧めです
    • URLに ?room=xxxx&apikey=ZZZZZZZZZ とつけることで、自分のSkyWayのAPI KEYを利用することができます
    • あるいは、https://mganeko.github.io/aframe/g.html を開いてroom名を入力後、[送信]ボタンをクリックすることも可能です(この場合はapikeyは指定できません)
  • しばらくロードの時間がかかります
    • A-FRAMEの準備ができたら 中央にメッセージが表示されます(Please click window to start 360 video streaming)
  • 画面をクリックしてください（Oculus Goのコントローラーでトリガーを引く）
    • SkyWay に接続され、指定されたRoomに参加します
    • PCに接続されている THETA V の360ど映像が表示されます
  • 右下のメガネ型のVRモードボタンをクリックすると、360度モードになります（カーソルを合わせてOculus Goのコントローラーでトリガーを引く）
    • 自分の頭の向いている方向に応じて、映像の見える方向が変わります
  • 360度モードを抜けるには コントローラの[戻る]ボタンを押します
  • Skywayの接続を切る処理は未実装です。リロードするか、他のページに移動してください

A-FRAMEを使った360度動画の表示

A-FRAME はWebVRのハードルを下げてくれるフレームワークです。Oculus Goのブラウザでも、A-FRAMEのサンプルを360度の3Dで見ることができます。サンプルには、保存済みの360度動画を見ることができるものもあります。

また Oculus Goではありませんが、A-FRAMEを使ってRICOH Rの動画でWebVRで表示している取り組みがあります。

今回はこれをベースに360度リアルタイム映像をWebVRで見れるようにしました。るのは実現できそうです。

360度映像の形式について

360度映像には大きく分けて2種類の形式があります。

  • dual-fisheye 形式（2つの魚眼映像） ... THETA S はUSB接続時はこちらの形式
  • equirectangular 形式 （パノラマ状） ... THETA V, RICOH R はUSB接続時にこちらの形式

A-FRAMEが対応しているのは equirectangular 形式のため、今回はTHETA Sはそのままでは利用できません。未確認ですが RICOH THETA UVC Blenderを使えばquirectangular 形式に変換して利用できそうです。

A-FRAMEを使った360度映像の表示

詳細は他のA-FRAMEの解説に譲りますが、360度映像を表示するには次のようなコードで実現できます。


  <a-scene>
    <a-assets>
      <video id="video1" autoplay loop crossorigin="anonymous" playsinline webkit-playsinline></video>
    </a-assets>
    <a-videosphere src="#video1" rotation="0 180 0">
    </a-videosphere>
  </a-scene>

a-assetsタグ内に元となるvideoタグを記述し、a-videosphereコンポーネントからvideoタグのidを参照します。
通常はvideo.srcにURLを指定しますが、WebRTCを使う場合はvideo.srcObjectにMediaStreamを渡してあげます。

A-FRAMEのバージョン

A-FRAMEの最新のバージョンは0.8.0です(2018年5月現在)。しかしこのバージョンでは、私が試した限り360度動画がうまく表示できませんでした。0.7.1で試したところ無事表示できため、そちらを利用しています。

Oculus Go 以外での視聴について

A-FRAMEはWebVRをサポートしているブラウザであれば、他のデバイスでも利用できます。

僕はiPhone6に機種変更してから文字が小さくて見にくかったので拡大表示モードを使っており、実はこれが原因でした。
同じ問題に悩まされる方のために設定変更方法を記載します。

Oculus Go の手軽さにはかないませんが、他のデバイスでお楽しみいただけます。

WebRTCによる映像/音声通信

Webブラウザでのリアルタイム映像/音声通信と言えば、WebRTCです。シグナリングサーバーやSTUN/TURNサーバーといったものが必要になります。自分で用意しても良いのですが、今回は実現スピードを優先してNTTコミュニケーションズ社が提供しているこちらのサービスを利用しました。

WebRTCについては色々な記事があります。少し古くなってしまいますが、私が書いているものをありますので、ご覧ください。

Video/Audioデバイスの取得と選択

先ほどのWebRTC入門2016では触れていませんが、PCに接続されているVideoデバイス（カメラ）と、Audioデバイス（マイク）を検出することができます。


  function getDevice() {
    // カメラやマイクの名称を取得するために、映像と音声を取得（ユーザーに許可を求める）
    // -- enum device --
    navigator.mediaDevices.getUserMedia({video: true, audio: true})
    .then(stream => callBackDeviceList(stream))
    .catch(err => console.error(err));
  }

  // ユーザの許可をもらったら、デバイスの一覧を取得する
  function callBackDeviceList(stream) {
    navigator.mediaDevices.enumerateDevices()
    .then(function(devices) {
      devices.forEach(function(device) {
        if (device.kind === 'videoinput') {
          const id = device.deviceId;
          const label = device.label || 'camera' + '(' + id + ')';
          // .... videoデバイス検出時の処理 
        }
        else if (device.kind === 'audioinput') {
          const id = device.deviceId;
          const label = device.label || 'microphone' + '(' + id + ')';
          // .... audio デバイス検出時の処理 
        }
      });
    })
    .catch(function(err) {
      console.error("getDevices ERROR:", err);
    });

    stopLocalStream(stream);
  }

  // 映像、音声を停止
  function stopLocalStream(stream) {
    let tracks = stream.getTracks();
    for (let track of tracks) {
      track.stop();
    }
  }

Video/Audioデバイスを指定するには、検出されたidを利用します。

  • Audioデバイスのid: xxxxxxx
  • Videoデバイスのid: yyyyyyy
    • 希望の幅、高さ: wwww, hhhh

の場合は、以下のように指定します。


let options = {
  audio : {
    deviceId : {exact: "xxxxxx" }
  },
  video : {
    deviceId : {exact: "yyyyyy" },
    width : { min : wwww, max : wwww },
    height : { min : hhhh, max : hhhh }
  }
}

navigator.mediaDevices.getUserMedia(options)
.then( stream => {
  // ... メディアストリーム取得成功時
})
.catch( err => {
  // ... エラー時
});

おわりに

Oculus Goのアプリを開発するにはUnityなどが必要ですが、WebVRであればテキストエディタだけで開発できます。WebRTCを使えばリアルタイム通信も可能です。
またA-FRAMEを使えば、Oculus Go以外のデバイスでも利用できるので、ぜひお試しください。

56
45
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
56
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?