More than 5 years have passed since last update.

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

Posted at 2017-08-28

はじめに

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

準備

Webサーバー（外部を利用する場合はSSLが必要です、たぶん ¹）
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>

確認

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

映像を取得する getUserMedia が動かないと思います。Localhostなら大丈夫だったかと。 ↩
カメラを複数繋いでいる場合はURL欄右側のアイコンをから目的のカメラに変更。 ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

はじめに

準備

ソース

確認

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