← alvinwan.com

WebVR Utility


To test the demo, just load the following URL on both your phone and your desktop.


Getting Started

To get started, include these two scripts in your webVR project, after your AFRAME import.

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alvinwan/mirrorvr@0.2.1/dist/mirrorvr.min.js"></script>

Then, add the `camera-listener` and `onload-init-mirror` AFRAME components to your camera, like below:

<a-camera onload-init-mirror camera-listener></a-camera>

That's it! Then, load your project on both your phone and your desktop.


Need to synchronize more than the camera? MirrorVR uses a notification system:

  1. First, the mobile device sends a notification with information e.g., the 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());

Third, process the notification. To do so, pass configuration options into mirrorVR.init.

  state: {
    time: {
      onNotify: function(data) {
        console.log('Time is ' + data);

For more information, advanced options, and other configurations, see the README.

Pro tip: Have multiple pairs of phones and desktops? Just have each pair load a different anchor. e.g., John and Jane can share example.com#roomA, while Bob and Eve can share example.com#roomB.