1. [Topics](/topics) [AI](/topics/ai) [XR](/xr) CloudXR.js # 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](https://catalog.ngc.nvidia.com/orgs/nvidia/resources/cloudxr-runtime?version=6.0.4). Built on [NVIDIA CloudXR](/cloudxr-sdk)™ 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](https://docs.nvidia.com/cloudxr-sdk/latest/usr_guide/cloudxr_js/index.html)[Forum](https://forums.developer.nvidia.com/c/gaming-and-visualization-technologies/xr-vr-ar-mr/vr-and-ar-streaming-cloudxr/298) * * * ## How Immersive Web Streaming with CloudXR.js Works The SDK offers a complete solution for immersive web ([WebXR](https://immersiveweb.dev/)) 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. ![NVIDIA CloudXR.js reference streaming architecture](https://developer.download.nvidia.com/images/cloudxr/webxr-arch-diagram(1).svg) _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](https://isaac-sim.github.io/IsaacLab/main/source/how-to/cloudxr_teleoperation.html) ### 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](https://docs.omniverse.nvidia.com/avp/latest/index.html) ### OpenXR Development Support OpenXR applications with global-level scaling, enabling compatibility across a diverse range of XR devices. [Explore SDK Components](https://docs.nvidia.com/cloudxr-sdk/latest/usr_guide/cloudxr_runtime/getting_started.html) * * * ## 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](https://catalog.ngc.nvidia.com/orgs/nvidia/resources/cloudxr-js) or [NGC CLI](https://org.ngc.nvidia.com/setup/installers/cli). ### Step 1: Run OpenXR Server Application # checkout our LOVR sample application git clone 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](https://docs.nvidia.com/cloudxr-sdk/latest/quickstart.html#targeting-web-quest-pico-cloudxr-js) ### Understanding the Samples The following documents provide high-level information about the sample web clients built on top of CloudXR.js.. - [WebGL sample](https://github.com/NVIDIA/cloudxr-js-samples/blob/main/simple/README.md) - [React sample](https://github.com/NVIDIA/cloudxr-js-samples/blob/main/react/README.md) * * * ## CloudXR.js Learning Library Training Isaac Teleop for Robot Policy Training and Development **NVIDIA Isaac Teleop** Learn how to capture high-quality robot demonstration data for policy training and development with NVIDIA Isaac Teleop. 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](https://docs.nvidia.com/cloudxr-sdk/latest/usr_guide/cloudxr_js/index.html)