Giter VIP home page Giter VIP logo

aframe's Introduction

A-FRAME Samples

  • This is a WebVR sample with A-FRAME, mainly for Oculus Go.
  • これは A-Frame を利用した WebVR のサンプルで、Oculus Go を対象にしています。

Confirmed Environment / 動作確認環境

  • Chrome 66 (64-bit) for MacOS X
  • Oculus Go

Samples / サンプル

360 realtime video sample / 360度リアルタイム動画

Realtime video streaming sample over WebRTC. Using following porducts, service, library.

WebRTCを利用した360リアルタイム動画通信です。下記の製品、サービス、ライブラリを利用しています

How to use sample / サンプル操作手順

GitHub pages で試すことができます。RICOH THETA Vと Oculus Go(または他のWebVR ready のブラウザ)が必要です。

配信側

  • PC に RICOH THETA V をUSBで接続、Liveモードに設定

  • PCのChromeブラウザで、 https://mganeko.github.io/aframe/pc.html を開く

    • Roomがランダムに割り振られます。変更することも可能です
  • [Get Devices]ボタンをクリックすると、利用可能な Videoデバイス(カメラ)、Audioデバイス(マイク)のリストを取得します

    • カメラ、マイクへのアクセスを聞かれるので、許可してください
    • THETA V が見つかれば、自動的に選択されます
    • THETA V を接続していても検出できない場合は、Chromeを一旦終了して、再度起動して見てください
  • [Start Video] ボタンをクリックしてください

    • 映像と音声が取得され、ブラウザ内に表示されます
  • [Connect] ボタンをクリックしてください

    • SkyWay に接続され、指定されたRoomに参加します
    • 自分の映像の下に、Oculus Go で接続するためのURLが表示されます。
    • このURLを、Oculus Go のブラウザ(あるいは、他のWebVR 対応のブラウザ)で開くと映像を見ることができます
  • 配信を停止する場合には [Disconnect] → [Stop Video] の順にボタンをクリックしてください

視聴側 (Oculus Go)

  • Oculus Go のブラウザ(あるいは、他のWebVR 対応のブラウザ)を起動してください
  • 配信側で表示されたURLを、ブラウザでアクセスします
  • しばらくロードの時間がかかります
    • A-FRAMEの準備ができたら **にメッセージが表示されます
  • 画面をクリックしてください(Oculus Goのコントローラーでトリガーを引く)
    • SkyWay に接続され、指定されたRoomに参加します
    • PCに接続されている THETA V の360ど映像が表示されます
  • 右下の VRモードボタンをクリックすると、360度モードになります(カーソルを合わせてOculus Goのコントローラーでトリガーを引く)
    • 自分の頭の向いている方向に応じて、映像の見える方向が変わります
  • 360度モードを抜けるには コントローラの[戻る]ボタンを押します
  • Skywayの接続を切る処理は未実装です。リロードするか、他のページに移動してください

How to use sample

Please try on GitHub pages . You need RICOH THETA V and Oculus Go (or other WebVR ready browser).

Stream 360 realtime video from PC

  • Connect RICOH THETA V to your PC with USB, then start as Live mode.

  • Open with desktop Chrome: https://mganeko.github.io/aframe/pc.html

    • Room name will be decided by random. You can modify room name if you want.
  • Click [Get Devices] button, then list of video/audio devices will be made.

    • Please allow access to camera / microphone.
    • THETA V will be selected if exists.
    • If it failed to detect THETA V, pleaset quit and restart Chrome.
  • Click [Start Video] button.

    • Video / Audio will be captured, and shown in the browser.
  • Click [Connect] Button.

    • Connect to SkyWay, then join to the specified room.
    • URL for Oculus Go will be appear below video.
    • Open this URL with Oculus Go browser (or other WebVR ready browser), to watch 360 realtime video. (See next section)
  • To stop streaming, click [Disconnect] button, then click [Stop Video] button.

Watch 360 realtime video with Oculus Go

  • Start Oculus Go browser (or other WebVR ready browser).

  • Open the URL which shown in the streaming PC.

  • Loading will take a while.

    • When A-FRAME is ready, a message will appear in the center of browser window.
  • Click the browser windows (point and trigger Oculus Go controller).

    • Connect to SkyWay, then join to the specified room.
    • 360 realtime video form the PC will be played in Oculus Go Browser.
  • Click VR mode button at the right bottom corner (point and trigger Oculus Go controller), then enter 360 VR mode.

    • You can look around with Oculus Go.
  • To exit 360 VR mode, push [back] button of Oculus Go controller.

  • To disconnect from Skyway, please reload or move to other page.

Source code / ソーコード

License / ライセンス

  • This sample is under the MIT license
  • このサンプルはMITランセンスで提供されます

aframe's People

Contributors

mganeko avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

aframe's Issues

Automatic start?

I tried to copy your code and host it myself, but experienced some trouble, not sure what.

However, the only problem I have is that the stream does not start when clicking in the browsers that I tried on the pico vr headset (Safari, Firefox and whatever is native).
I tried on my phone (safari, android), which started the stream, but the movements are too big. for me to use cardboard vr.

Are the events not properly caught and maybe that is why the stream does not start? or is there another issue?
I didn't want to try and edit your code, but would an automatic start show the issue? or possible solve it?

video turns black after pressing VR button

The video turns black after I press VR button.
VRボタンをクリックすると視界が真っ暗になります。

I could fix as a result of deleting these lines.
適当な修正なのでプルリクは出しませんが、ここらへんを削ると直りました。

master...rotsuya:master

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.