diff --git a/docs/Oculus-Dev-Setup.md b/docs/Oculus-Dev-Setup.md new file mode 100644 index 0000000..4c8d297 --- /dev/null +++ b/docs/Oculus-Dev-Setup.md @@ -0,0 +1,114 @@ +# Development Setup: Oculus + +## Table of Contents +- Developer Account Set-up +- Enabling Developer Mode for the Oculus Device +- Development Environment Setup on the OS +- Running a local application in the Oculus Browser + - Network address `https://:port` + - Localhost address `https://localhost:8080` +- Debugging within the Oculus Browser +- Oculus Developer Hub +- Additional Resources + +## Developer Account Set-up +Before getting started, you would require a Facebook account and a corresponding [Oculus Developer Account](https://developer.oculus.com/) + + +## Enabling Developer Mode for the Oculus Device +- Download the Oculus App and login using Facebook +- Turn on the headset +- Navigate to devices and select the device + +- Click on 'Developer Mode' and enable it by toggling the switch + + +## Development Environment Setup on the OS +- Connect the Oculus device to your machine via USC-C, and upon being prompted, [Enable Developer Mode](https://developer.oculus.com/documentation/native/android/mobile-device-setup/) + +- Install [ADB driver](https://developer.oculus.com/downloads/package/oculus-adb-drivers/) for your OS + +__For Windows__ + +- Check if the ADB driver path is configured in your global path variable by using the command `echo %PATH%` + +- If is it configured correctly, it should be visible such as + + +- If you cannot see this path `C:\Users\USERNAME\AppData\Local\Android\sdk\platform-tools` present, add it your environment variables either by using the command `setx PATH "%PATH%;C:\Program Files\android-sdk-windows\platform-tools"` or manually by navigating to environment variables and ammending the environment variable: *PATH* + + + +- To check whether your device is connected correctly, use the command `adb devices`. If all is good and the device is detected, you should see the following output: + + + +- [Enable Wifi Debugging](https://developer.oculus.com/documentation/oculus-browser/browser-remote-debugging/) + +## Running a local application in the Oculus Browser +- To run a WebXR application in the browser, HTTPs is required. Before running your application locally, ensure that OPENSSL is configured + +- Run the `webxr-layers` application using `npm run dev` in your local terminal + + +- The application is now running on `https://localhost:8080` or on your network at `https://:port` + +### __There are 2 ways to view the application running locally within your oculus browser, by accessing the following addresses:__ + + +### 1. Network address `https://:port` +Ensure that your oculus device and local machine are both connected to the same WiFi network, and that the oculus device is connected to your machine + +If prompted with the *your connection is not private* screen, click on *advanced* and then *proceed to _IP:PORT_ url*. This should redirect you to the locally running application and allow you to interact with it. + + + + +Additionally, if the steps so far do not result in the desired result, we might need to by-pass the "https" requirement. For this, +- Navigate to chrome://flags on the device +- Search for `Insecure origins treated as secure` +- Then enable it and add http://192.168.1.110:8080/ in the control attached to that setting. Ensure that you have entered the correct IP and port number + +- Reboot the browser, and access the URL again + +### 2. Localhost address `https://localhost:8080` + +To be able to access the local port of your machine on the oculus browser as is, we need to perform reverse port forwarding. Essentially, anytime we access a particular port on the oculus browser - we want to forward that to our local machine. `adb` has built-in support for port forwarding. + +Use the command `adb reverse tcp:PORT tcp:PORT`. Here, we want the port:8080 on the Oculus Browser to be forwarded to port:8080 on our local machine. Hence, run the command as follows: +`adb reverse tcp:8080 tcp:8080` + + + +Now, access `https://localhost:8080` from within the oculus browser. Ensure that the oculus device is connected to your machine. + + + +The application should be visible as shown above. These steps are required to be followed for each debugging session i.e. every time the device is disconnected and then re-connected + +## Debugging within the Oculus Browser +To debug the application running locally and accessible via the Oculus Browser, visit `chrome://inspect/#devices` on your machine browser + +Here you would be able to view all URLs currently active within the Oculus Browser + + + +Click on the URL that you would like to debug + + + +The developer tool and console here are in sycn with any interactions with the application within the Oculus Browser! + + +## Oculus Developer Hub +*For Windows* +- Download [Oculus Developer Hub](https://developer.oculus.com/downloads/package/oculus-developer-hub-win/) +- [Configure your device on ODH](https://developer.oculus.com/documentation/tools/odh/#connect-headset-to-odh) +- [Oculus Developer Hub Debugging Tools](https://developer.oculus.com/documentation/tools/odh-media/) + +## Additional Resources +- [Oculus Developer Documentation](https://developer.oculus.com/develop/) +- [Oculus Browser Remote Debugging](https://developer.oculus.com/documentation/oculus-browser/browser-remote-debugging/) +- [Getting Started with Oculus Browser and Debugging](https://developer.oculus.com/webxr/) + + diff --git a/docs/Project-Setup.md b/docs/Project-Setup.md new file mode 100644 index 0000000..5dd938a --- /dev/null +++ b/docs/Project-Setup.md @@ -0,0 +1,46 @@ +# Project Setup + +## Clone the repository and Install Dependencies +Simply clone the repository and install dependencies. + +``` +> git clone https://github.com/MLH-Fellowship/webxr-layers.git +> cd webxr-layers +> npm install +``` + +At this point, running `npm run dev` should have run the project. But, it would possibly give an error. +This is because of the snowpack configuration. In snowpack.config.js file, we can see inside 'devOptions', the secure flag is set to true. + +It is because to run a WebXR application in the browser, HTTPs is required. + +## Configure HTTPs for localhost + +We will configure HTTPs for localhost and for signing the SSL certificate, OpenSSL will be used. + +### Install OpenSSL +- Download the OpenSSL. ([Download Link](https://slproweb.com/products/Win32OpenSSL.html)) +- Install OpenSSL. +- Add it to the path in Environment Variables. + +### Create SSL certificates + +- In the project root directory, run `npx devcert-cli generate localhost` + +This should generate two certificate files. + +- Rename those files as snowpack.crt and snowpack.key +- Now run `npm run dev` +- Open https://localhost:8080 on your browser to see the project. + +## Setup Browser Emulator + +WebXR Browser Emulator can be used to run and test WebXR content in desktop browsers without using a real XR device. + +- Update the Google Chrome Browser +- Install the Chrome Browser Extension ([Link](https://chrome.google.com/webstore/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje)) +- Open the Project site or https://localhost:8080/ for our project. + +In Developer Tools, there should be a new tab named 'Web XR'. + +- Clicking on that, the Device Emulator should be accessible. diff --git a/docs/assests/ADB_AddedToPath.PNG b/docs/assests/ADB_AddedToPath.PNG new file mode 100644 index 0000000..e65c0fd Binary files /dev/null and b/docs/assests/ADB_AddedToPath.PNG differ diff --git a/docs/assests/ADB_PathVar.PNG b/docs/assests/ADB_PathVar.PNG new file mode 100644 index 0000000..be3bdbf Binary files /dev/null and b/docs/assests/ADB_PathVar.PNG differ diff --git a/docs/assests/EnableDevMode.PNG b/docs/assests/EnableDevMode.PNG new file mode 100644 index 0000000..7e6236a Binary files /dev/null and b/docs/assests/EnableDevMode.PNG differ diff --git a/docs/assests/OculusDeveloperMode.PNG b/docs/assests/OculusDeveloperMode.PNG new file mode 100644 index 0000000..c8e80e1 Binary files /dev/null and b/docs/assests/OculusDeveloperMode.PNG differ diff --git a/docs/assests/adbDevices.PNG b/docs/assests/adbDevices.PNG new file mode 100644 index 0000000..b8db4de Binary files /dev/null and b/docs/assests/adbDevices.PNG differ diff --git a/docs/assests/insecureOrigins.PNG b/docs/assests/insecureOrigins.PNG new file mode 100644 index 0000000..257852e Binary files /dev/null and b/docs/assests/insecureOrigins.PNG differ diff --git a/docs/assests/inspect.PNG b/docs/assests/inspect.PNG new file mode 100644 index 0000000..844ac69 Binary files /dev/null and b/docs/assests/inspect.PNG differ diff --git a/docs/assests/inspectIP8080.PNG b/docs/assests/inspectIP8080.PNG new file mode 100644 index 0000000..ed2b553 Binary files /dev/null and b/docs/assests/inspectIP8080.PNG differ diff --git a/docs/assests/ipaddress.PNG b/docs/assests/ipaddress.PNG new file mode 100644 index 0000000..6b88259 Binary files /dev/null and b/docs/assests/ipaddress.PNG differ diff --git a/docs/assests/localhost8080.PNG b/docs/assests/localhost8080.PNG new file mode 100644 index 0000000..89a2893 Binary files /dev/null and b/docs/assests/localhost8080.PNG differ diff --git a/docs/assests/network_address.PNG b/docs/assests/network_address.PNG new file mode 100644 index 0000000..b725ee5 Binary files /dev/null and b/docs/assests/network_address.PNG differ diff --git a/docs/assests/network_security.PNG b/docs/assests/network_security.PNG new file mode 100644 index 0000000..d15c825 Binary files /dev/null and b/docs/assests/network_security.PNG differ diff --git a/docs/assests/npmrundev.PNG b/docs/assests/npmrundev.PNG new file mode 100644 index 0000000..7186886 Binary files /dev/null and b/docs/assests/npmrundev.PNG differ diff --git a/docs/assests/oculus_flags.PNG b/docs/assests/oculus_flags.PNG new file mode 100644 index 0000000..60927a2 Binary files /dev/null and b/docs/assests/oculus_flags.PNG differ diff --git a/docs/assests/oculus_flags2.PNG b/docs/assests/oculus_flags2.PNG new file mode 100644 index 0000000..966ac69 Binary files /dev/null and b/docs/assests/oculus_flags2.PNG differ diff --git a/docs/assests/portforwarding.PNG b/docs/assests/portforwarding.PNG new file mode 100644 index 0000000..2fdfc57 Binary files /dev/null and b/docs/assests/portforwarding.PNG differ