Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/imagineeeinc/vr-display
a simple app to mirror your display to a VR device using WebXR
https://github.com/imagineeeinc/vr-display
Last synced: about 9 hours ago
JSON representation
a simple app to mirror your display to a VR device using WebXR
- Host: GitHub
- URL: https://github.com/imagineeeinc/vr-display
- Owner: imagineeeinc
- License: mit
- Created: 2023-05-23T11:59:53.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-23T18:50:19.000Z (5 months ago)
- Last Synced: 2024-10-18T02:48:49.143Z (about 1 month ago)
- Language: HTML
- Homepage: https://vr-display.vercel.app
- Size: 9.03 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Web VR Display
Use WebXR to create a Virtual Desktop on any VR Compatible Browser
WebXR is a new Web API available for the web that allows you to display AR and VR content straight through your browser. This project uses the [A-Frame library](https://aframe.io/) to easily create WebXR experiences. It uses [Peerjs](https://peerjs.com/), using [web sockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API), and the [MediaStream API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) to stream your desktop across the network to your VR device.
## Usage
### Setup
1. Clone this repo
2. install dependencies using:
```bash
npm i
# yarn
yarn i
# pnpm (recomended for fast and small package sizes)
pnpm i
```
3. Run `npm start` (or `yarn start` or `pnpm start`) to start the web server
### Connection
1. navigate to localhost:5000/mirror on your the desktop you want to stream from (phones don't support the MediaStreams API), don't do anything yet
2. Open localhost:5000/vr on the VR device (mobile phones with VR support), if you are accessing the the server from a different device replace localhost with the IP address of the device; however WebXR only works with https sites, my solution was to use [Chrome remote debugging Android](https://developer.chrome.com/docs/devtools/remote-debugging/) and forward port 5000, for iPhone doesn't support WebXR. Note: the VR has not been tested on VR headsets.
3. Select a screen distance, 12 to 14 is perfect in vr, and press start. On the vr device/ phone find the device ID in the top left corner, put that number into the device ID text box on the computer being streamed from and tweak the streaming option for reduced latency (recommended not to use audio as it takes up bandwidth) and click share.
- Recommended options for streaming:
- Audio: off (use direct audio if possible)
- quality: 1
- width: 360 to 720
- FPS: 30 to 60
4. Select what you want to share and enable audio sharing if you want audio to be streamed. A preview should pop up on the streaming device.
5. On the VR device you the stream will open on a window in the VR environment.
6. - If your device supports AR a button for AR should be at the bottom that allows you to view the display in you environment
- if your device support VR a button for VR should be at the bottom that should open the experience in VR
7. This app doesn't support input and you will be required to control the streaming device using a mouse, keyboard or controller.
## Credits
- [A-Frame library](https://aframe.io/)
- [Peerjs](https://peerjs.com/)
- [Galaxy Background (eso.org)](https://www.eso.org/public/images/eso0932a/)
## Licence
This project is under MIT Licence