Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alvinwan/mirrorvr
live, desktop mirror for web-based virtual reality app running on mobile
https://github.com/alvinwan/mirrorvr
aframe javascript library socket-io utility virtual-reality
Last synced: about 1 month ago
JSON representation
live, desktop mirror for web-based virtual reality app running on mobile
- Host: GitHub
- URL: https://github.com/alvinwan/mirrorvr
- Owner: alvinwan
- License: apache-2.0
- Created: 2018-06-09T20:48:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-13T04:32:26.000Z (over 4 years ago)
- Last Synced: 2024-10-12T13:44:37.580Z (2 months ago)
- Topics: aframe, javascript, library, socket-io, utility, virtual-reality
- Language: HTML
- Homepage: http://mirrorvr.alvinwan.com
- Size: 750 KB
- Stars: 18
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- vr-resources - MirrorVR< live, desktop mirror for web-based virtual reality app running on mobile
README
# MirrorVR
Ever wanted to see what's going on in your user's virtual reality headset? **MirrorVR** is a live mirror for your aframe virtual reality projects: whatever your user sees in a mobile phone virtual reality headset is reproduced across any desktop viewer.
created by [Alvin Wan](http://alvinwan.com)
To test the demo, just load [`http://mirrorvr.alvinwan.com/demo`](http://mirrorvr.alvinwan.com/demo) on both your **phone** and your **desktop**.
```
http://mirrorvr.alvinwan.com/demo
```
# Getting Started
> Note: MirrorVR currently only supports AFRAME projects.
To get started, include this in your webVR project, after the AFRAME import.
```
```
Then, add the `camera-listener` and `onload-init-mirrorvr` AFRAME components to your camera, like below:
```
```
That's it! Then, load your project on both your **phone** and your **desktop**. The script by default synchronizes the camera only, which suffices for the point-and-click adventure game featured above.
See the [demo's source code](https://github.com/alvinwan/mirrorvr/blob/master/static/demo/index.html).
# Configuration
To configure MirrorVR, manually initialize the `mirrorVR` object.
```
mirrorVR.init({
/**
* See the `Rooms` section below for details.
**/
roomId: 'myUniversalRoomName',
/**
* A NodeJS server is required to facilitate communication between the client
* and the server. By default, MirrorJS uses and provides one at
* https://mirrorvr.herokuapp.com/. Explicitly define a host variable to use
* your own NodeJS server.
**/
host: 'https://myOwnServer.com/',
/**
* See the `State` section below for details.
**/
state: {
position: {
onNotify: function(data) {
console.log('Position is ' + data.index);
}
}
}
});
```
## Rooms
By default, every unique URL is a new "room". For example, if
- user A loads example.com on her phone, and
- user B loads example.com on his desktop, and
- user C loads example.com#hello on her desktop,
user B will mirror user A but user C will *not* mirror user A. To override this default, configure `roomId`.
```
mirrorVR.init({
...
roomId: 'myUniversalRoomName',
...
});
```
## State
Need to synchronize more than the camera? MirrorVR uses a notification system:
1. First, the mobile device sends a notification with information e.g., current time.
2. Second, the desktop receives the notification with information, updating its local data structures and UI accordingly.
First, pick a name for this update. Here, we will use `time`.
Second, send a notification that state has changed. The first argument is the name you picked, and the second is state information.
```
mirrorVR.notify('time', new Date());
```
Then, amend your state configuration to include a handler for the desktop. The key `camera` below must match the arbitrary name we picked earlier, for `MirrorVR.notify`.
```
mirrorVR.init({
state: {
...
time: {
onNotify: function(data) {
console.log('Time is ' + data);
}
}
}
});
```
Note to self: When deploying, `uglifyjs static/mirrorvr.js dist/mirrorvr.min.js`, and update the version number in `package.json`.