LoginSignup
9
11

More than 5 years have passed since last update.

@gin9er69

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

Posted at

はじめに

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欄右側のアイコンをから目的のカメラに変更。 ↩

9
11
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
9
11