JavaScript
HTML5
Theta
WebVR
360video

【WebVR】Theta R(RICHO R) の動画をUVCモードでWebVRしてみる【A-Frame】

はじめに

WebVRのフレームワーク A-Frame を利用してThetaのLive動画をVR対応させます。

準備

  • Webサーバー(外部を利用する場合はSSLが必要です、たぶん 1
  • Thetaなどの全天球カメラ(私はThetaRで確認)
  • VR機器(私はOculus CV1で確認)

ソース

A-Frame のソースコードを参考にしました。
たったこれだけのソースで、VR対応できるなんて、なんて素敵なのでしょう。

360video.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>360 Video</title>
    <meta name="description" content="360 Video — A-Frame">
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>

    <script type="text/javascript">
    var constraints = {
        audio: true,
        video: true
    };

    // get user media
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

    navigator.getUserMedia(constraints,
        function(stream) {

            var video = document.getElementById("video");
            video.src = URL.createObjectURL(stream);

            console.info("media start");
        },
        function(error) {
            console.error(error);
        }

    );
    </script>
</head>

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

</html>

確認

  1. サーバーにソースをアップ
  2. OculusをPCに接続
  3. ThetaをPCに接続
  4. Chromeでアクセス
  5. カメラ利用の許可を求められるので、許可 2
  6. 映像が映し出されたら画面右下のVRボタンをクリック。
  7. Oculusを覗いてみる
  8. WoW!

  1. 映像を取得する getUserMedia が動かないと思います。Localhostなら大丈夫だったかと。 

  2. カメラを複数繋いでいる場合はURL欄右側のアイコンをから目的のカメラに変更。