npm install nvidia-cloudxr-<version>.tgz

import { createSession, SessionState } from '@nvidia/cloudxr';

// 1. Get WebXR session + WebGL context
const xrSession = await navigator.xr.requestSession('immersive-vr', {
  optionalFeatures: ['local-floor'],
});
const gl = xrSession.renderState.baseLayer.context;
const referenceSpace = await xrSession.requestReferenceSpace('local-floor');

// 2. Create CloudXR session
const session = createSession(
  {
    serverAddress: '192.168.1.100',
    serverPort: 49100,
    useSecureConnection: false,
    gl,
    perEyeWidth: 2048,
    perEyeHeight: 1792,
    referenceSpace,
  },
  {
    onStreamStarted: () => console.log('Streaming'),
    onStreamStopped: err => err && console.error(err.message),
  }
);

// 3. Connect
session.connect();

// 4. Render loop
function onFrame(time, frame) {
  session.sendTrackingStateToServer(time, frame);
  session.render(time, frame, xrSession.renderState.baseLayer);
  xrSession.requestAnimationFrame(onFrame);
}
xrSession.requestAnimationFrame(onFrame);

// 5. Disconnect when done
session.disconnect();

import * as CloudXR from '@nvidia/cloudxr';
import { useThree, useFrame } from '@react-three/fiber';
import { useRef } from 'react';
import { bindGL } from '@helpers/WebGLStateBinding';

function CloudXRComponent({ config }) {
  const gl = useThree().gl.getContext() as WebGL2RenderingContext;
  const trackedGL = bindGL(gl);
  const sessionRef = useRef<CloudXR.Session | null>(null);

  // On XR session start → createSession + connect
  // On XR session end → disconnect

  useFrame(state => {
    const xrFrame = state.gl.xr.getFrame();
    if (sessionRef.current?.state === CloudXR.SessionState.Connected && xrFrame) {
      const timestamp = state.clock.elapsedTime * 1000;
      const layer = state.gl.xr.getBaseLayer() as XRWebGLLayer;
      sessionRef.current.sendTrackingStateToServer(timestamp, xrFrame);
      sessionRef.current.render(timestamp, xrFrame, layer);
    }
  }, -1000); // negative priority = run before Three.js render
}

// connect() throws synchronously if it can't initiate
try {
  session.connect();
} catch (e) {
  /* handle */
}

// sendTrackingStateToServer returns false if not connected
if (!session.sendTrackingStateToServer(time, frame)) {
  /* not ready */
}

// Streaming errors arrive via delegate
onStreamStopped: (error?: StreamingError) => {
  if (error) {
    console.error(error.message);
    if (error.code) console.error(`0x${error.code.toString(16).toUpperCase()}`);
  }
};

const channels = session.availableMessageChannels;
for (const ch of channels) {
  if (ch.status === MessageChannelStatus.Ready) {
    ch.sendServerMessage(new Uint8Array([...]));
    const msg = await ch.receiveMessage();
  }
}

createSession({
  serverAddress: 'proxy.example.com',
  serverPort: 443,
  useSecureConnection: true,
  signalingResourcePath: '/192.168.1.100', // target server behind proxy
  // ...
});