Giter Club home page Giter Club logo

vrdevroom's Introduction

VR deVRoom

VR deVRoom is a networked WebVR prototype application for supporting remote collaboration within agile software development. It presents a virtual room with a Kanban-style board that the users can manipulate together.

The prototype uses WebRTC for communication and the VR environment is built on top of A-Frame.

NB: the prototype is designed for Samsung Gear VR with the Gear VR Controller and works best with the Oculus Browser. There are currently no input mappings for other VR controllers. However, the application can also be used with a modern desktop browser.

Features

Avatars for remote users

avatar

Each user is represented with an avatar that mirrors the orientation of the user's head.

Pointing

pointing

Users can point objects in the environment (with the Gear VR controller), and the cards on the board respond to the pointing. Press and hold the top button on the Gear VR Controller (or Space bar on a regular computer) to point.

Board manipulation

board

The cards on the board can be dragged and dropped. Drag the cards with the trigger on the Gear VR Controller (or with the c key on a regular computer).

Zooming

zooming

To compensate the inadequate resolution of the current VR displays, the cards can be zoomed to make them more legible. Zoom the cards by touching the touchpad on the Gear VR Controller (or by pressing and holding the v key on a regular computer).

Audio

The prototype offers spatialized audio: the audio stream from each user is connected to the corresponding avatar, and hence the sound appears to be coming from the direction where that user is in the virtual environment.

Getting started

Interested in forking the prototype? Get up-and-running with these steps:

  1. Set up the associated signaling server.

  2. Configure the signalling server address (and optionally a fixed room):

    Copy the client/example-config.json to client/config.json and dial in the appropriate values.

    Deleting the roomName will make the application prompt a room name for each user, which essentially enables the support for multiple rooms.

  3. Type:

    npm install
    

    and then just:

    npm start
    

    or for live-reloaded dev serving:

    npm run dev
    

Note that the WebRTC communication requires a secure connection (using either localhost or HTTPS).

Notes

The demo version at vrdevroom.com has logging enabled. Take at peek at the browser's console log to see what's going on when peers come and go.

Bugs in spatial audio

The audio spatialization (using WebAudio) still seems buggy in Chromium, leading to unreliable behavior in mobile Chrome, Samsung Internet, and Oculus Browser. This manifests itself in audio sometimes not being routed properly through the audio graph, causing the loss of panoration (spatialization). The audio by itself, however, does continue playing. This problem does not happen in desktop browsers.

In general, Chromium (desktop and otherwise) also still requires a remote audio stream (WebRTC) to be attached to a dummy Audio-element (can be muted) in order to make the stream audible when creating a WebAudio source node with context.createMediaStreamSource. Also, createMediaElementSource does not work in Chromium. Firefox does not suffer from these problems.

Read more (e.g.):

https://bugs.chromium.org/p/chromium/issues/detail?id=121673 https://bugs.chromium.org/p/chromium/issues/detail?id=477364 https://stackoverflow.com/questions/36581380/audio-level-meter-for-web-rtc-stream/36620646#36620646

License

Copyright (c) 2017 Petri Myllys / Reaktor. This software is licensed according to the used modules, i.e., the license used is BSD-3-Clause. Please see LICENSE and the modules in package.json for details.

vrdevroom's People

Contributors

pietrorossellini avatar

Stargazers

 avatar Tiago Vignatti avatar

Watchers

Tiago Vignatti avatar

Forkers

rustygoodman

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.