NVIDIA CloudXR.js: Browser-based XR Streaming SDK

NVIDIA CloudXR.js is a JavaScript Client SDK that enables developers to build enterprise web applications for streaming high-performance VR and AR content from the CloudXR Runtime. Built on NVIDIA CloudXR™ technology, this library provides seamless integration between web browsers and remote rendering systems, allowing users to experience immersive 3D applications directly in their browser.

Documentation Forum

How Immersive Web Streaming with CloudXR.js Works

The SDK offers a complete solution for immersive web (WebXR) streaming, featuring automatic session management, optimized network protocols, and cross-platform compatibility. You can create rich VR/AR experiences that leverage the power of remote servers while maintaining the accessibility and ease of deployment that web applications provide. While we provide examples for WebGL and React Three Fiber implementations, CloudXR.js is a generic solution that integrates with any WebXR-compatible framework, making it suitable for a wide range of use cases, from simple 3D visualizations to complex interactive applications.

The workflow diagram below shows the streaming pipeline utilizing CloudXR.js. In the workflow, an XR headset captures the operator's head and hand motion through the browser's immersive web capabilities. The browser sends this data to the XR application on the server, which renders and submits stereo views to the streaming pipeline. The XR application then encodes and streams the rendered views back to the XR headset for real-time display using a low-latency, GPU-accelerated pipeline.

Fig. CloudXR.js reference streaming architecture

Robotics and Teleoperations

CloudXR enables remote immersion for humanoid robot training and low-latency operational control in robotics applications.

Explore Isaac Lab

Digital Twins With Omniverse

Stream Omniverse Enterprise apps immersively to simulate complex industrial spaces with accurate digital twins in real time.

Spatial Streaming for Omniverse

OpenXR Development

Support OpenXR applications with global-level scaling, enabling compatibility across a diverse range of XR devices.

Explore SDK Components

Get Started With CloudXR.js

A CloudXR Runtime server application is needed to work with the CloudXR.js-based client. Below are the core three steps to get an end-to-end sample experience to run.

Download the artifacts from GitHub through git and NGC through Web UI or NGC CLI.

Step 1: Run OpenXR Server Application

# checkout our LOVR sample application
git glone https://github.com/NVIDIA/cloudxr-lovr-sample

# build and run the server
./run.bat --webrtc

Step 2: Download SDK and Client Sample

ngc registry resource download-version "nvidia/cloudxr-js:6.1.0"

git clone https://github.com/NVIDIA/cloudxr-js-samples

Step 3: Build and Run the Web Client

cd simple

npm install <path/to/download/sdk/tarball>

npm run build

npm run dev-server

Starter Kits

Streaming to Quest/Pico

This guide gets you streaming XR content from a server to a client on your local network.

Quick Start Guide

Understanding the Samples

The following documents provide high-level information about the sample web clients built on top of CloudXR.js..

CloudXR.js Learning Library

Documentation

WebGL Client Sample

NVIDIA Product

Build a Client using standard WebGL graphics API with this example.

Documentation

React Three Fiber Client Sample

NVIDIA Product

Use the latest web graphics API React Three Fiber to build a web client in this sample project.

Documentation

Teleoperation in Isaac Lab

NVIDIA Isaac

NVIDIA Isaac™ Lab lets you work with robotics. This training introduces to this workflow for immersive interaction and teleoperation.

Documentation

Omniverse Spatial Streaming

NVIDIA Omniverse

NVIDIA Omniverse™ simulates real worlds. This example outlines how to get started deploying Omniverse simulation environments for your projects.

Documentation

LOVR OpenXR App Streaming

NVIDIA XR

LoVR is an open-XR server application that can be used when you don’t have server applications to test with. This outlines out to get started using this in your development workflow.

Get started with CloudXR.js today.

Documentation