{"id":13733006,"url":"https://github.com/alvinwan/mirrorvr","last_synced_at":"2025-03-23T12:34:30.850Z","repository":{"id":89467759,"uuid":"136756984","full_name":"alvinwan/mirrorvr","owner":"alvinwan","description":"live, desktop mirror for web-based virtual reality app running on mobile","archived":false,"fork":false,"pushed_at":"2020-08-13T04:32:26.000Z","size":768,"stargazers_count":19,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T20:39:39.098Z","etag":null,"topics":["aframe","javascript","library","socket-io","utility","virtual-reality"],"latest_commit_sha":null,"homepage":"http://mirrorvr.alvinwan.com","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alvinwan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-06-09T20:48:02.000Z","updated_at":"2024-12-12T05:32:18.000Z","dependencies_parsed_at":"2023-03-08T21:30:13.134Z","dependency_job_id":null,"html_url":"https://github.com/alvinwan/mirrorvr","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvinwan%2Fmirrorvr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvinwan%2Fmirrorvr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvinwan%2Fmirrorvr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvinwan%2Fmirrorvr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alvinwan","download_url":"https://codeload.github.com/alvinwan/mirrorvr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245104460,"owners_count":20561377,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aframe","javascript","library","socket-io","utility","virtual-reality"],"created_at":"2024-08-03T03:00:36.619Z","updated_at":"2025-03-23T12:34:30.489Z","avatar_url":"https://github.com/alvinwan.png","language":"HTML","readme":"# MirrorVR\n\nEver 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.\n\ncreated by [Alvin Wan](http://alvinwan.com)\n\nTo test the demo, just load [`http://mirrorvr.alvinwan.com/demo`](http://mirrorvr.alvinwan.com/demo) on both your **phone** and your **desktop**.\n\n```\nhttp://mirrorvr.alvinwan.com/demo\n```\n\n# Getting Started\n\n\u003e Note: MirrorVR currently only supports AFRAME projects.\n\nTo get started, include this in your webVR project, after the AFRAME import.\n\n```\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/alvinwan/mirrorvr@0.2.2/dist/mirrorvr.min.js\"\u003e\u003c/script\u003e\n```\n\nThen, add the `camera-listener` and `onload-init-mirrorvr` AFRAME components to your camera, like below:\n\n```\n\u003ca-camera camera-listener onload-init-mirrorvr\u003e\u003c/a-camera\u003e\n```\n\nThat'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.\n\nSee the [demo's source code](https://github.com/alvinwan/mirrorvr/blob/master/static/demo/index.html).\n\n# Configuration\n\nTo configure MirrorVR, manually initialize the `mirrorVR` object.\n\n```\nmirrorVR.init({\n\n  /**\n   * See the `Rooms` section below for details.\n   **/\n  roomId: 'myUniversalRoomName',\n\n  /**\n   * A NodeJS server is required to facilitate communication between the client\n   * and the server. By default, MirrorJS uses and provides one at\n   * https://mirrorvr.herokuapp.com/. Explicitly define a host variable to use\n   * your own NodeJS server.\n   **/\n  host: 'https://myOwnServer.com/',\n\n  /**\n   * See the `State` section below for details.\n   **/\n  state: {\n    position: {\n      onNotify: function(data) {\n        console.log('Position is ' + data.index);\n      }\n    }\n  }\n});\n```\n\n## Rooms\n\nBy default, every unique URL is a new \"room\". For example, if\n\n- user A loads example.com on her phone, and\n- user B loads example.com on his desktop, and\n- user C loads example.com#hello on her desktop,\n\nuser B will mirror user A but user C will *not* mirror user A. To override this default, configure `roomId`.\n\n```\nmirrorVR.init({\n  ...\n  roomId: 'myUniversalRoomName',\n  ...\n});\n```\n\n## State\n\nNeed to synchronize more than the camera? MirrorVR uses a notification system:\n\n1. First, the mobile device sends a notification with information e.g., current time.\n2. Second, the desktop receives the notification with information, updating its local data structures and UI accordingly.\n\nFirst, pick a name for this update. Here, we will use `time`.\n\nSecond, send a notification that state has changed. The first argument is the name you picked, and the second is state information.\n\n```\nmirrorVR.notify('time', new Date());\n```\n\nThen, 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`.\n\n```\nmirrorVR.init({\n  state: {\n    ...\n    time: {\n      onNotify: function(data) {\n        console.log('Time is ' + data);\n      }\n    }\n  }\n});\n```\n\nNote to self: When deploying, `uglifyjs static/mirrorvr.js dist/mirrorvr.min.js`, and update the version number in `package.json`.\n","funding_links":[],"categories":["Experiences"],"sub_categories":["Motion Controllers inside Unity!"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvinwan%2Fmirrorvr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falvinwan%2Fmirrorvr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvinwan%2Fmirrorvr/lists"}