End-to-End Example#

This example demonstrates how to establish a CloudXR connection between a server and a client using the CloudXR LÖVR plugin and either an Apple or web client sample. Learn more about these samples from their respective GitHub repositories.

Download the samples#

Server: CloudXR LÖVR Plugin that integrates the CloudXR Runtime into an LÖVR application
Client (Apple): CloudXR Generic Viewer on Apple Vision Pro
Client (Web): CloudXR.js Samples for browser-based clients

Server Setup#

Windows

Make sure Visual Studio 2022 is installed with CMake individual components.
Add firewall rules to allow CloudXR connection from Apple Vision Pro. Refer to Ports and Firewalls for more details. In Windows Defender Firewall -> Advanced settings, add the following two inbound rules:
1. Allow UDP connections to local ports 47998, 47999, 48000, 48002, 48005.
2. Allow TCP connections to local port 48010, 49100.
Start Developer PowerShell for VS 2022 or Developer Command Prompt for VS 2022 (Non-administrator).
Build the LÖVR plugin. Navigate to the directory cloudxr-lovr-sample and enter this command:
```
.\build.bat
```
If using the Apple Generic Viewer client, run the LÖVR plugin with:
```
.\run.bat
```
For CloudXR.js web clients, run the server with:
```
.\run.bat --webrtc
```

Linux

Install the following dependencies as outlined in https://lovr.org/docs/Compiling#linux:

sudo apt install make cmake xorg-dev libcurl4-openssl-dev libxcb-glx0-dev libx11-xcb-dev python3-minimal

Open up required firewall ports for CloudXR. Refer to Ports and Firewalls for more details.

sudo ufw allow 47995/udp
sudo ufw allow 47998/udp
sudo ufw allow 47999/udp
sudo ufw allow 48000/udp
sudo ufw allow 48001/udp
sudo ufw allow 48002/udp
sudo ufw allow 48005/udp
sudo ufw allow 48008/udp
sudo ufw allow 48012/udp
sudo ufw allow 48010/tcp
sudo ufw allow 49100/tcp
sudo ufw reload

Build the LÖVR plugin: navigate to the directory cloudxr-lovr-sample and enter the command:

./build.sh

Run the LÖVR plugin:

./run.sh

Client Setup#

Option 1: Apple Generic Viewer#

Open CloudXRViewer.xcodeproj with Xcode 26.
Add CloudXR Framework as a Swift package dependency. Download CloudXR Framework and in Xcode add https://github.com/NVIDIA/cloudxr-framework (select a tagged release version); this requires GitHub access.
Select CloudXRViewer-visionOS target to build for visionOS.

Option 2: CloudXR.js Web Client#

Download CloudXR.js from NGC.
Clone the CloudXR.js samples repository.
Follow the instructions in the Simple WebGL Sample Workflow or the React Sample Workflow.

Connection and Testing#

Make sure the server is running on the same network as the client.
Connect from your client:
- Apple Generic Viewer:
  1. In the Select Zone dropdown, choose Manual IP Address.
  2. Under IP Address, input the server IP address.
  3. Enable hand tracking.
  4. Click Connect.
- CloudXR.js Web Client:
  1. Open the CloudXR.js sample in your browser.
  2. Enter the server IP address (or host) and port.
  3. Click Connect.
After a few moments, you should see the LÖVR application streaming to your client.
If using a client with active hand tracking, test the following:
1. Finger tracking: You should see blue cubes tracking your finger joints.
2. Server-to-client Audio (Windows server only): Pinching index and thumb produces an audio tone in the client (streamed from the server).
If using Apple Generic Viewer, test the opaque data channels:

While CloudXR.js also supports app messaging, this Server Actions test workflow is specific to the Apple Generic Viewer.
1. Initial text: Received: no data
2. Click the Server Actions tab.
3. Select the only channel available.
4. After you connect to the channel, you can toggle between clicking the Action 1 and Action 2 buttons. Notice that the text updates according to the button pressed.
5. Under Last message received, the LÖVR server app echoes back the message it receives from the button press.