Add CloudXR VR streaming support for PICO 4 Ultra (Early Access)
Replaces manual H264/TCP stereo streaming with NVIDIA CloudXR for
higher-quality stereoscopic rendering and lower latency.
Changes:
- teleop_xr_agent.py: add --cloudxr flag (enables Isaac Sim XR mode,
disables manual StreamingManager)
- deps/cloudxr/: NVIDIA CloudXR.js SDK (Early Access) with Isaac Lab
teleop React web client
- deps/cloudxr/Dockerfile.wss.proxy: HAProxy WSS proxy for PICO 4 Ultra
HTTPS mode (routes wss://48322 → ws://49100)
- deps/cloudxr/isaac/webpack.dev.js: disable file watching to avoid
EMFILE errors with large node_modules
- deps/cloudxr/INSTALL.md: full setup guide
Usage:
# Start CloudXR Runtime + Isaac Lab
cd ~/IsaacLab && ./docker/container.py start \
--files docker-compose.cloudxr-runtime.patch.yaml \
--env-file .env.cloudxr-runtime
# Run teleop with CloudXR
~/IsaacLab/isaaclab.sh -p teleop_xr_agent.py \
--task Isaac-MindRobot-2i-DualArm-IK-Abs-v0 --cloudxr
# Serve web client
cd deps/cloudxr/isaac && npm run dev-server:https
This commit is contained in:
247
deps/cloudxr/docs/documents/Client_Setup.html
vendored
Normal file
247
deps/cloudxr/docs/documents/Client_Setup.html
vendored
Normal file
@@ -0,0 +1,247 @@
|
||||
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Client Setup | CloudXR.js SDK Documentation - v6.0.0-beta</title><meta name="description" content="Documentation for CloudXR.js SDK Documentation"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">CloudXR.js SDK Documentation - v6.0.0-beta</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">CloudXR.js SDK Documentation</a></li><li><a href="Client_Setup.html">Client Setup</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="client-setup-guide" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Client Setup Guide<a href="#client-setup-guide" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p>This guide provides configuration examples for CloudXR.js client devices, including browser setup, web server hosting options, and connection modes. These examples demonstrate common deployment scenarios you may encounter.</p>
|
||||
<a id="web-application-hosting" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Web Application Hosting<a href="#web-application-hosting" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>CloudXR.js client applications can be hosted using either HTTP or HTTPS protocols. We provide examples for both modes to help you choose the right approach for your deployment.</p>
|
||||
<a id="http-mode-development" class="tsd-anchor"></a><h3 class="tsd-anchor-link">HTTP Mode (Development)<a href="#http-mode-development" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>This example demonstrates the simplest configuration for local development and testing.</p>
|
||||
<p><strong>Example command:</strong></p>
|
||||
<pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">dev-server</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<p><strong>Access URLs:</strong></p>
|
||||
<ul>
|
||||
<li>Local: <code>http://localhost:8080/</code></li>
|
||||
<li>Network: <code>http://<server-ip>:8080/</code></li>
|
||||
</ul>
|
||||
<p><strong>Characteristics:</strong></p>
|
||||
<ul>
|
||||
<li>Simplified setup with minimal configuration</li>
|
||||
<li>Supports connections to both <code>ws://</code> (direct) and <code>wss://</code> (proxied) CloudXR Runtime endpoints</li>
|
||||
<li>Requires browser security flags for WebXR functionality (see <a href="#meta-quest-3-browser-configuration">Browser Configuration</a>)</li>
|
||||
<li>Recommended for: Local development, trusted network environments</li>
|
||||
</ul>
|
||||
<a id="https-mode-development-and-production" class="tsd-anchor"></a><h3 class="tsd-anchor-link">HTTPS Mode (Development and Production)<a href="#https-mode-development-and-production" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>This example demonstrates HTTPS hosting, which is used for both development with WebXR devices and production deployments. It provides encrypted client connections and is required for secure WebSocket connections.</p>
|
||||
<p><strong>Example command:</strong></p>
|
||||
<pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">dev-server:https</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<p><strong>Access URLs:</strong></p>
|
||||
<ul>
|
||||
<li>Local: <code>https://localhost:8080/</code></li>
|
||||
<li>Network: <code>https://<server-ip>:8080/</code></li>
|
||||
</ul>
|
||||
<p><strong>Characteristics:</strong></p>
|
||||
<ul>
|
||||
<li>Automatically generates self-signed SSL certificates (for development) or custom certificates (for production)</li>
|
||||
<li><strong>Requires</strong> <code>wss://</code> (secure WebSocket) connection to CloudXR Runtime</li>
|
||||
<li>Browsers enforce mixed content policy, blocking <code>ws://</code> connections from HTTPS pages</li>
|
||||
<li>Requires certificate trust configuration in client browser</li>
|
||||
<li>Recommended for: WebXR device testing, production deployments, remote access, security-sensitive environments</li>
|
||||
</ul>
|
||||
<a id="connection-mode-examples" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Connection Mode Examples<a href="#connection-mode-examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The following table shows example connection configurations between the web application server and CloudXR Runtime:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Client Web Server</th>
|
||||
<th>Runtime Connection</th>
|
||||
<th>Status</th>
|
||||
<th>Use Case</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>HTTP</td>
|
||||
<td><code>ws://server-ip:49100</code></td>
|
||||
<td>✅ Supported</td>
|
||||
<td>Local development (simplest path)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HTTP</td>
|
||||
<td><code>wss://proxy-ip:48322</code></td>
|
||||
<td>✅ Supported</td>
|
||||
<td>Testing proxy configuration</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HTTPS</td>
|
||||
<td><code>ws://server-ip:49100</code></td>
|
||||
<td>❌ Blocked</td>
|
||||
<td>Mixed content security policy violation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HTTPS</td>
|
||||
<td><code>wss://proxy-ip:48322</code></td>
|
||||
<td>✅ Supported</td>
|
||||
<td>WebXR device testing, production deployment</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<blockquote>
|
||||
<p><strong>Important</strong>: When using HTTPS mode for your web application, you must configure a WebSocket proxy with TLS support. See the <a href="Networking_Setup.html#websocket-proxy-setup">Networking Setup Guide - WebSocket Proxy Setup</a> for configuration details.</p>
|
||||
</blockquote>
|
||||
<a id="meta-quest-3-browser-configuration" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Meta Quest 3 Browser Configuration<a href="#meta-quest-3-browser-configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>This section provides configurations for Meta Quest 3 to enable WebXR functionality with CloudXR.js applications.</p>
|
||||
<a id="configure-insecure-origins-http-mode" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Configure Insecure Origins (HTTP Mode)<a href="#configure-insecure-origins-http-mode" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>When using HTTP mode, the Meta Quest 3 browser needs explicit permission to access WebXR APIs from non-HTTPS origins. Here's how to configure it:</p>
|
||||
<ol>
|
||||
<li>
|
||||
<p><strong>Access Chrome flags:</strong></p>
|
||||
<ul>
|
||||
<li>Open the Meta Quest 3 Browser</li>
|
||||
<li>Navigate to <code>chrome://flags</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Enable insecure origins:</strong></p>
|
||||
<ul>
|
||||
<li>Search for "insecure" in the search field</li>
|
||||
<li>Locate the flag: <code>unsafely-treat-insecure-origin-as-secure</code></li>
|
||||
<li>Set the flag to <strong>Enabled</strong></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Add your development server:</strong></p>
|
||||
<ul>
|
||||
<li>In the text field below the flag, enter your web server URL</li>
|
||||
<li><strong>Format</strong>: <code>http://<server-ip>:8080</code></li>
|
||||
<li>Include the protocol (<code>http://</code>) and port number (<code>:8080</code>)</li>
|
||||
<li>Multiple URLs can be separated by commas if needed</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Apply configuration:</strong></p>
|
||||
<ul>
|
||||
<li>Click or tap outside the text field to defocus</li>
|
||||
<li>A "Relaunch" button will appear at the bottom of the screen</li>
|
||||
<li>Click <strong>Relaunch</strong> to apply changes</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Verify configuration:</strong></p>
|
||||
<ul>
|
||||
<li>Return to <code>chrome://flags</code> after relaunch</li>
|
||||
<li>Confirm the flag remains enabled and your URL is saved</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<a id="trust-ssl-certificates-https-mode" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Trust SSL Certificates (HTTPS Mode)<a href="#trust-ssl-certificates-https-mode" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>When using HTTPS mode with self-signed certificates (for the web server and the WebSocket proxy), you need to configure the browser to trust these certificates.</p>
|
||||
<blockquote>
|
||||
<p><strong>Note</strong>: Certificate trust settings persist across browser sessions. You only need to perform this configuration once per certificate.</p>
|
||||
</blockquote>
|
||||
<a id="trust-websocket-proxy-certificate" class="tsd-anchor"></a><h4 class="tsd-anchor-link">Trust WebSocket Proxy Certificate<a href="#trust-websocket-proxy-certificate" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><ol>
|
||||
<li>
|
||||
<p><strong>Access the proxy endpoint:</strong></p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>In Meta Quest 3 Browser in the sample client page, fill in the proxy IP as server IP and corresponding port, and click "click xxx to accept cert" as shown below. Or you can directly navigate to <code>https://<proxy-ip>:48322/</code></p>
|
||||
<p><img src="../media/accept-proxy-cert.png" alt=""></p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Accept certificate warning:</strong></p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Click <strong>Advanced</strong></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Click <strong>Proceed to <code><proxy-ip></code> (unsafe)</strong> or similar option</p>
|
||||
<p><img src="../media/accept-cert.png" alt=""></p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Expected behavior:</strong></p>
|
||||
<ul>
|
||||
<li>The page may display a <code>501 Not Implemented</code> error</li>
|
||||
<li><strong>This is expected</strong> - the proxy only handles WebSocket connections, not HTTP requests</li>
|
||||
<li>The certificate is now trusted for WebSocket connections</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<blockquote>
|
||||
<p><strong>Note</strong>: If you restart or recreate the proxy container (using the Docker HAProxy example with auto-generated certificates), a new self-signed certificate will be generated. You must repeat the certificate trust process by visiting <code>https://<proxy-ip>:48322/</code> again and accepting the new certificate warning. If you mount your own certificate (see <a href="Networking_Setup.html#using-custom-certificates">Networking Setup - Using Custom Certificates</a>), the same certificate persists across restarts and you only need to trust it once.</p>
|
||||
</blockquote>
|
||||
<a id="trust-web-application-certificate" class="tsd-anchor"></a><h4 class="tsd-anchor-link">Trust Web Application Certificate<a href="#trust-web-application-certificate" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><ol>
|
||||
<li>
|
||||
<p><strong>Access the web application:</strong></p>
|
||||
<ul>
|
||||
<li>Open Meta Quest 3 Browser</li>
|
||||
<li>Navigate to <code>https://<server-ip>:8080/</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Accept certificate warning:</strong></p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Click <strong>Advanced</strong></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Click <strong>Proceed to <code><server-ip></code> (unsafe)</strong> or similar option</p>
|
||||
<p><img src="../media/accept-cert.png" alt=""></p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Verify access:</strong></p>
|
||||
<ul>
|
||||
<li>The web application should load successfully</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<a id="verify-webxr-permissions" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Verify WebXR Permissions<a href="#verify-webxr-permissions" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>When connecting to a CloudXR.js application:</p>
|
||||
<ol>
|
||||
<li>The browser will prompt for WebXR permissions</li>
|
||||
<li>Select <strong>Allow</strong> when prompted</li>
|
||||
<li>The immersive session will begin after permission is granted</li>
|
||||
</ol>
|
||||
<blockquote>
|
||||
<p><strong>Tip</strong>: For rapid development and debugging, you can test your CloudXR.js application on a desktop browser before deploying to Meta Quest 3. Detailed setup instructions are provided in the <a href="Show_Cases.Isaac_Lab_Teleop.Teleoperating_on_Meta_Quest_3.html">Isaac Lab Client</a> guide.</p>
|
||||
</blockquote>
|
||||
<a id="network-configuration" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Network Configuration<a href="#network-configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>For network and firewall configuration requirements, including port setup and bandwidth recommendations, see the <a href="Networking_Setup.html">Networking Setup Guide</a>.</p>
|
||||
<a id="common-issues-and-solutions" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Common Issues and Solutions<a href="#common-issues-and-solutions" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="webxr-api-not-available" class="tsd-anchor"></a><h3 class="tsd-anchor-link">WebXR API Not Available<a href="#webxr-api-not-available" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong>Symptoms:</strong></p>
|
||||
<ul>
|
||||
<li>Application displays "WebXR not supported" or similar error</li>
|
||||
<li>Connect button is disabled or missing</li>
|
||||
</ul>
|
||||
<p><strong>Solutions:</strong></p>
|
||||
<ul>
|
||||
<li>Verify browser flags are configured correctly (<a href="#configure-insecure-origins-http-mode">HTTP mode example</a>)</li>
|
||||
<li>Ensure you're accessing via the configured URL exactly as specified</li>
|
||||
<li>Confirm the browser has been relaunched after changing flags</li>
|
||||
<li>Try accessing via incognito/private browsing mode</li>
|
||||
</ul>
|
||||
<a id="certificate-trust-issues" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Certificate Trust Issues<a href="#certificate-trust-issues" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong>Symptoms:</strong></p>
|
||||
<ul>
|
||||
<li>Connection fails with security warnings</li>
|
||||
<li>WebSocket connection shows "SSL certificate error"</li>
|
||||
</ul>
|
||||
<p><strong>Solutions:</strong></p>
|
||||
<ul>
|
||||
<li>Complete the certificate trust process for both web server and proxy</li>
|
||||
<li>Verify you clicked "Proceed" on the certificate warning pages</li>
|
||||
<li>Clear browser cache and retry the trust process</li>
|
||||
<li>For persistent issues, regenerate certificates</li>
|
||||
</ul>
|
||||
<a id="mixed-content-errors" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Mixed Content Errors<a href="#mixed-content-errors" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong>Symptoms:</strong></p>
|
||||
<ul>
|
||||
<li>Console shows "blocked by mixed content policy" errors</li>
|
||||
<li>WebSocket connection fails from HTTPS page</li>
|
||||
</ul>
|
||||
<p><strong>Solutions:</strong></p>
|
||||
<ul>
|
||||
<li>When using <code>npm run dev-server:https</code>, ensure runtime connection uses <code>wss://</code> not <code>ws://</code></li>
|
||||
<li>Verify a WebSocket proxy is configured and running (see <a href="Networking_Setup.html#websocket-proxy-setup">Networking Setup examples</a>)</li>
|
||||
<li>Check that proxy URL is accessible and trusted</li>
|
||||
</ul>
|
||||
<a id="connection-drops-or-instability" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Connection Drops or Instability<a href="#connection-drops-or-instability" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong>Symptoms:</strong></p>
|
||||
<ul>
|
||||
<li>Frequent disconnections during streaming</li>
|
||||
<li>Poor video quality or high latency</li>
|
||||
</ul>
|
||||
<p><strong>Solutions:</strong></p>
|
||||
<ul>
|
||||
<li>Review <a href="Networking_Setup.html">Networking Setup Guide</a> for bandwidth and latency requirements</li>
|
||||
<li>Verify firewall allows traffic on required ports</li>
|
||||
<li>Ensure Wi-Fi connection is on 5GHz or 6GHz band</li>
|
||||
<li>Check for network congestion from other devices</li>
|
||||
</ul>
|
||||
<a id="next-steps" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Next Steps<a href="#next-steps" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
|
||||
<li>Configure networking and firewall: <a href="Networking_Setup.html">Networking Setup Guide</a></li>
|
||||
<li>Set up Isaac Lab teleoperation: <a href="Show_Cases.Isaac_Lab_Teleop.html">Isaac Lab Guide</a></li>
|
||||
</ul>
|
||||
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#client-setup-guide"><span>Client <wbr/>Setup <wbr/>Guide</span></a><ul><li><a href="#web-application-hosting"><span>Web <wbr/>Application <wbr/>Hosting</span></a></li><li><ul><li><a href="#http-mode-development"><span>HTTP <wbr/>Mode (<wbr/>Development)</span></a></li><li><a href="#https-mode-development-and-production"><span>HTTPS <wbr/>Mode (<wbr/>Development and <wbr/>Production)</span></a></li></ul></li><li><a href="#connection-mode-examples"><span>Connection <wbr/>Mode <wbr/>Examples</span></a></li><li><a href="#meta-quest-3-browser-configuration"><span>Meta <wbr/>Quest 3 <wbr/>Browser <wbr/>Configuration</span></a></li><li><ul><li><a href="#configure-insecure-origins-http-mode"><span>Configure <wbr/>Insecure <wbr/>Origins (HTTP <wbr/>Mode)</span></a></li><li><a href="#trust-ssl-certificates-https-mode"><span>Trust SSL <wbr/>Certificates (HTTPS <wbr/>Mode)</span></a></li><li><ul><li><a href="#trust-websocket-proxy-certificate"><span>Trust <wbr/>Web<wbr/>Socket <wbr/>Proxy <wbr/>Certificate</span></a></li><li><a href="#trust-web-application-certificate"><span>Trust <wbr/>Web <wbr/>Application <wbr/>Certificate</span></a></li></ul></li><li><a href="#verify-webxr-permissions"><span>Verify <wbr/>WebXR <wbr/>Permissions</span></a></li></ul></li><li><a href="#network-configuration"><span>Network <wbr/>Configuration</span></a></li><li><a href="#common-issues-and-solutions"><span>Common <wbr/>Issues and <wbr/>Solutions</span></a></li><li><ul><li><a href="#webxr-api-not-available"><span>WebXR API <wbr/>Not <wbr/>Available</span></a></li><li><a href="#certificate-trust-issues"><span>Certificate <wbr/>Trust <wbr/>Issues</span></a></li><li><a href="#mixed-content-errors"><span>Mixed <wbr/>Content <wbr/>Errors</span></a></li><li><a href="#connection-drops-or-instability"><span>Connection <wbr/>Drops or <wbr/>Instability</span></a></li></ul></li><li><a href="#next-steps"><span>Next <wbr/>Steps</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CloudXR.js SDK Documentation - v6.0.0-beta</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
||||
150
deps/cloudxr/docs/documents/Getting_Started.Sample_Client_-_React.html
vendored
Normal file
150
deps/cloudxr/docs/documents/Getting_Started.Sample_Client_-_React.html
vendored
Normal file
@@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Sample Client - React | CloudXR.js SDK Documentation - v6.0.0-beta</title><meta name="description" content="Documentation for CloudXR.js SDK Documentation"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">CloudXR.js SDK Documentation - v6.0.0-beta</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">CloudXR.js SDK Documentation</a></li><li><a href="Getting_Started.html">Getting Started</a></li><li><a href="Getting_Started.Sample_Client_-_React.html">Sample Client - React</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="react-three-fiber-example" class="tsd-anchor"></a><h1 class="tsd-anchor-link">React Three Fiber Example<a href="#react-three-fiber-example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p>This is a comprehensive CloudXR.js React Three Fiber example application that demonstrates how to integrate CloudXR streaming with modern React development patterns. This example showcases the power of combining CloudXR.js with React Three Fiber, React Three XR, and React Three UIKit to create immersive XR experiences with rich 3D user interfaces.</p>
|
||||
<blockquote>
|
||||
<p>NOTE: This example is not meant to be used for production.</p>
|
||||
</blockquote>
|
||||
<a id="overview" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Overview<a href="#overview" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>This example showcases the integration of CloudXR.js with the React Three Fiber ecosystem, providing:</p>
|
||||
<ul>
|
||||
<li><strong>React Three Fiber Integration</strong>: Seamless integration with Three.js through React components</li>
|
||||
<li><strong>React Three XR</strong>: WebXR session management with React hooks and state management</li>
|
||||
<li><strong>React Three UIKit</strong>: Rich 3D user interface components for VR/AR experiences</li>
|
||||
<li><strong>CloudXR Streaming</strong>: Real-time streaming of XR content from a CloudXR server</li>
|
||||
<li><strong>Modern React Patterns</strong>: Hooks, context, and component-based architecture</li>
|
||||
<li><strong>Dual UI System</strong>: 2D HTML interface for configuration and 3D VR interface for interaction</li>
|
||||
</ul>
|
||||
<a id="quick-start" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Quick Start<a href="#quick-start" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="prerequisites" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Prerequisites<a href="#prerequisites" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
|
||||
<li>Node.js (v20 or higher)</li>
|
||||
<li>A CloudXR server running and accessible</li>
|
||||
<li>A WebXR-compatible device (VR headset, AR device)</li>
|
||||
</ul>
|
||||
<a id="installation" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Installation<a href="#installation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ol>
|
||||
<li>
|
||||
<p><strong>Navigate to the example folder</strong></p>
|
||||
<pre><code class="bash"><span class="hl-0">cd</span><span class="hl-1"> </span><span class="hl-2">react</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Install Dependencies</strong></p>
|
||||
<pre><code class="bash"><span class="hl-3"># For this early access release, please run the following to install SDK from the given tarball. This step will not be needed when SDK is publicly accessible.</span><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-2">../nvidia-cloudxr-6.0.0-beta.tgz</span><br/><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Build the Application</strong></p>
|
||||
<pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">build</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Start Development Server</strong></p>
|
||||
<pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">dev-server</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Open in Browser</strong></p>
|
||||
<ul>
|
||||
<li>Navigate to <code>http://localhost:8080</code> (or the port shown in terminal)</li>
|
||||
<li>For desktop browsers, IWER (Immersive Web Emulator Runtime) will automatically load to emulate a Meta Quest 3 headset</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<a id="basic-usage" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Basic Usage<a href="#basic-usage" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ol>
|
||||
<li>
|
||||
<p><strong>Configure Connection</strong></p>
|
||||
<ul>
|
||||
<li>Enter your CloudXR server IP address</li>
|
||||
<li>Set the port (default: 49100)</li>
|
||||
<li>Select AR or VR immersive mode</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Adjust Settings</strong> (Optional)</p>
|
||||
<ul>
|
||||
<li>Configure per-eye resolution (perEyeWidth and perEyeHeight, must be multiples of 16)</li>
|
||||
<li>Set target frame rate and bitrate</li>
|
||||
<li>Adjust XR reference space</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Start Streaming</strong></p>
|
||||
<ul>
|
||||
<li>Click "CONNECT" to initiate the XR session</li>
|
||||
<li>Grant XR permissions when prompted</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<blockquote>
|
||||
<p>NOTE: In order to connect to an actual server and start streaming, you need:</p>
|
||||
<ul>
|
||||
<li>A CloudXR server running and accessible</li>
|
||||
<li>A WebXR-compatible device (VR/AR headset) or desktop browser (IWER loads automatically for emulation)</li>
|
||||
</ul>
|
||||
</blockquote>
|
||||
<a id="technical-architecture" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Technical Architecture<a href="#technical-architecture" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="core-components" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Core Components<a href="#core-components" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><a id="apptsx" class="tsd-anchor"></a><h4 class="tsd-anchor-link"><code>App.tsx</code><a href="#apptsx" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Main React application component managing:</p>
|
||||
<ul>
|
||||
<li>XR store configuration and session state</li>
|
||||
<li>CloudXR component integration</li>
|
||||
<li>2D UI management and event handling</li>
|
||||
<li>Error handling and capability checking</li>
|
||||
<li>React Three Fiber Canvas setup</li>
|
||||
</ul>
|
||||
<a id="cloudxrcomponenttsx" class="tsd-anchor"></a><h4 class="tsd-anchor-link"><code>CloudXRComponent.tsx</code><a href="#cloudxrcomponenttsx" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Handles the core CloudXR streaming functionality:</p>
|
||||
<ul>
|
||||
<li>CloudXR session lifecycle management</li>
|
||||
<li>WebXR session event handling</li>
|
||||
<li>WebGL state management and render target preservation</li>
|
||||
<li>Frame-by-frame rendering loop with pose tracking</li>
|
||||
<li>Integration with Three.js WebXRManager</li>
|
||||
</ul>
|
||||
<a id="cloudxr2duitsx" class="tsd-anchor"></a><h4 class="tsd-anchor-link"><code>CloudXR2DUI.tsx</code><a href="#cloudxr2duitsx" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Manages the 2D HTML interface:</p>
|
||||
<ul>
|
||||
<li>Form field management and localStorage persistence</li>
|
||||
<li>Proxy configuration based on protocol</li>
|
||||
<li>Event listener management and cleanup</li>
|
||||
<li>Error handling and user feedback</li>
|
||||
<li>Configuration validation and updates</li>
|
||||
</ul>
|
||||
<a id="cloudxruitsx-3d-ui" class="tsd-anchor"></a><h4 class="tsd-anchor-link"><code>CloudXRUI.tsx</code> (3D UI)<a href="#cloudxruitsx-3d-ui" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Renders the in-VR user interface:</p>
|
||||
<ul>
|
||||
<li>React Three UIKit components for 3D UI</li>
|
||||
<li>Interactive control buttons with hover effects</li>
|
||||
<li>Server information and status display</li>
|
||||
<li>Event handler integration</li>
|
||||
</ul>
|
||||
<a id="development" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Development<a href="#development" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="project-structure" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Project Structure<a href="#project-structure" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="bash"><span class="hl-0">react/</span><br/><span class="hl-0">├──</span><span class="hl-1"> </span><span class="hl-2">src/</span><br/><span class="hl-0">│</span><span class="hl-1"> </span><span class="hl-2">├──</span><span class="hl-1"> </span><span class="hl-2">App.tsx</span><span class="hl-1"> </span><span class="hl-3"># Main React application</span><br/><span class="hl-0">│</span><span class="hl-1"> </span><span class="hl-2">├──</span><span class="hl-1"> </span><span class="hl-2">CloudXRComponent.tsx</span><span class="hl-1"> </span><span class="hl-3"># CloudXR streaming component</span><br/><span class="hl-0">│</span><span class="hl-1"> </span><span class="hl-2">├──</span><span class="hl-1"> </span><span class="hl-2">CloudXR2DUI.tsx</span><span class="hl-1"> </span><span class="hl-3"># 2D UI management class</span><br/><span class="hl-0">│</span><span class="hl-1"> </span><span class="hl-2">├──</span><span class="hl-1"> </span><span class="hl-2">CloudXRUI.tsx</span><span class="hl-1"> </span><span class="hl-3"># 3D VR UI component</span><br/><span class="hl-0">│</span><span class="hl-1"> </span><span class="hl-2">├──</span><span class="hl-1"> </span><span class="hl-2">index.tsx</span><span class="hl-1"> </span><span class="hl-3"># React app entry point</span><br/><span class="hl-0">│</span><span class="hl-1"> </span><span class="hl-2">└──</span><span class="hl-1"> </span><span class="hl-2">index.html</span><span class="hl-1"> </span><span class="hl-3"># HTML template</span><br/><span class="hl-0">├──</span><span class="hl-1"> </span><span class="hl-2">public/</span><br/><span class="hl-0">│</span><span class="hl-1"> </span><span class="hl-2">├──</span><span class="hl-1"> </span><span class="hl-2">play-circle.svg</span><span class="hl-1"> </span><span class="hl-3"># Play button icon (Heroicons)</span><br/><span class="hl-0">│</span><span class="hl-1"> </span><span class="hl-2">├──</span><span class="hl-1"> </span><span class="hl-2">stop-circle.svg</span><span class="hl-1"> </span><span class="hl-3"># Stop button icon (Heroicons)</span><br/><span class="hl-0">│</span><span class="hl-1"> </span><span class="hl-2">├──</span><span class="hl-1"> </span><span class="hl-2">arrow-uturn-left.svg</span><span class="hl-1"> </span><span class="hl-3"># Reset button icon (Heroicons)</span><br/><span class="hl-0">│</span><span class="hl-1"> </span><span class="hl-2">└──</span><span class="hl-1"> </span><span class="hl-2">arrow-left-start-on-rectangle.svg</span><span class="hl-1"> </span><span class="hl-3"># Disconnect button icon (Heroicons)</span><br/><span class="hl-0">├──</span><span class="hl-1"> </span><span class="hl-2">package.json</span><span class="hl-1"> </span><span class="hl-3"># Dependencies and scripts</span><br/><span class="hl-0">├──</span><span class="hl-1"> </span><span class="hl-2">webpack.common.js</span><span class="hl-1"> </span><span class="hl-3"># Webpack configuration</span><br/><span class="hl-0">├──</span><span class="hl-1"> </span><span class="hl-2">webpack.dev.js</span><span class="hl-1"> </span><span class="hl-3"># Development webpack config</span><br/><span class="hl-0">├──</span><span class="hl-1"> </span><span class="hl-2">webpack.prod.js</span><span class="hl-1"> </span><span class="hl-3"># Production webpack config</span><br/><span class="hl-0">└──</span><span class="hl-1"> </span><span class="hl-2">tsconfig.json</span><span class="hl-1"> </span><span class="hl-3"># TypeScript configuration</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<a id="react-three-fiber-integration" class="tsd-anchor"></a><h2 class="tsd-anchor-link">React Three Fiber Integration<a href="#react-three-fiber-integration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="xr-store-configuration" class="tsd-anchor"></a><h3 class="tsd-anchor-link">XR Store Configuration<a href="#xr-store-configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>The application uses React Three XR's store for XR session management:</p>
|
||||
<pre><code class="javascript"><span class="hl-6">const</span><span class="hl-1"> </span><span class="hl-5">store</span><span class="hl-1"> = </span><span class="hl-0">createXRStore</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-4">foveation:</span><span class="hl-1"> </span><span class="hl-7">0</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">emulate:</span><span class="hl-1"> { </span><span class="hl-4">syntheticEnvironment:</span><span class="hl-1"> </span><span class="hl-6">false</span><span class="hl-1"> },</span><br/><span class="hl-1">});</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<a id="canvas-setup" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Canvas Setup<a href="#canvas-setup" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>React Three Fiber Canvas with WebXR integration:</p>
|
||||
<pre><code class="typescript"><span class="hl-1"><</span><span class="hl-4">Canvas</span><span class="hl-1"> </span><span class="hl-4">events</span><span class="hl-1">={</span><span class="hl-4">noEvents</span><span class="hl-1">} </span><span class="hl-4">gl</span><span class="hl-1">={{ </span><span class="hl-8">preserveDrawingBuffer</span><span class="hl-1">: </span><span class="hl-6">true</span><span class="hl-1"> }}></span><br/><span class="hl-1"> <</span><span class="hl-5">XR</span><span class="hl-1"> </span><span class="hl-4">store</span><span class="hl-1">={</span><span class="hl-4">store</span><span class="hl-1">}></span><br/><span class="hl-1"> <</span><span class="hl-4">CloudXRComponent</span><span class="hl-1"> </span><span class="hl-4">config</span><span class="hl-1">={</span><span class="hl-4">config</span><span class="hl-1">} /></span><br/><span class="hl-1"> <</span><span class="hl-4">CloudXR3DUI</span><span class="hl-1"> </span><span class="hl-4">onAction1</span><span class="hl-1">={</span><span class="hl-4">handleAction1</span><span class="hl-1">} /></span><br/><span class="hl-1"> </</span><span class="hl-5">XR</span><span class="hl-1">></span><br/><span class="hl-1"></</span><span class="hl-4">Canvas</span><span class="hl-1">></span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<a id="custom-render-loop" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Custom Render Loop<a href="#custom-render-loop" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>The CloudXR component uses <code>useFrame</code> for custom rendering:</p>
|
||||
<pre><code class="typescript"><span class="hl-0">useFrame</span><span class="hl-1">((</span><span class="hl-4">state</span><span class="hl-1">, </span><span class="hl-4">delta</span><span class="hl-1">) </span><span class="hl-6">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-9">if</span><span class="hl-1"> (</span><span class="hl-4">webXRManager</span><span class="hl-1">.</span><span class="hl-4">isPresenting</span><span class="hl-1"> && </span><span class="hl-4">session</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-3">// CloudXR rendering logic</span><br/><span class="hl-1"> </span><span class="hl-4">cxrSession</span><span class="hl-1">.</span><span class="hl-0">sendTrackingStateToServer</span><span class="hl-1">(</span><span class="hl-4">timestamp</span><span class="hl-1">, </span><span class="hl-4">xrFrame</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">cxrSession</span><span class="hl-1">.</span><span class="hl-0">render</span><span class="hl-1">(</span><span class="hl-4">timestamp</span><span class="hl-1">, </span><span class="hl-4">xrFrame</span><span class="hl-1">, </span><span class="hl-4">layer</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}, -</span><span class="hl-7">1000</span><span class="hl-1">);</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<a id="3d-user-interface" class="tsd-anchor"></a><h2 class="tsd-anchor-link">3D User Interface<a href="#3d-user-interface" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="react-three-uikit-components" class="tsd-anchor"></a><h3 class="tsd-anchor-link">React Three UIKit Components<a href="#react-three-uikit-components" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>The 3D UI uses React Three UIKit for modern VR/AR interfaces:</p>
|
||||
<ul>
|
||||
<li><strong>Container</strong>: Layout and positioning components</li>
|
||||
<li><strong>Text</strong>: 3D text rendering with custom fonts</li>
|
||||
<li><strong>Button</strong>: Interactive buttons with hover effects</li>
|
||||
<li><strong>Image</strong>: Texture-based image display</li>
|
||||
<li><strong>Root</strong>: Main UI container with pixel-perfect rendering</li>
|
||||
</ul>
|
||||
<a id="ui-positioning" class="tsd-anchor"></a><h3 class="tsd-anchor-link">UI Positioning<a href="#ui-positioning" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>3D UI elements are positioned in world space:</p>
|
||||
<pre><code class="typescript"><span class="hl-1"><</span><span class="hl-4">group</span><span class="hl-1"> </span><span class="hl-4">position</span><span class="hl-1">={</span><span class="hl-4">[</span><span class="hl-7">1.8</span><span class="hl-4">, </span><span class="hl-1">-</span><span class="hl-7">0.5</span><span class="hl-4">, </span><span class="hl-1">-</span><span class="hl-7">1.3</span><span class="hl-4">]} rotation={[</span><span class="hl-7">0</span><span class="hl-4">, </span><span class="hl-1">-</span><span class="hl-7">0.3</span><span class="hl-4">, </span><span class="hl-7">0</span><span class="hl-4">]}></span><br/><span class="hl-4"> <Root pixelSize={0.001} width={1920} height={1440}></span><br/><span class="hl-4"> {</span><span class="hl-3">/* UI components */</span><span class="hl-4">}</span><br/><span class="hl-4"> </Root></span><br/><span class="hl-4"></group></span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<a id="webgl-state-tracking" class="tsd-anchor"></a><h3 class="tsd-anchor-link">WebGL State Tracking<a href="#webgl-state-tracking" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>This example uses WebGL state tracking to prevent rendering conflicts between React Three Fiber and CloudXR. Both libraries render to the same WebGL context, but CloudXR's rendering operations modify WebGL state (framebuffers, textures, buffers, VAOs, shaders, blend modes, etc.) which can interfere with React Three Fiber's expectations. The example wraps the WebGL context with <code>bindGL()</code> from <code>@helpers/WebGLStateBinding</code>, then uses CloudXR's <code>onWebGLStateChangeBegin</code> and <code>onWebGLStateChangeEnd</code> callbacks to automatically save and restore state around CloudXR's rendering. This ensures React Three Fiber always finds the WebGL context in the expected state after each CloudXR render operation.</p>
|
||||
<p>See <code>examples/helpers/WebGLStateBinding.ts</code>, <code>WebGLState.ts</code>, and <code>WebGLStateApply.ts</code> for implementation details. Comprehensive tests are available in <code>tests/unit/WebGLState.test.ts</code> and <code>tests/playwright/WebGLTests/src/WebGLStateBindingTests.ts</code>.</p>
|
||||
<a id="license" class="tsd-anchor"></a><h2 class="tsd-anchor-link">License<a href="#license" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>See the <a href="../media/LICENSE-2">LICENSE</a> file for details.</p>
|
||||
<a id="third-party-assets" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Third-Party Assets<a href="#third-party-assets" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Icons used in the immersive UI are from <a href="https://heroicons.com/">Heroicons</a> by Tailwind Labs, licensed under the MIT License. See <a href="../media/HEROICONS_LICENSE">HEROICONS_LICENSE</a> for details.</p>
|
||||
<a id="next-steps" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Next Steps<a href="#next-steps" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Experience one of the compatible OpenXR applications with CloudXR Runtime</p>
|
||||
<ul>
|
||||
<li><a href="Show_Cases.Isaac_Lab_Teleop.html">Isaac Lab Teleoperation</a></li>
|
||||
</ul>
|
||||
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#react-three-fiber-example"><span>React <wbr/>Three <wbr/>Fiber <wbr/>Example</span></a><ul><li><a href="#overview"><span>Overview</span></a></li><li><a href="#quick-start"><span>Quick <wbr/>Start</span></a></li><li><ul><li><a href="#prerequisites"><span>Prerequisites</span></a></li><li><a href="#installation"><span>Installation</span></a></li><li><a href="#basic-usage"><span>Basic <wbr/>Usage</span></a></li></ul></li><li><a href="#technical-architecture"><span>Technical <wbr/>Architecture</span></a></li><li><ul><li><a href="#core-components"><span>Core <wbr/>Components</span></a></li><li><ul><li><a href="#apptsx"><span>App.tsx</span></a></li><li><a href="#cloudxrcomponenttsx"><span>CloudXRComponent.tsx</span></a></li><li><a href="#cloudxr2duitsx"><span>CloudXR2DUI.tsx</span></a></li><li><a href="#cloudxruitsx-3d-ui"><span>CloudXRUI.tsx (3<wbr/>D UI)</span></a></li></ul></li></ul></li><li><a href="#development"><span>Development</span></a></li><li><ul><li><a href="#project-structure"><span>Project <wbr/>Structure</span></a></li></ul></li><li><a href="#react-three-fiber-integration"><span>React <wbr/>Three <wbr/>Fiber <wbr/>Integration</span></a></li><li><ul><li><a href="#xr-store-configuration"><span>XR <wbr/>Store <wbr/>Configuration</span></a></li><li><a href="#canvas-setup"><span>Canvas <wbr/>Setup</span></a></li><li><a href="#custom-render-loop"><span>Custom <wbr/>Render <wbr/>Loop</span></a></li></ul></li><li><a href="#3d-user-interface"><span>3<wbr/>D <wbr/>User <wbr/>Interface</span></a></li><li><ul><li><a href="#react-three-uikit-components"><span>React <wbr/>Three UIKit <wbr/>Components</span></a></li><li><a href="#ui-positioning"><span>UI <wbr/>Positioning</span></a></li><li><a href="#webgl-state-tracking"><span>WebGL <wbr/>State <wbr/>Tracking</span></a></li></ul></li><li><a href="#license"><span>License</span></a></li><li><ul><li><a href="#third-party-assets"><span>Third-<wbr/>Party <wbr/>Assets</span></a></li></ul></li><li><a href="#next-steps"><span>Next <wbr/>Steps</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CloudXR.js SDK Documentation - v6.0.0-beta</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
||||
118
deps/cloudxr/docs/documents/Getting_Started.Sample_Client_-_WebGL.html
vendored
Normal file
118
deps/cloudxr/docs/documents/Getting_Started.Sample_Client_-_WebGL.html
vendored
Normal file
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Sample Client - WebGL | CloudXR.js SDK Documentation - v6.0.0-beta</title><meta name="description" content="Documentation for CloudXR.js SDK Documentation"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">CloudXR.js SDK Documentation - v6.0.0-beta</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">CloudXR.js SDK Documentation</a></li><li><a href="Getting_Started.html">Getting Started</a></li><li><a href="Getting_Started.Sample_Client_-_WebGL.html">Sample Client - WebGL</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="cloudxrjs-simple-example" class="tsd-anchor"></a><h1 class="tsd-anchor-link">CloudXR.js Simple Example<a href="#cloudxrjs-simple-example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p>A minimal WebGL example demonstrating WebXR streaming from a CloudXR server to a web browser. This example shows how to integrate WebXR with CloudXR to stream immersive VR/AR content.</p>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> This example is for learning purposes, not production use.</p>
|
||||
</blockquote>
|
||||
<a id="quick-start" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Quick Start<a href="#quick-start" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="prerequisites" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Prerequisites<a href="#prerequisites" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
|
||||
<li>Node.js (v20 or higher)</li>
|
||||
</ul>
|
||||
<a id="installation" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Installation<a href="#installation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ol>
|
||||
<li>
|
||||
<p><strong>Navigate to the example folder</strong></p>
|
||||
<pre><code class="bash"><span class="hl-0">cd</span><span class="hl-1"> </span><span class="hl-2">simple</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Install Dependencies</strong></p>
|
||||
<pre><code class="bash"><span class="hl-3"># For this early access release, please run the following to install SDK from the given tarball. This step will not be needed when SDK is publicly accessible.</span><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-2">../nvidia-cloudxr-6.0.0-beta.tgz</span><br/><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Build the Application</strong></p>
|
||||
<pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">build</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Start Development Server</strong></p>
|
||||
<pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">dev-server</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Open in Browser</strong></p>
|
||||
<ul>
|
||||
<li>Navigate to <code>http://localhost:8080</code> (or the port shown in terminal)</li>
|
||||
<li>For desktop browsers, IWER (Immersive Web Emulator Runtime) will automatically load to emulate a Meta Quest 3 headset</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<a id="basic-usage" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Basic Usage<a href="#basic-usage" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ol>
|
||||
<li>
|
||||
<p><strong>Configure Connection</strong></p>
|
||||
<ul>
|
||||
<li>Enter CloudXR server IP address (default: localhost)</li>
|
||||
<li>Set port (default: 49100)</li>
|
||||
<li>Select AR or VR mode</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Adjust Settings (Optional)</strong></p>
|
||||
<ul>
|
||||
<li>Per-eye resolution (must be multiples of 16)</li>
|
||||
<li>Target frame rate (72, 90, or 120 FPS)</li>
|
||||
<li>Streaming bitrate</li>
|
||||
<li>XR reference space and camera offsets</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Start Streaming</strong></p>
|
||||
<ul>
|
||||
<li>Click "CONNECT"</li>
|
||||
<li>Grant XR permissions when prompted</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<p><strong>Requirements:</strong></p>
|
||||
<ul>
|
||||
<li>CloudXR server running and accessible</li>
|
||||
<li>WebXR-compatible device (VR/AR headset) or desktop browser (IWER loads automatically for emulation)</li>
|
||||
</ul>
|
||||
<a id="architecture" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Architecture<a href="#architecture" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="cloudxrclient-class" class="tsd-anchor"></a><h3 class="tsd-anchor-link">CloudXRClient Class<a href="#cloudxrclient-class" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>The main application class (<code>CloudXRClient</code> in <code>main.ts</code>) handles:</p>
|
||||
<p><strong>Initialization:</strong></p>
|
||||
<ul>
|
||||
<li>UI element management and localStorage persistence</li>
|
||||
<li>Browser capability checks (WebXR, WebGL2, WebRTC)</li>
|
||||
<li>Event listener setup</li>
|
||||
</ul>
|
||||
<p><strong>Connection Flow:</strong></p>
|
||||
<ol>
|
||||
<li><strong>WebGL Setup</strong> - Creates high-performance WebGL2 context</li>
|
||||
<li><strong>WebXR Session</strong> - Enters immersive VR/AR mode</li>
|
||||
<li><strong>Reference Space</strong> - Configures coordinate system for tracking</li>
|
||||
<li><strong>CloudXR Session</strong> - Establishes streaming connection to server</li>
|
||||
<li><strong>Render Loop</strong> - Sends tracking data, receives video, renders frames</li>
|
||||
</ol>
|
||||
<p><strong>Key Components:</strong></p>
|
||||
<ul>
|
||||
<li><strong>WebXR Session</strong> - Hardware access (headset, controllers)</li>
|
||||
<li><strong>WebGL Context</strong> - Video rendering</li>
|
||||
<li><strong>CloudXR Session</strong> - Streaming management (WebRTC-based)</li>
|
||||
<li><strong>XRWebGLLayer</strong> - Bridge between WebXR and WebGL</li>
|
||||
</ul>
|
||||
<a id="project-structure" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Project Structure<a href="#project-structure" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><pre><code><span class="hl-4">simple</span><span class="hl-1">/</span><br/><span class="hl-1">├── </span><span class="hl-4">src</span><span class="hl-1">/</span><br/><span class="hl-1">│ └── </span><span class="hl-4">main</span><span class="hl-1">.</span><span class="hl-4">ts</span><span class="hl-1"> # </span><span class="hl-4">Main</span><span class="hl-1"> </span><span class="hl-4">application</span><span class="hl-1"> </span><span class="hl-4">sample</span><br/><span class="hl-1">├── </span><span class="hl-4">index</span><span class="hl-1">.</span><span class="hl-4">html</span><span class="hl-1"> # </span><span class="hl-5">UI</span><span class="hl-1"> </span><span class="hl-4">and</span><span class="hl-1"> </span><span class="hl-4">form</span><span class="hl-1"> </span><span class="hl-4">elements</span><span class="hl-1"> </span><span class="hl-4">sample</span><br/><span class="hl-1">├── </span><span class="hl-4">package</span><span class="hl-1">.</span><span class="hl-4">json</span><span class="hl-1"> # </span><span class="hl-4">Dependencies</span><span class="hl-1"> </span><span class="hl-4">and</span><span class="hl-1"> </span><span class="hl-4">scripts</span><br/><span class="hl-1">├── </span><span class="hl-4">webpack</span><span class="hl-1">.</span><span class="hl-4">common</span><span class="hl-1">.</span><span class="hl-4">js</span><span class="hl-1"> # </span><span class="hl-4">Webpack</span><span class="hl-1"> </span><span class="hl-4">base</span><span class="hl-1"> </span><span class="hl-4">configuration</span><span class="hl-1"> </span><span class="hl-4">sample</span><br/><span class="hl-1">├── </span><span class="hl-4">webpack</span><span class="hl-1">.</span><span class="hl-4">dev</span><span class="hl-1">.</span><span class="hl-4">js</span><span class="hl-1"> # </span><span class="hl-4">Development</span><span class="hl-1"> </span><span class="hl-4">configuration</span><span class="hl-1"> </span><span class="hl-4">sample</span><br/><span class="hl-1">├── </span><span class="hl-4">webpack</span><span class="hl-1">.</span><span class="hl-4">prod</span><span class="hl-1">.</span><span class="hl-4">js</span><span class="hl-1"> # </span><span class="hl-4">Production</span><span class="hl-1"> </span><span class="hl-4">configuration</span><span class="hl-1"> </span><span class="hl-4">sample</span><br/><span class="hl-1">└── </span><span class="hl-4">tsconfig</span><span class="hl-1">.</span><span class="hl-4">json</span><span class="hl-1"> # </span><span class="hl-4">TypeScript</span><span class="hl-1"> </span><span class="hl-4">configuration</span><span class="hl-1"> </span><span class="hl-4">sample</span>
|
||||
</code><button>Copy</button></pre>
|
||||
|
||||
<a id="code-overview" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Code Overview<a href="#code-overview" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The <code>main.ts</code> file contains well-commented code explaining each step:</p>
|
||||
<ol>
|
||||
<li><strong>Browser Checks</strong> - Validates WebXR, WebGL2, and WebRTC support</li>
|
||||
<li><strong>Connection Setup</strong> - Reads form inputs and validates configuration</li>
|
||||
<li><strong>WebGL Initialization</strong> - Creates optimized rendering context</li>
|
||||
<li><strong>WebXR Session</strong> - Enters immersive mode with requested features</li>
|
||||
<li><strong>CloudXR Setup</strong> - Configures streaming session with event handlers</li>
|
||||
<li><strong>Render Loop</strong> - Runs 72-120 times per second:
|
||||
<ul>
|
||||
<li>Sends tracking data to server</li>
|
||||
<li>Receives video frame</li>
|
||||
<li>Renders to display</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<p>Each method includes inline comments explaining the purpose and key concepts.</p>
|
||||
<a id="license" class="tsd-anchor"></a><h2 class="tsd-anchor-link">License<a href="#license" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>See the <a href="../media/LICENSE-1">LICENSE</a> file for details.</p>
|
||||
<a id="next-steps" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Next Steps<a href="#next-steps" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Experience one of the compatible OpenXR applications with CloudXR Runtime</p>
|
||||
<ul>
|
||||
<li><a href="Show_Cases.Isaac_Lab_Teleop.html">Isaac Lab Teleoperation</a></li>
|
||||
</ul>
|
||||
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#cloudxrjs-simple-example"><span>CloudXR.js <wbr/>Simple <wbr/>Example</span></a><ul><li><a href="#quick-start"><span>Quick <wbr/>Start</span></a></li><li><ul><li><a href="#prerequisites"><span>Prerequisites</span></a></li><li><a href="#installation"><span>Installation</span></a></li><li><a href="#basic-usage"><span>Basic <wbr/>Usage</span></a></li></ul></li><li><a href="#architecture"><span>Architecture</span></a></li><li><ul><li><a href="#cloudxrclient-class"><span>CloudXRClient <wbr/>Class</span></a></li></ul></li><li><a href="#project-structure"><span>Project <wbr/>Structure</span></a></li><li><a href="#code-overview"><span>Code <wbr/>Overview</span></a></li><li><a href="#license"><span>License</span></a></li><li><a href="#next-steps"><span>Next <wbr/>Steps</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CloudXR.js SDK Documentation - v6.0.0-beta</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
||||
103
deps/cloudxr/docs/documents/Getting_Started.html
vendored
Normal file
103
deps/cloudxr/docs/documents/Getting_Started.html
vendored
Normal file
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Getting Started | CloudXR.js SDK Documentation - v6.0.0-beta</title><meta name="description" content="Documentation for CloudXR.js SDK Documentation"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">CloudXR.js SDK Documentation - v6.0.0-beta</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">CloudXR.js SDK Documentation</a></li><li><a href="Getting_Started.html">Getting Started</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="getting-started" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Getting Started<a href="#getting-started" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><!-- Below we include the sample README.md for the overview sections. -->
|
||||
<p>It is <em>strongly recommended</em> that you work through this guide if you have never run CloudXR.js before.</p>
|
||||
<a id="the-pieces-of-a-cloudxrjs-deployment" class="tsd-anchor"></a><h2 class="tsd-anchor-link">The Pieces of a CloudXR.js Deployment<a href="#the-pieces-of-a-cloudxrjs-deployment" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Even for development, you'll need all the pieces of a CloudXR.js deployment in order to build and test a client. These are:</p>
|
||||
<ul>
|
||||
<li>a CloudXR Server
|
||||
<ul>
|
||||
<li>with a <em>top-end</em> NVIDIA GPU or 2 (e.g. dual RTX 6000 Ada)</li>
|
||||
<li>which will run
|
||||
<ul>
|
||||
<li>the CloudXR Runtime</li>
|
||||
<li>an OpenXR application (the thing you want to render on the server but see on the client)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>a CloudXR.js development workstation
|
||||
<ul>
|
||||
<li>with Node.js and <code>npm</code></li>
|
||||
<li>which will run
|
||||
<ul>
|
||||
<li>the CloudXR.js sample client build</li>
|
||||
<li>a Node-based development web server</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>a CloudXR.js client
|
||||
<ul>
|
||||
<li>which is one of:
|
||||
<ul>
|
||||
<li>a Meta Quest 3 with its built-in Browser app</li>
|
||||
<li>a desktop browser: <a href="https://www.google.com/chrome">Google Chrome</a> or Edge (IWER automatically loads for WebXR emulation)</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>which will run...
|
||||
<ul>
|
||||
<li>the CloudXR.js sample client <em>served from the development web server</em>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>We <em>recommend</em> that for your first experience, all above run on <em>the same computer</em> to eliminate networking related issues.</p>
|
||||
<a id="high-level-workflow" class="tsd-anchor"></a><h2 class="tsd-anchor-link">High Level Workflow<a href="#high-level-workflow" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>You need both a working client and a working server in order to test. Typically we follow a startup flow where server starts before the client:</p>
|
||||
<ol>
|
||||
<li>CloudXR Runtime</li>
|
||||
<li>Server XR application</li>
|
||||
<li>Sample client build + web server</li>
|
||||
<li>Test from the same computer</li>
|
||||
<li>Test from Quest 3 or a different computer</li>
|
||||
</ol>
|
||||
<a id="detailed-requirements" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Detailed Requirements<a href="#detailed-requirements" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="cloudxr-server" class="tsd-anchor"></a><h3 class="tsd-anchor-link">CloudXR Server<a href="#cloudxr-server" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong>Minimum:</strong> Single NVIDIA RTX 6000 Ada / L40 GPU or equivalent</p>
|
||||
<p><strong>Recommended:</strong> Two (2x) NVIDIA RTX 6000-class Ada (or later) GPUs:</p>
|
||||
<ul>
|
||||
<li>RTX 6000 Ada</li>
|
||||
<li>L40 / L40S</li>
|
||||
<li>RTX 6000 PRO Blackwell (Workstation, Max-Q Workstation, or Server)</li>
|
||||
</ul>
|
||||
<p><strong>Additional requirements:</strong></p>
|
||||
<ul>
|
||||
<li>Linux OS (required for Isaac Lab Teleoperation)</li>
|
||||
<li>Docker and NVIDIA Container Toolkit (Linux only)</li>
|
||||
<li>Network: Wired Ethernet connection recommended</li>
|
||||
</ul>
|
||||
<a id="client-device" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Client Device<a href="#client-device" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong>Supported headset:</strong></p>
|
||||
<ul>
|
||||
<li>Meta Quest 3 (OS version 79 or later) - only headset validated for this release</li>
|
||||
<li>Uses built-in Browser app (no special software installation needed)</li>
|
||||
<li>Some manual browser configuration required (see <a href="Client_Setup.html">Client Setup Guide</a>)</li>
|
||||
</ul>
|
||||
<p><strong>For development/testing:</strong></p>
|
||||
<ul>
|
||||
<li>Desktop <a href="https://www.google.com/chrome">Google Chrome</a> (IWER automatically loads for WebXR emulation)</li>
|
||||
</ul>
|
||||
<a id="network-requirements" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Network Requirements<a href="#network-requirements" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong>Critical requirements:</strong></p>
|
||||
<ul>
|
||||
<li>Latency: ≤ 40ms required, ≤ 20ms recommended</li>
|
||||
<li>Bandwidth: 200+ Mbps per streaming connection</li>
|
||||
<li>WiFi: WiFi 6 (WiFi 6e recommended) at 5GHz or 6GHz</li>
|
||||
<li><strong>At most one WiFi hop:</strong> Either server or client must use wired Ethernet</li>
|
||||
</ul>
|
||||
<p>See <a href="Networking_Setup.html">Networking Setup Guide</a> for detailed configuration examples.</p>
|
||||
<a id="step-by-step-guides" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Step-by-Step Guides<a href="#step-by-step-guides" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Following the high-level workflow above, use these guides to set up each component:</p>
|
||||
<a id="1-set-up-cloudxr-runtime-and-server-application" class="tsd-anchor"></a><h3 class="tsd-anchor-link">1. Set Up CloudXR Runtime and Server Application<a href="#1-set-up-cloudxr-runtime-and-server-application" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Choose an OpenXR server application to stream:</p>
|
||||
<ul>
|
||||
<li><a href="Show_Cases.Isaac_Lab_Teleop.html">Isaac Lab Teleoperation</a> - Robot learning and teleoperation workflows</li>
|
||||
</ul>
|
||||
<p>The guide includes instructions for setting up the CloudXR Runtime alongside the server application.</p>
|
||||
<a id="2-build-and-serve-a-sample-client" class="tsd-anchor"></a><h3 class="tsd-anchor-link">2. Build and Serve a Sample Client<a href="#2-build-and-serve-a-sample-client" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Build one of our example web clients:</p>
|
||||
<ul>
|
||||
<li><a href="Getting_Started.Sample_Client_-_WebGL.html">WebGL Sample</a> - Simple example using vanilla WebGL</li>
|
||||
<li><a href="Getting_Started.Sample_Client_-_React.html">React Sample</a> - Example using React and Three.js</li>
|
||||
</ul>
|
||||
<a id="3-test-and-configure" class="tsd-anchor"></a><h3 class="tsd-anchor-link">3. Test and Configure<a href="#3-test-and-configure" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
|
||||
<li><strong>Test from the same computer first</strong> - Follow the desktop testing sections in the sample guides</li>
|
||||
<li><strong>Test from Meta Quest 3</strong> - See <a href="Client_Setup.html">Client Setup Guide</a> for browser configuration</li>
|
||||
<li><strong>Configure networking</strong> (if needed) - See <a href="Networking_Setup.html">Networking Setup Guide</a> for firewall and proxy examples</li>
|
||||
</ul>
|
||||
<a id="advanced-topics" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Advanced Topics<a href="#advanced-topics" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
|
||||
<li><a href="Session_API.html">Session APIs</a> - Programmatic control of CloudXR sessions</li>
|
||||
<li><a href="Telemetry.html">Telemetry</a> - Performance monitoring and debugging</li>
|
||||
</ul>
|
||||
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#getting-started"><span>Getting <wbr/>Started</span></a><ul><li><a href="#the-pieces-of-a-cloudxrjs-deployment"><span>The <wbr/>Pieces of a <wbr/>CloudXR.js <wbr/>Deployment</span></a></li><li><a href="#high-level-workflow"><span>High <wbr/>Level <wbr/>Workflow</span></a></li><li><a href="#detailed-requirements"><span>Detailed <wbr/>Requirements</span></a></li><li><ul><li><a href="#cloudxr-server"><span>CloudXR <wbr/>Server</span></a></li><li><a href="#client-device"><span>Client <wbr/>Device</span></a></li><li><a href="#network-requirements"><span>Network <wbr/>Requirements</span></a></li></ul></li><li><a href="#step-by-step-guides"><span>Step-<wbr/>by-<wbr/>Step <wbr/>Guides</span></a></li><li><ul><li><a href="#1-set-up-cloudxr-runtime-and-server-application"><span>1. <wbr/>Set <wbr/>Up <wbr/>CloudXR <wbr/>Runtime and <wbr/>Server <wbr/>Application</span></a></li><li><a href="#2-build-and-serve-a-sample-client"><span>2. <wbr/>Build and <wbr/>Serve a <wbr/>Sample <wbr/>Client</span></a></li><li><a href="#3-test-and-configure"><span>3. <wbr/>Test and <wbr/>Configure</span></a></li></ul></li><li><a href="#advanced-topics"><span>Advanced <wbr/>Topics</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CloudXR.js SDK Documentation - v6.0.0-beta</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
||||
418
deps/cloudxr/docs/documents/Networking_Setup.html
vendored
Normal file
418
deps/cloudxr/docs/documents/Networking_Setup.html
vendored
Normal file
File diff suppressed because one or more lines are too long
32
deps/cloudxr/docs/documents/Overview.html
vendored
Normal file
32
deps/cloudxr/docs/documents/Overview.html
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Overview | CloudXR.js SDK Documentation - v6.0.0-beta</title><meta name="description" content="Documentation for CloudXR.js SDK Documentation"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">CloudXR.js SDK Documentation - v6.0.0-beta</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">CloudXR.js SDK Documentation</a></li><li><a href="Overview.html">Overview</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="nvidia-cloudxrjs" class="tsd-anchor"></a><h1 class="tsd-anchor-link">NVIDIA CloudXR.js<a href="#nvidia-cloudxrjs" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p>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's 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.</p>
|
||||
<p>The SDK offers a complete solution for <a href="https://immersiveweb.dev/">WebXR</a> 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 can be integrated with any WebXR-compatible frameworks, making it suitable for a wide range of use cases from simple 3D visualizations to complex interactive applications.</p>
|
||||
<blockquote>
|
||||
<p><strong>Note</strong>: This is an early access beta release of CloudXR.js. Features and APIs may change in future releases.</p>
|
||||
</blockquote>
|
||||
<a id="🖥️-compatible-server-applications" class="tsd-anchor"></a><h2 class="tsd-anchor-link">🖥️ Compatible Server Applications<a href="#🖥️-compatible-server-applications" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>CloudXR.js works with any OpenXR-compatible application running on a local or remote server with the CloudXR Runtime, including:</p>
|
||||
<ul>
|
||||
<li><a href="Show_Cases.Isaac_Lab_Teleop.html"><strong>NVIDIA Isaac Lab</strong></a> - A unified and modular framework for robot learning that aims to simplify common workflows in robotics research.</li>
|
||||
<li><strong>OpenXR applications</strong> - Any OpenXR-compatible application running with the CloudXR Runtime.</li>
|
||||
</ul>
|
||||
<a id="🥽-compatible-client-devices" class="tsd-anchor"></a><h2 class="tsd-anchor-link">🥽 Compatible Client Devices<a href="#🥽-compatible-client-devices" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Our current release is optimized for Meta Quest 3.</p>
|
||||
<a id="🚀-getting-started" class="tsd-anchor"></a><h2 class="tsd-anchor-link">🚀 Getting Started<a href="#🚀-getting-started" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>We provide several web examples to integrate with CloudXR.js. Please follow our <a href="Getting_Started.html">Getting Started Guide</a>.</p>
|
||||
<a id="📚-documentation" class="tsd-anchor"></a><h2 class="tsd-anchor-link">📚 Documentation<a href="#📚-documentation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="client-configuration" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Client Configuration<a href="#client-configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Learn how to configure your client device and web application hosting. Includes browser setup for Meta Quest 3, HTTP vs HTTPS hosting modes, and connection architecture. See <a href="Client_Setup.html">Client Setup Guide</a> for configuration examples and best practices.</p>
|
||||
<a id="session-api" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Session API<a href="#session-api" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Learn how to manage CloudXR streaming sessions, including connection lifecycle, configuration options, and event handling. See <a href="Session_API.html">Session API Guide</a> for comprehensive API documentation.</p>
|
||||
<a id="networking-setup" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Networking Setup<a href="#networking-setup" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Configure your network for optimal CloudXR streaming performance. We provide example configurations for firewall rules, WiFi optimization, and WebSocket proxy deployments. See <a href="Networking_Setup.html">Networking Setup Guide</a> for sample configurations and recommendations.</p>
|
||||
<a id="troubleshooting" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Troubleshooting<a href="#troubleshooting" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Resolve common issues with CloudXR.js applications, including connection problems, streaming issues, and performance optimization. See <a href="Troubleshooting.html">Troubleshooting Guide</a> for solutions to common problems.</p>
|
||||
<a id="📄-licenses" class="tsd-anchor"></a><h2 class="tsd-anchor-link">📄 Licenses<a href="#📄-licenses" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="open-source-dependencies" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Open Source Dependencies<a href="#open-source-dependencies" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>CloudXR.js incorporates third-party open source libraries. The following dependencies require attention for license compliance:</p>
|
||||
<a id="third-party-libraries-bundled-within-cloudxrjs" class="tsd-anchor"></a><h4 class="tsd-anchor-link">Third-Party Libraries Bundled within CloudXR.js<a href="#third-party-libraries-bundled-within-cloudxrjs" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><ul>
|
||||
<li><strong><a href="https://github.com/webrtchacks/adapter">webrtc-adapter</a></strong> - WebRTC compatibility shim for cross-browser support. Licensed under <a href="https://github.com/webrtcHacks/adapter/blob/main/LICENSE.md">BSD 3-Clause License</a>.</li>
|
||||
<li><strong><a href="https://github.com/open-telemetry/opentelemetry-js">opentelemetry-js</a></strong> - An observability framework for creating and managing application telemetry including traces, metrics, and logs. Licensed under <a href="https://github.com/open-telemetry/opentelemetry-js/blob/main/LICENSE">Apache License 2.0</a>.</li>
|
||||
</ul>
|
||||
<a id="peer-dependencies" class="tsd-anchor"></a><h4 class="tsd-anchor-link">Peer Dependencies<a href="#peer-dependencies" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><ul>
|
||||
<li><strong><a href="https://github.com/toji/gl-matrix">gl-matrix</a></strong> - Mathematics library for graphics programming. Licensed under <a href="https://github.com/toji/gl-matrix/blob/master/LICENSE.md">MIT License</a>.</li>
|
||||
<li><strong><a href="https://github.com/dcodeIO/long.js">long.js</a></strong> - A Long class for representing a 64-bit two's-complement integer value. Used for accurate handling of uint64 fields in protobuf messages. Licensed under <a href="https://github.com/dcodeIO/long.js/blob/master/LICENSE">Apache License 2.0</a>.</li>
|
||||
</ul>
|
||||
<p>For a complete list of all dependencies and their licenses, refer to the <code>package.json</code> file in the root directory.</p>
|
||||
<a id="cloudxrjs-license" class="tsd-anchor"></a><h3 class="tsd-anchor-link">CloudXR.js License<a href="#cloudxrjs-license" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>This project is licensed under the <a href="../media/LICENSE">NVIDIA CloudXR License</a>.</p>
|
||||
<blockquote>
|
||||
<p><strong>Important</strong>: This is an evaluation license for internal test and evaluation purposes only. For commercial use, please contact NVIDIA for appropriate licensing terms.</p>
|
||||
<p>Please review the license terms before using this SDK in your projects.</p>
|
||||
</blockquote>
|
||||
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#nvidia-cloudxrjs"><span>NVIDIA <wbr/>CloudXR.js</span></a><ul><li><a href="#🖥️-compatible-server-applications"><span>🖥️ <wbr/>Compatible <wbr/>Server <wbr/>Applications</span></a></li><li><a href="#🥽-compatible-client-devices"><span>🥽 <wbr/>Compatible <wbr/>Client <wbr/>Devices</span></a></li><li><a href="#🚀-getting-started"><span>🚀 <wbr/>Getting <wbr/>Started</span></a></li><li><a href="#📚-documentation"><span>📚 <wbr/>Documentation</span></a></li><li><ul><li><a href="#client-configuration"><span>Client <wbr/>Configuration</span></a></li><li><a href="#session-api"><span>Session API</span></a></li><li><a href="#networking-setup"><span>Networking <wbr/>Setup</span></a></li><li><a href="#troubleshooting"><span>Troubleshooting</span></a></li></ul></li><li><a href="#📄-licenses"><span>📄 <wbr/>Licenses</span></a></li><li><ul><li><a href="#open-source-dependencies"><span>Open <wbr/>Source <wbr/>Dependencies</span></a></li><li><ul><li><a href="#third-party-libraries-bundled-within-cloudxrjs"><span>Third-<wbr/>Party <wbr/>Libraries <wbr/>Bundled within <wbr/>CloudXR.js</span></a></li><li><a href="#peer-dependencies"><span>Peer <wbr/>Dependencies</span></a></li></ul></li><li><a href="#cloudxrjs-license"><span>CloudXR.js <wbr/>License</span></a></li></ul></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CloudXR.js SDK Documentation - v6.0.0-beta</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
||||
92
deps/cloudxr/docs/documents/Session_API.html
vendored
Normal file
92
deps/cloudxr/docs/documents/Session_API.html
vendored
Normal file
File diff suppressed because one or more lines are too long
20
deps/cloudxr/docs/documents/Show_Cases.Isaac_Lab_Teleop.Isaac_Lab_Teleop_Troubleshooting.html
vendored
Normal file
20
deps/cloudxr/docs/documents/Show_Cases.Isaac_Lab_Teleop.Isaac_Lab_Teleop_Troubleshooting.html
vendored
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Isaac Lab Teleop Troubleshooting | CloudXR.js SDK Documentation - v6.0.0-beta</title><meta name="description" content="Documentation for CloudXR.js SDK Documentation"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">CloudXR.js SDK Documentation - v6.0.0-beta</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">CloudXR.js SDK Documentation</a></li><li><a href="Show_Cases.html">Show Cases</a></li><li><a href="Show_Cases.Isaac_Lab_Teleop.html">Isaac Lab Teleop</a></li><li><a href="Show_Cases.Isaac_Lab_Teleop.Isaac_Lab_Teleop_Troubleshooting.html">Isaac Lab Teleop Troubleshooting</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="troubleshooting-isaac-lab-teleop-using-cloudxrjs" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Troubleshooting Isaac Lab Teleop using CloudXR.js<a href="#troubleshooting-isaac-lab-teleop-using-cloudxrjs" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><a id="connected-successfully-but-no-video-content-displays-isaac-viewport-responds-to-tracking" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Connected successfully but no video content displays (Isaac viewport responds to tracking)<a href="#connected-successfully-but-no-video-content-displays-isaac-viewport-responds-to-tracking" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>When running the Docker container, also set the environment variable <code>NV_GPU_INDEX</code> for the runtime container to 0, 1, 2, etc., so the GPU index selected by CUDA matches the one selected by the host or other container.</p>
|
||||
<a id="during-operation-i-accidentally-triggered-the-homemenu-gesture" class="tsd-anchor"></a><h2 class="tsd-anchor-link">During operation, I accidentally triggered the home/menu gesture<a href="#during-operation-i-accidentally-triggered-the-homemenu-gesture" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>This is a known limitation in Meta Quest 3, and we do not have a workaround to disable this gesture. We advise avoiding moving objects with this gesture.</p>
|
||||
<a id="browser-does-not-show-the-buttons" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Browser does not show the buttons<a href="#browser-does-not-show-the-buttons" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>This usually happens if the streaming session does not start correctly. Please quit the WebXR session and refresh the page.</p>
|
||||
<p>If you are using remote debugging view, the Meta Quest 3 browser will not show the DOM overlay of the webpage unless you quit the entire WebXR session.</p>
|
||||
<p>In our upcoming release, we will provide ways to build immersive UIs so you do not need to rely on the webpage. The current workaround is to avoid using remote debugging.</p>
|
||||
<a id="while-teleoperating-the-world-feels-too-highlow" class="tsd-anchor"></a><h3 class="tsd-anchor-link">While teleoperating, the world feels too high/low.<a href="#while-teleoperating-the-world-feels-too-highlow" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>In the CloudXR Client web page in the Meta Quest 3 browser, ensure that the <code>Preferred Reference Space</code> is set to <code>local</code> and adjust the offsets as recommended.</p>
|
||||
<a id="while-teleoperating-i-noticed-significant-lag-sometimes" class="tsd-anchor"></a><h2 class="tsd-anchor-link">While teleoperating, I noticed significant lag sometimes<a href="#while-teleoperating-i-noticed-significant-lag-sometimes" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>There might be different factors causing the issue. For example, if you run streaming for a long time, heat throttling can reduce performance and frame rate.
|
||||
In this case, please power cycle your headset and give it time to cool down first. Other issues include networking, which can be improved by having less congested
|
||||
network environments, and low battery. Please ensure your headset is charged to 50% or above.</p>
|
||||
<a id="troubleshooting-the-web-application" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Troubleshooting the web application<a href="#troubleshooting-the-web-application" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>See the <a href="Troubleshooting.html">Generic Troubleshooting Guide</a>.</p>
|
||||
<a id="other-issues" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Other Issues<a href="#other-issues" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>If you have encountered more issues, please reach out to NVIDIA CloudXR team and share the following files</p>
|
||||
<pre><code class="bash"><span class="hl-3"># Checks filenames of the logs</span><br/><span class="hl-0">docker</span><span class="hl-1"> </span><span class="hl-2">exec</span><span class="hl-1"> </span><span class="hl-6">-it</span><span class="hl-1"> </span><span class="hl-2">cloudxr-runtime</span><span class="hl-1"> </span><span class="hl-2">ls</span><span class="hl-1"> </span><span class="hl-2">/tmp</span><br/><br/><span class="hl-3"># Copy the logs and ETLI files</span><br/><span class="hl-0">docker</span><span class="hl-1"> </span><span class="hl-2">cp</span><span class="hl-1"> </span><span class="hl-2">cloudxr-runtime:/tmp/xxx/cxr_server.xxx.log</span><span class="hl-1"> </span><span class="hl-2">.</span><br/><span class="hl-0">docker</span><span class="hl-1"> </span><span class="hl-2">cp</span><span class="hl-1"> </span><span class="hl-2">cloudxr-runtime:/tmp/xxx/xxx.etli</span><span class="hl-1"> </span><span class="hl-2">.</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<p>Isaac Lab console logs can also be helpful.</p>
|
||||
<a id="known-limitations" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Known Limitations<a href="#known-limitations" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><ul>
|
||||
<li>Re-connection may require page refresh</li>
|
||||
<li>Meta Quest 3 home gesture cannot be disabled and may interfere with hand tracking</li>
|
||||
</ul>
|
||||
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#troubleshooting-isaac-lab-teleop-using-cloudxrjs"><span>Troubleshooting <wbr/>Isaac <wbr/>Lab <wbr/>Teleop using <wbr/>CloudXR.js</span></a><ul><li><a href="#connected-successfully-but-no-video-content-displays-isaac-viewport-responds-to-tracking"><span>Connected successfully but no video content displays (<wbr/>Isaac viewport responds to tracking)</span></a></li><li><a href="#during-operation-i-accidentally-triggered-the-homemenu-gesture"><span>During operation, <wbr/>I accidentally triggered the home/menu gesture</span></a></li><li><a href="#browser-does-not-show-the-buttons"><span>Browser does not show the buttons</span></a></li><li><ul><li><a href="#while-teleoperating-the-world-feels-too-highlow"><span>While teleoperating, the world feels too high/low.</span></a></li></ul></li><li><a href="#while-teleoperating-i-noticed-significant-lag-sometimes"><span>While teleoperating, <wbr/>I noticed significant lag sometimes</span></a></li><li><a href="#troubleshooting-the-web-application"><span>Troubleshooting the web application</span></a></li><li><a href="#other-issues"><span>Other <wbr/>Issues</span></a></li></ul><a href="#known-limitations"><span>Known <wbr/>Limitations</span></a></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CloudXR.js SDK Documentation - v6.0.0-beta</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
||||
116
deps/cloudxr/docs/documents/Show_Cases.Isaac_Lab_Teleop.Setting_Up_Server_for_Teleoperation.html
vendored
Normal file
116
deps/cloudxr/docs/documents/Show_Cases.Isaac_Lab_Teleop.Setting_Up_Server_for_Teleoperation.html
vendored
Normal file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Setting Up Server for Teleoperation | CloudXR.js SDK Documentation - v6.0.0-beta</title><meta name="description" content="Documentation for CloudXR.js SDK Documentation"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">CloudXR.js SDK Documentation - v6.0.0-beta</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">CloudXR.js SDK Documentation</a></li><li><a href="Show_Cases.html">Show Cases</a></li><li><a href="Show_Cases.Isaac_Lab_Teleop.html">Isaac Lab Teleop</a></li><li><a href="Show_Cases.Isaac_Lab_Teleop.Setting_Up_Server_for_Teleoperation.html">Setting Up Server for Teleoperation</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="running-isaac-lab-with-the-cloudxr-runtime" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Running Isaac Lab with the CloudXR Runtime<a href="#running-isaac-lab-with-the-cloudxr-runtime" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><blockquote>
|
||||
<p><strong>Note</strong>: For this early access release, make sure you have a valid subscription to the NVIDIA CloudXR Early Access program on NVIDIA NGC.</p>
|
||||
</blockquote>
|
||||
<a id="download-cloudxr-runtime-container-from-nvidia-ngc" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Download CloudXR Runtime Container from NVIDIA NGC<a href="#download-cloudxr-runtime-container-from-nvidia-ngc" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><ol>
|
||||
<li>Follow <a href="https://docs.nvidia.com/ai-enterprise/deployment/spark-rapids-accelerator/latest/appendix-ngc.html">NGC API Key</a> doc to get your
|
||||
NGC API Key (<code>nvapi-xxxx</code>) for your NGC Organization.
|
||||
<ul>
|
||||
<li>The key should have granted permission to access <code>NGC Catalog</code></li>
|
||||
<li>Save the key to a safe place as it will only appear once</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Setup credential for docker (use username <code>$oauthtoken</code> as literal)<pre><code class="bash"><span class="hl-0">docker</span><span class="hl-1"> </span><span class="hl-2">login</span><span class="hl-1"> </span><span class="hl-2">nvcr.io</span><br/><span class="hl-0">Username:</span><span class="hl-1"> </span><span class="hl-4">$oauthtoken</span><br/><span class="hl-0">Password:</span><span class="hl-1"> <</span><span class="hl-2">your-ngc-api-ke</span><span class="hl-1">y></span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</li>
|
||||
<li>Try to pull docker image and it should succeed<pre><code class="bash"><span class="hl-0">docker</span><span class="hl-1"> </span><span class="hl-2">pull</span><span class="hl-1"> </span><span class="hl-2">nvcr.io/nvidia/cloudxr-runtime-early-access:6.0.1-webrtc</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</li>
|
||||
</ol>
|
||||
<a id="🖥️-option-1-running-isaac-lab-and-cloudxr-runtime-containers-together" class="tsd-anchor"></a><h2 class="tsd-anchor-link">🖥️ Option 1: Running Isaac Lab and CloudXR Runtime Containers Together<a href="#🖥️-option-1-running-isaac-lab-and-cloudxr-runtime-containers-together" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>On your Isaac Lab workstation:</p>
|
||||
<ol>
|
||||
<li>
|
||||
<p>From the root of the Isaac Lab repository, update <code>./docker/.env.cloudxr-runtime</code> to the following version tag</p>
|
||||
<pre><code class="bash"><span class="hl-3"># NVIDIA CloudXR Runtime base image</span><br/><span class="hl-4">CLOUDXR_RUNTIME_BASE_IMAGE_ARG</span><span class="hl-1">=</span><span class="hl-2">nvcr.io/nvidia/cloudxr-runtime-early-access</span><br/><span class="hl-3"># NVIDIA CloudXR Runtime version to use</span><br/><span class="hl-4">CLOUDXR_RUNTIME_VERSION_ARG</span><span class="hl-1">=</span><span class="hl-2">6.0.1-webrtc</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<p>Also update <code>./docker/docker-compose.cloudxr-runtime.patch.yaml</code> to use host network instead:</p>
|
||||
<pre><code class="yaml"><span class="hl-11">services</span><span class="hl-1">:</span><br/><span class="hl-1"> </span><span class="hl-11">cloudxr-runtime</span><span class="hl-1">:</span><br/><span class="hl-1"> </span><span class="hl-11">image</span><span class="hl-1">: </span><span class="hl-12">${CLOUDXR_RUNTIME_BASE_IMAGE_ARG}:${CLOUDXR_RUNTIME_VERSION_ARG}</span><br/><span class="hl-1"> </span><span class="hl-11">network_mode</span><span class="hl-1">: </span><span class="hl-12">host</span><br/><span class="hl-1"> </span><span class="hl-3">#ports:</span><br/><span class="hl-1"> </span><span class="hl-3"># - "48010:48010/tcp" # signaling</span><br/><span class="hl-1"> </span><span class="hl-3"># - "47998:47998/udp" # media</span><br/><span class="hl-1"> </span><span class="hl-3"># - "47999:47999/udp" # media</span><br/><span class="hl-1"> </span><span class="hl-3"># - "48000:48000/udp" # media</span><br/><span class="hl-1"> </span><span class="hl-3"># - "48005:48005/udp" # media</span><br/><span class="hl-1"> </span><span class="hl-3"># - "48008:48008/udp" # media</span><br/><span class="hl-1"> </span><span class="hl-3"># - "48012:48012/udp" # media</span><br/><span class="hl-1"> </span><span class="hl-11">healthcheck</span><span class="hl-1">:</span><br/><span class="hl-1"> </span><span class="hl-7">...</span><br/><span class="hl-1">...</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<p>Start the Isaac Lab and CloudXR Runtime containers using the Isaac Lab <a href="http://container.py">container.py</a> script</p>
|
||||
<pre><code class="bash"><span class="hl-0">./docker/container.py</span><span class="hl-1"> </span><span class="hl-2">start</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--files</span><span class="hl-1"> </span><span class="hl-2">docker-compose.cloudxr-runtime.patch.yaml</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--env-file</span><span class="hl-1"> </span><span class="hl-2">.env.cloudxr-runtime</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<p>If prompted, elect to activate X11 forwarding, which is necessary to see the Isaac Lab UI.</p>
|
||||
<blockquote>
|
||||
<p><strong>Note</strong>: The <code>container.py</code> script is a thin wrapper around Docker Compose. The additional <code>--files</code> and <code>--env-file</code> arguments augment the base Docker Compose configuration to additionally run the CloudXR Runtime.
|
||||
For more details on <code>container.py</code> and running Isaac Lab with Docker Compose, see the <a href="https://isaac-sim.github.io/IsaacLab/main/source/deployment/docker.html#deployment-docker">Docker Guide</a>.</p>
|
||||
</blockquote>
|
||||
</li>
|
||||
<li>
|
||||
<p>Enter the Isaac Lab base container with:</p>
|
||||
<pre><code class="bash"><span class="hl-0">./docker/container.py</span><span class="hl-1"> </span><span class="hl-2">enter</span><span class="hl-1"> </span><span class="hl-2">base</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<p>From within the Isaac Lab base container, you can run Isaac Lab scripts that use XR.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Run an example teleop task with:</p>
|
||||
<pre><code class="bash"><span class="hl-0">./isaaclab.sh</span><span class="hl-1"> </span><span class="hl-6">-p</span><span class="hl-1"> </span><span class="hl-2">scripts/environments/teleoperation/teleop_se3_agent.py</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--task</span><span class="hl-1"> </span><span class="hl-2">Isaac-PickPlace-Locomanipulation-G1-Abs-v0</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--teleop_device</span><span class="hl-1"> </span><span class="hl-2">handtracking</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--enable_pinocchio</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--info</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<blockquote>
|
||||
<p><strong>Note</strong>: You could also choose a different environment like <code>Isaac-PickPlace-GR1T2-Abs-v0</code>.</p>
|
||||
</blockquote>
|
||||
</li>
|
||||
<li>
|
||||
<p>You'll want to leave the container running for the next steps. But once you are finished, you can stop the containers with:</p>
|
||||
<pre><code class="bash"><span class="hl-0">./docker/container.py</span><span class="hl-1"> </span><span class="hl-2">stop</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--files</span><span class="hl-1"> </span><span class="hl-2">docker-compose.cloudxr-runtime.patch.yaml</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--env-file</span><span class="hl-1"> </span><span class="hl-2">.env.cloudxr-runtime</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</li>
|
||||
</ol>
|
||||
<a id="🖥️-option-2-running-isaac-lab-as-local-process-and-cloudxr-runtime-container" class="tsd-anchor"></a><h2 class="tsd-anchor-link">🖥️ Option 2: Running Isaac Lab as Local Process and CloudXR Runtime Container<a href="#🖥️-option-2-running-isaac-lab-as-local-process-and-cloudxr-runtime-container" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>You can also run Isaac Lab as a local process that connects to the CloudXR Runtime Docker container.
|
||||
This method requires you to manually specify a shared directory for communication between the Isaac Lab instance and the CloudXR Runtime.</p>
|
||||
<p>On your Isaac Lab workstation:</p>
|
||||
<ol>
|
||||
<li>From the root of the Isaac Lab repository, create a local folder for temporary cache files:</li>
|
||||
</ol>
|
||||
<pre><code class="bash"><span class="hl-0">mkdir</span><span class="hl-1"> </span><span class="hl-6">-p</span><span class="hl-1"> $(</span><span class="hl-0">pwd</span><span class="hl-1">)</span><span class="hl-2">/openxr</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<ol start="2">
|
||||
<li>Initiate the CloudXR Runtime Docker container, ensuring the previously created directory is mounted to the <code>/openxr</code> directory within the container for Isaac Lab visibility:</li>
|
||||
</ol>
|
||||
<pre><code class="bash"><span class="hl-0">docker</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-6">-dit</span><span class="hl-1"> </span><span class="hl-6">--rm</span><span class="hl-1"> </span><span class="hl-6">--name</span><span class="hl-1"> </span><span class="hl-2">cloudxr-runtime</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--user</span><span class="hl-1"> $(</span><span class="hl-0">id</span><span class="hl-1"> </span><span class="hl-6">-u</span><span class="hl-1">)</span><span class="hl-2">:</span><span class="hl-1">$(</span><span class="hl-0">id</span><span class="hl-1"> </span><span class="hl-6">-g</span><span class="hl-1">) </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--gpus=all</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">-e</span><span class="hl-1"> </span><span class="hl-2">"ACCEPT_EULA=Y"</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--mount</span><span class="hl-1"> </span><span class="hl-2">type=bind,src=</span><span class="hl-1">$(</span><span class="hl-0">pwd</span><span class="hl-1">)</span><span class="hl-2">/openxr,dst=/openxr</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--network</span><span class="hl-1"> </span><span class="hl-2">host</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-2">nvcr.io/nvidia/cloudxr-runtime-early-access:6.0.1-webrtc</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<blockquote>
|
||||
<p>If you choose a particular GPU instead of all, you need to make sure Isaac Lab also runs on that GPU. See <a href="Show_Cases.Isaac_Lab_Teleop.Isaac_Lab_Teleop_Troubleshooting.html">Isaac Lab Teleop Troubleshooting</a> how to do so.</p>
|
||||
</blockquote>
|
||||
<ol start="3">
|
||||
<li>In a new terminal where you intend to run Isaac Lab, export the following environment variables, which reference the directory created above:</li>
|
||||
</ol>
|
||||
<pre><code class="bash"><span class="hl-6">export</span><span class="hl-1"> </span><span class="hl-4">XDG_RUNTIME_DIR</span><span class="hl-1">=$(</span><span class="hl-0">pwd</span><span class="hl-1">)/</span><span class="hl-4">openxr</span><span class="hl-1">/</span><span class="hl-4">run</span><br/><span class="hl-6">export</span><span class="hl-1"> </span><span class="hl-4">XR_RUNTIME_JSON</span><span class="hl-1">=$(</span><span class="hl-0">pwd</span><span class="hl-1">)/</span><span class="hl-4">openxr</span><span class="hl-1">/</span><span class="hl-4">share</span><span class="hl-1">/</span><span class="hl-4">openxr</span><span class="hl-1">/</span><span class="hl-4">1</span><span class="hl-1">/</span><span class="hl-4">openxr_cloudxr</span><span class="hl-1">.</span><span class="hl-4">json</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<ol start="4">
|
||||
<li>Run the example teleop task with:</li>
|
||||
</ol>
|
||||
<pre><code class="bash"><span class="hl-0">./isaaclab.sh</span><span class="hl-1"> </span><span class="hl-6">-p</span><span class="hl-1"> </span><span class="hl-2">scripts/environments/teleoperation/teleop_se3_agent.py</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--task</span><span class="hl-1"> </span><span class="hl-2">Isaac-PickPlace-GR1T2-Abs-v0</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--teleop_device</span><span class="hl-1"> </span><span class="hl-2">handtracking</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--enable_pinocchio</span><span class="hl-1"> </span><span class="hl-10">\</span><br/><span class="hl-1"> </span><span class="hl-6">--info</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<p>With Isaac Lab and the CloudXR Runtime running:</p>
|
||||
<ol>
|
||||
<li>In the Isaac Lab UI: locate the Panel named AR.</li>
|
||||
</ol>
|
||||
<p><img src="../media/ov-ar-panel.png" alt="Isaac Lab UI: AR Panel"></p>
|
||||
<ol start="2">
|
||||
<li>Click <strong>Start AR</strong></li>
|
||||
</ol>
|
||||
<p><img src="../media/startar.png" alt="Start AR"></p>
|
||||
<p>The Viewport should show two eyes being rendered, and you should see the status "AR profile is active".</p>
|
||||
<p><img src="../media/cloudxr_viewport.jpg" alt="Isaac Lab viewport rendering two eyes"></p>
|
||||
<blockquote>
|
||||
<p>Above instructions are <em>modified</em> from <a href="https://isaac-sim.github.io/IsaacLab/main/source/how-to/cloudxr_teleoperation.html#run-isaac-lab-with-the-cloudxr-runtime">these instructions</a>,
|
||||
in particular, to provide the CloudXR Runtime with environment variables needed for streaming to the Meta Quest 3 Browser.</p>
|
||||
</blockquote>
|
||||
<a id="next" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Next<a href="#next" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><a href="Show_Cases.Isaac_Lab_Teleop.Teleoperating_on_Meta_Quest_3.html">Teleoperating on Meta Quest 3</a></p>
|
||||
<a id="previous" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Previous<a href="#previous" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><a href="Show_Cases.Isaac_Lab_Teleop.html">Running Isaac Lab Teleoperation on Meta Quest 3</a></p>
|
||||
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#running-isaac-lab-with-the-cloudxr-runtime"><span>Running <wbr/>Isaac <wbr/>Lab with the <wbr/>CloudXR <wbr/>Runtime</span></a><ul><li><a href="#download-cloudxr-runtime-container-from-nvidia-ngc"><span>Download <wbr/>CloudXR <wbr/>Runtime <wbr/>Container from NVIDIA NGC</span></a></li><li><a href="#🖥️-option-1-running-isaac-lab-and-cloudxr-runtime-containers-together"><span>🖥️ <wbr/>Option 1: <wbr/>Running <wbr/>Isaac <wbr/>Lab and <wbr/>CloudXR <wbr/>Runtime <wbr/>Containers <wbr/>Together</span></a></li><li><a href="#🖥️-option-2-running-isaac-lab-as-local-process-and-cloudxr-runtime-container"><span>🖥️ <wbr/>Option 2: <wbr/>Running <wbr/>Isaac <wbr/>Lab as <wbr/>Local <wbr/>Process and <wbr/>CloudXR <wbr/>Runtime <wbr/>Container</span></a></li><li><a href="#next"><span>Next</span></a></li><li><a href="#previous"><span>Previous</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CloudXR.js SDK Documentation - v6.0.0-beta</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
||||
192
deps/cloudxr/docs/documents/Show_Cases.Isaac_Lab_Teleop.Teleoperating_on_Meta_Quest_3.html
vendored
Normal file
192
deps/cloudxr/docs/documents/Show_Cases.Isaac_Lab_Teleop.Teleoperating_on_Meta_Quest_3.html
vendored
Normal file
@@ -0,0 +1,192 @@
|
||||
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Teleoperating on Meta Quest 3 | CloudXR.js SDK Documentation - v6.0.0-beta</title><meta name="description" content="Documentation for CloudXR.js SDK Documentation"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">CloudXR.js SDK Documentation - v6.0.0-beta</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">CloudXR.js SDK Documentation</a></li><li><a href="Show_Cases.html">Show Cases</a></li><li><a href="Show_Cases.Isaac_Lab_Teleop.html">Isaac Lab Teleop</a></li><li><a href="Show_Cases.Isaac_Lab_Teleop.Teleoperating_on_Meta_Quest_3.html">Teleoperating on Meta Quest 3</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="teleoperating-on-meta-quest-3" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Teleoperating on Meta Quest 3<a href="#teleoperating-on-meta-quest-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><a id="prerequisites" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Prerequisites<a href="#prerequisites" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Before building and hosting the web client, ensure you have the following installed:</p>
|
||||
<ul>
|
||||
<li><strong>Node.js</strong> (v20.19.0 or later) and <strong>npm</strong>
|
||||
<ul>
|
||||
<li>Download and installation instructions: <a href="https://nodejs.org/en/download">https://nodejs.org/en/download</a></li>
|
||||
<li>Verify installation: <code>node --version</code> and <code>npm --version</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<a id="🔨-build-client-and-host-web-server" class="tsd-anchor"></a><h2 class="tsd-anchor-link">🔨 Build Client and Host Web Server<a href="#🔨-build-client-and-host-web-server" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Once you have Isaac Lab and the CloudXR Runtime running, you can build and host the web server for the CloudXR.js client application.</p>
|
||||
<a id="1-navigate-to-example-directory" class="tsd-anchor"></a><h3 class="tsd-anchor-link">1. Navigate to Example Directory<a href="#1-navigate-to-example-directory" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="bash"><span class="hl-0">cd</span><span class="hl-1"> </span><span class="hl-2">isaac</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<a id="2-install-dependencies" class="tsd-anchor"></a><h3 class="tsd-anchor-link">2. Install Dependencies<a href="#2-install-dependencies" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="bash"><span class="hl-3"># For this early access release, install the SDK from the provided tarball</span><br/><span class="hl-3"># This step will not be required when the SDK is publicly accessible</span><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-2">/path/to/nvidia-cloudxr-6.0.0-beta.tgz</span><br/><br/><span class="hl-3"># Install remaining dependencies</span><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<a id="3-choose-hosting-mode" class="tsd-anchor"></a><h3 class="tsd-anchor-link">3. Choose Hosting Mode<a href="#3-choose-hosting-mode" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Select the appropriate server mode based on your deployment requirements:</p>
|
||||
<p><strong>For local development (HTTP):</strong></p>
|
||||
<pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">dev-server</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<ul>
|
||||
<li>Local: <code>http://localhost:8080/</code></li>
|
||||
<li>Network: <code>http://<server-ip>:8080/</code></li>
|
||||
<li>Supports both <code>ws://</code> (direct) and <code>wss://</code> (proxied) runtime connections</li>
|
||||
</ul>
|
||||
<p><strong>For local development or production (HTTPS):</strong></p>
|
||||
<pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">dev-server:https</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<ul>
|
||||
<li>Local: <code>https://localhost:8080/</code></li>
|
||||
<li>Network: <code>https://<server-ip>:8080/</code></li>
|
||||
<li>Generates self-signed certificates for development, use custom certificates for production</li>
|
||||
<li>See <a href="Client_Setup.html#trust-ssl-certificates-https-mode">Client Setup - Trust SSL Certificates</a> for trusting certs in your device</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p><strong>Note</strong>: When using HTTPS mode, you must configure a WebSocket proxy. Browsers enforce mixed content policies that block insecure <code>ws://</code> connections from HTTPS pages. See <a href="Networking_Setup.html#websocket-proxy-setup">Networking Setup - WebSocket Proxy</a> for proxy configuration example.</p>
|
||||
</blockquote>
|
||||
<a id="🖥️-test-from-the-same-computer-optional-but-recommended" class="tsd-anchor"></a><h2 class="tsd-anchor-link">🖥️ Test from the Same Computer (Optional but Recommended)<a href="#🖥️-test-from-the-same-computer-optional-but-recommended" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>For local development, our web app automatically loads IWER (Immersive Web Emulator Runtime) to emulate a Meta Quest 3 headset when no physical XR device is detected.</p>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Make sure you have:</p>
|
||||
<ul>
|
||||
<li>Chromium browser or <a href="https://www.google.com/chrome">Google Chrome</a></li>
|
||||
<li>IWER will automatically load when you start the application
|
||||
<ul>
|
||||
<li>If you have installed the <a href="https://chromewebstore.google.com/detail/immersive-web-emulator/cgffilbpcibhmcfbgggfhfolhkfbhmik?hl=en">Immersive Web Emulator Chrome extension</a>, please disable it as it will conflict with IWER</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p>Ensure your CloudXR Runtime and OpenXR application are running</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Navigate to the web application based on your chosen hosting mode:</p>
|
||||
<ul>
|
||||
<li>HTTP mode: <code>http://localhost:8080/</code></li>
|
||||
<li>HTTPS mode: <code>https://localhost:8080/</code>
|
||||
<ul>
|
||||
<li>Accept the cert (see <a href="Client_Setup.html#trust-web-application-certificate">Client Setup - Trust Web Cert</a>)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p>Make sure you see the following messaging, indicating IWER is loaded</p>
|
||||
<p><img src="../media/iwer-message.png" alt=""></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>(HTTPS mode only) Fill in the <code>Proxy URL</code> if you have any, or click to accept the cert</p>
|
||||
<p><img src="../media/accept-proxy-cert.png" alt=""></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Click <code>CONNECT</code></p>
|
||||
</li>
|
||||
</ol>
|
||||
<p>If successful, you should see the green <code>CONNECT</code> button change to <code>CONNECT (STREAMING)</code>, and the streamed content from your server application will appear in your browser!</p>
|
||||
<p>You could use the develop UI from IWER to emulate device position and input, for example:</p>
|
||||
<p><img src="../media/iwer-buttons.png" alt=""></p>
|
||||
<a id="🥽-test-from-meta-quest-3" class="tsd-anchor"></a><h2 class="tsd-anchor-link">🥽 Test from Meta Quest 3<a href="#🥽-test-from-meta-quest-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Once you've validated the setup works locally, you can test with an actual Meta Quest 3 headset.</p>
|
||||
<a id="prerequisites-1" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Prerequisites<a href="#prerequisites-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ol>
|
||||
<li>
|
||||
<p><strong>Configure Browser</strong>: Follow the <a href="Client_Setup.html#meta-quest-3-browser-configuration">Client Setup Guide - Meta Quest 3 Browser Configuration</a> to:</p>
|
||||
<ul>
|
||||
<li>Enable WebXR for HTTP origins (if using <code>npm run dev-server</code>)</li>
|
||||
<li>Trust SSL certificates (if using <code>npm run dev-server:https</code>)</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Configure Network</strong>: Ensure required ports are open:</p>
|
||||
<ul>
|
||||
<li>Web server: Port 8080 (TCP) or your configured port</li>
|
||||
<li>CloudXR Runtime: Port 49100 (TCP) and 47998-48012 (UDP)</li>
|
||||
<li>WebSocket proxy (if using HTTPS): Port 48322 (TCP) or your configured port</li>
|
||||
<li>See <a href="Networking_Setup.html#firewall-configuration">Networking Setup - Firewall Configuration</a> for details</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<a id="connection-configuration" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Connection Configuration<a href="#connection-configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ol>
|
||||
<li>
|
||||
<p><strong>Navigate to the web application</strong> on your Meta Quest 3 Browser:</p>
|
||||
<ul>
|
||||
<li>HTTP mode: <code>http://<server-ip>:8080/</code></li>
|
||||
<li>HTTPS mode: <code>https://<server-ip>:8080/</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Configure runtime connection</strong> based on your hosting mode:</p>
|
||||
<p><strong>If using HTTP client</strong> (<code>npm run dev-server</code>):</p>
|
||||
<ul>
|
||||
<li>Direct: <code>ws://<server-ip>:49100</code></li>
|
||||
<li>Proxied: <code>wss://<server-ip>:48322</code></li>
|
||||
</ul>
|
||||
<p><strong>If using HTTPS client</strong> (<code>npm run dev-server:https</code>):</p>
|
||||
<ul>
|
||||
<li>Proxied: <code>wss://<server-ip>:48322</code> (required)</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Grant permissions</strong>:</p>
|
||||
<ul>
|
||||
<li>Click <code>CONNECT</code></li>
|
||||
<li>Allow WebXR permissions when prompted</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<a id="application-specific-configuration" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Application-Specific Configuration<a href="#application-specific-configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Before connecting, verify your Isaac Lab server is ready:</p>
|
||||
<ul>
|
||||
<li>CloudXR Runtime is running</li>
|
||||
<li>Isaac Lab is running with the desired task</li>
|
||||
<li>Isaac Lab is using <code>System OpenXR Runtime</code></li>
|
||||
<li>Isaac Lab is in AR mode (<code>Start AR</code> button pressed)</li>
|
||||
</ul>
|
||||
<p>Configure the following application settings in the client web page's <strong>Debug Settings</strong> section:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Setting</th>
|
||||
<th>Recommended Value</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Preferred Reference Space</td>
|
||||
<td><code>local</code></td>
|
||||
<td>Required for proper tracking</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>X Offset (cm)</td>
|
||||
<td><code>0</code></td>
|
||||
<td>Horizontal positioning</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Y Offset (cm)</td>
|
||||
<td><code>-155</code></td>
|
||||
<td>Vertical positioning</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Z Offset (cm)</td>
|
||||
<td><code>10</code></td>
|
||||
<td>Depth positioning</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Teleoperation Countdown Duration (s)</td>
|
||||
<td>User preference</td>
|
||||
<td>Time before recording starts (optional)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<blockquote>
|
||||
<p><strong>Note</strong>: Offset values are task-dependent. Adjust based on robot height and workspace as needed.</p>
|
||||
</blockquote>
|
||||
<a id="how-to-use" class="tsd-anchor"></a><h3 class="tsd-anchor-link">How to use<a href="#how-to-use" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Once streaming starts, you will see a window to your right with teleoperation controls:</p>
|
||||
<p><img src="../media/react-isaac-sample-controls-start.jpg" alt="Isaac Teleoperation Buttons"></p>
|
||||
<ul>
|
||||
<li><code>Countdown</code> - you can use the <code>-</code> (minus) and <code>+</code> (plus) buttons to adjust the countdown timer for starting teleoperation.</li>
|
||||
<li><code>Play</code> - this will start the countdown. Once countdown is finished, the teleoperation session recording starts.</li>
|
||||
<li><code>Reset</code> - this will both <strong>stop and reset</strong> the teleoperation session. After pressing this you can press <code>Play</code> to continue teleoperation (following the countdown timer).</li>
|
||||
<li><code>Disconnect</code> - this will exit the whole streaming and WebXR session</li>
|
||||
</ul>
|
||||
<p>To start teleoperating, click <code>Play</code>. It will start counting down in seconds as configured.</p>
|
||||
<p><img src="../media/react-isaac-sample-controls-countdown.jpg" alt="Isaac Teleoperation Countdown"></p>
|
||||
<p>During the countdown, position your hands at the right place and wait for recording to start.</p>
|
||||
<p>Whenever you complete a task, it will automatically start a new recording and generate the recording file.</p>
|
||||
<p><img src="../media/react-isaac-sample-controls-running.jpg" alt="Isaac Teleoperation Running"></p>
|
||||
<p>To stop teleoperating and reset the position of robot arm, click the <code>Reset</code> button.</p>
|
||||
<a id="next" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Next<a href="#next" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><a href="Show_Cases.Isaac_Lab_Teleop.Isaac_Lab_Teleop_Troubleshooting.html">Troubleshooting Isaac Lab Teleoperation using CloudXR.js</a></p>
|
||||
<a id="previous" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Previous<a href="#previous" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><a href="Show_Cases.Isaac_Lab_Teleop.Setting_Up_Server_for_Teleoperation.html">Running Isaac Lab with the CloudXR Runtime</a></p>
|
||||
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#teleoperating-on-meta-quest-3"><span>Teleoperating on <wbr/>Meta <wbr/>Quest 3</span></a><ul><li><a href="#prerequisites"><span>Prerequisites</span></a></li><li><a href="#🔨-build-client-and-host-web-server"><span>🔨 <wbr/>Build <wbr/>Client and <wbr/>Host <wbr/>Web <wbr/>Server</span></a></li><li><ul><li><a href="#1-navigate-to-example-directory"><span>1. <wbr/>Navigate to <wbr/>Example <wbr/>Directory</span></a></li><li><a href="#2-install-dependencies"><span>2. <wbr/>Install <wbr/>Dependencies</span></a></li><li><a href="#3-choose-hosting-mode"><span>3. <wbr/>Choose <wbr/>Hosting <wbr/>Mode</span></a></li></ul></li><li><a href="#🖥️-test-from-the-same-computer-optional-but-recommended"><span>🖥️ <wbr/>Test from the <wbr/>Same <wbr/>Computer (<wbr/>Optional but <wbr/>Recommended)</span></a></li><li><a href="#🥽-test-from-meta-quest-3"><span>🥽 <wbr/>Test from <wbr/>Meta <wbr/>Quest 3</span></a></li><li><ul><li><a href="#prerequisites-1"><span>Prerequisites</span></a></li><li><a href="#connection-configuration"><span>Connection <wbr/>Configuration</span></a></li><li><a href="#application-specific-configuration"><span>Application-<wbr/>Specific <wbr/>Configuration</span></a></li><li><a href="#how-to-use"><span>How to use</span></a></li></ul></li><li><a href="#next"><span>Next</span></a></li><li><a href="#previous"><span>Previous</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CloudXR.js SDK Documentation - v6.0.0-beta</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
||||
33
deps/cloudxr/docs/documents/Show_Cases.Isaac_Lab_Teleop.html
vendored
Normal file
33
deps/cloudxr/docs/documents/Show_Cases.Isaac_Lab_Teleop.html
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Isaac Lab Teleop | CloudXR.js SDK Documentation - v6.0.0-beta</title><meta name="description" content="Documentation for CloudXR.js SDK Documentation"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">CloudXR.js SDK Documentation - v6.0.0-beta</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">CloudXR.js SDK Documentation</a></li><li><a href="Show_Cases.html">Show Cases</a></li><li><a href="Show_Cases.Isaac_Lab_Teleop.html">Isaac Lab Teleop</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="running-isaac-lab-teleoperation-on-meta-quest-3" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Running Isaac Lab Teleoperation on Meta Quest 3<a href="#running-isaac-lab-teleoperation-on-meta-quest-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p>NVIDIA CloudXR enables seamless, high-fidelity immersive streaming to extended reality (XR) devices over the network. Developers can use CloudXR with NVIDIA Isaac Lab to build teleoperation workflows that require immersive XR rendering for increased spatial acuity and hand tracking for teleoperation of dexterous robots.</p>
|
||||
<p>In these workflows, a compatible XR system captures operator head and hand motion. CloudXR sends this data to Isaac Lab, which renders and submits stereo views of the robot simulation to CloudXR. CloudXR then encodes and streams the rendered views back to the XR system for display in realtime using a low-latency, GPU-accelerated pipeline.</p>
|
||||
<p>This guide provides the Isaac Lab-specific details referenced in the First Run Guide, including installation, CloudXR Runtime configuration, and teleoperation settings.</p>
|
||||
<a id="system-requirements" class="tsd-anchor"></a><h2 class="tsd-anchor-link">System Requirements<a href="#system-requirements" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Prior to using CloudXR with Isaac Lab, please review the following system requirements:</p>
|
||||
<a id="🖥️-isaac-lab-workstation" class="tsd-anchor"></a><h3 class="tsd-anchor-link">🖥️ <strong>Isaac Lab Workstation</strong><a href="#🖥️-isaac-lab-workstation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
|
||||
<li>Ubuntu 22.04 or Ubuntu 24.04
|
||||
<ul>
|
||||
<li><a href="https://docs.docker.com/engine/install/ubuntu/#installation-methods">Docker</a> 26.0.0+, <a href="https://docs.docker.com/compose/install/linux/#install-using-the-repository">Docker Compose</a> 2.25.0+, and the <a href="https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/latest/install-guide.html">NVIDIA Container Toolkit</a>. Refer to the <a href="https://isaac-sim.github.io/IsaacLab/main/source/deployment/docker.html#deployment-docker">Isaac Lab Docker Guide</a> for how to install.</li>
|
||||
<li>For details on driver requirements, please see the <a href="https://docs.omniverse.nvidia.com/materials-and-rendering/latest/common/technical-requirements.html">Technical Requirements</a> guide</li>
|
||||
<li>Follow the <a href="https://isaac-sim.github.io/IsaacLab/main/source/setup/installation/index.html#local-installation">Isaac Lab installation guide</a> to install Isaac Sim and Isaac Lab.</li>
|
||||
<li>Required for best performance: 16 cores Intel Core i9, X-series or higher AMD Ryzen 9, Threadripper or higher</li>
|
||||
<li>Required for best performance: 64GB RAM</li>
|
||||
<li>Required for best performance: 2x RTX PRO 6000 GPUs (or equivalent e.g. 2x RTX 5090)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<a id="🥽-meta-quest-3" class="tsd-anchor"></a><h3 class="tsd-anchor-link">🥽 <strong>Meta Quest 3</strong><a href="#🥽-meta-quest-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Meta Quest 3 (OS version 79 or later).</p>
|
||||
<a id="🌐-wifi-6-capable-router" class="tsd-anchor"></a><h3 class="tsd-anchor-link">🌐 <strong>WiFi 6 Capable Router</strong><a href="#🌐-wifi-6-capable-router" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
|
||||
<li>A strong wireless connection is essential for a high-quality streaming experience. Refer to the requirements of <a href="Networking_Setup.html">Networking Setup</a> for more details.</li>
|
||||
<li>We recommend using a dedicated router, as concurrent usage will degrade quality</li>
|
||||
<li>The Meta Quest 3 and Isaac Lab workstation must be IP-reachable from one another
|
||||
<ul>
|
||||
<li>Many institutional wireless networks will prevent devices from reaching each other, resulting in the Meta Quest 3 being unable to find the Isaac Lab workstation on the network</li>
|
||||
<li>See <a href="Networking_Setup.html">Networking Setup</a> guide for more details</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<a id="next" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Next<a href="#next" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><ol>
|
||||
<li><a href="Show_Cases.Isaac_Lab_Teleop.Setting_Up_Server_for_Teleoperation.html">Running Isaac Lab with the CloudXR Runtime</a></li>
|
||||
<li><a href="Show_Cases.Isaac_Lab_Teleop.Teleoperating_on_Meta_Quest_3.html">Running Teleop Client on Meta Quest 3</a></li>
|
||||
</ol>
|
||||
<p>If you encounter issues, please see <a href="Show_Cases.Isaac_Lab_Teleop.Isaac_Lab_Teleop_Troubleshooting.html">Troubleshooting</a>.</p>
|
||||
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#running-isaac-lab-teleoperation-on-meta-quest-3"><span>Running <wbr/>Isaac <wbr/>Lab <wbr/>Teleoperation on <wbr/>Meta <wbr/>Quest 3</span></a><ul><li><a href="#system-requirements"><span>System <wbr/>Requirements</span></a></li><li><ul><li><a href="#🖥️-isaac-lab-workstation"><span>🖥️ <wbr/>Isaac <wbr/>Lab <wbr/>Workstation</span></a></li><li><a href="#🥽-meta-quest-3"><span>🥽 <wbr/>Meta <wbr/>Quest 3</span></a></li><li><a href="#🌐-wifi-6-capable-router"><span>🌐 <wbr/>Wi<wbr/>Fi 6 <wbr/>Capable <wbr/>Router</span></a></li></ul></li><li><a href="#next"><span>Next</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CloudXR.js SDK Documentation - v6.0.0-beta</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
||||
4
deps/cloudxr/docs/documents/Show_Cases.html
vendored
Normal file
4
deps/cloudxr/docs/documents/Show_Cases.html
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Show Cases | CloudXR.js SDK Documentation - v6.0.0-beta</title><meta name="description" content="Documentation for CloudXR.js SDK Documentation"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">CloudXR.js SDK Documentation - v6.0.0-beta</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">CloudXR.js SDK Documentation</a></li><li><a href="Show_Cases.html">Show Cases</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="show-cases" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Show Cases<a href="#show-cases" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><ul>
|
||||
<li><a href="Show_Cases.Isaac_Lab_Teleop.html">Running Isaac Lab Teleoperation on Meta Quest 3</a></li>
|
||||
</ul>
|
||||
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#show-cases"><span>Show <wbr/>Cases</span></a></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CloudXR.js SDK Documentation - v6.0.0-beta</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
||||
40
deps/cloudxr/docs/documents/Telemetry.html
vendored
Normal file
40
deps/cloudxr/docs/documents/Telemetry.html
vendored
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Telemetry | CloudXR.js SDK Documentation - v6.0.0-beta</title><meta name="description" content="Documentation for CloudXR.js SDK Documentation"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">CloudXR.js SDK Documentation - v6.0.0-beta</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">CloudXR.js SDK Documentation</a></li><li><a href="Telemetry.html">Telemetry</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="telemetry" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Telemetry<a href="#telemetry" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p>Anonymous collection of system performance data to enhance service quality.</p>
|
||||
<a id="overview" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Overview<a href="#overview" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>We collect the following functional events:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>CXR_LifetimeEvent</code>: Tracks events when a <code>CloudXRSession</code> is created and destroyed.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>CXR_SessionConfiguration</code>: Gathers session initialization metadata such as resolution used to initialize a <code>CloudXRSession</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>CXR_SessionState</code>: Monitors changes in the <code>SessionState</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>CXR_ExceptionInfo</code>: Records exceptions, occurring within a <code>CloudXRSession</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>CXR_ClientRequest</code>: Records the action when the client sends a message to server.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>CXR_ServerResponse</code>: Records the action when the server responds to client requests.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>CXR_ClientMetricEvent</code>: Records performance metrics for <code>CloudXRSession</code>, such as session duration, frame counts, and message statistics.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Data is collected exclusively for service purposes, without capturing any persistent IDs or personal information, and it is not associated with any specific user or device. To opt out of telemetry data collection, disable telemetry in the session configuration.</p>
|
||||
<a id="configuration" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Configuration<a href="#configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Telemetry can be configured when creating a CloudXR session:</p>
|
||||
<pre><code class="typescript"><span class="hl-9">import</span><span class="hl-1"> </span><span class="hl-6">*</span><span class="hl-1"> </span><span class="hl-9">as</span><span class="hl-1"> </span><span class="hl-4">CloudXR</span><span class="hl-1"> </span><span class="hl-9">from</span><span class="hl-1"> </span><span class="hl-2">'@nvidia/cloudxr'</span><span class="hl-1">;</span><br/><br/><span class="hl-6">const</span><span class="hl-1"> </span><span class="hl-5">session</span><span class="hl-1"> = </span><span class="hl-4">CloudXR</span><span class="hl-1">.</span><span class="hl-0">createSession</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-3">// ... other session options</span><br/><span class="hl-1"> </span><span class="hl-4">telemetry:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">enabled:</span><span class="hl-1"> </span><span class="hl-6">true</span><span class="hl-1">, </span><span class="hl-3">// Enable telemetry collection (default: true)</span><br/><span class="hl-1"> </span><span class="hl-4">appInfo:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">product:</span><span class="hl-1"> </span><span class="hl-2">'My CloudXR App'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">version:</span><span class="hl-1"> </span><span class="hl-2">'1.0.0'</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<a id="telemetry-options" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Telemetry Options<a href="#telemetry-options" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
|
||||
<li><code>enabled</code>: Boolean flag to enable/disable telemetry collection. Defaults to <code>true</code>.</li>
|
||||
<li><code>appInfo</code>: Optional application information object containing:
|
||||
<ul>
|
||||
<li><code>product</code>: Product name (e.g., "MyApp")</li>
|
||||
<li><code>version</code>: Application version (e.g., "1.0.0")</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#telemetry"><span>Telemetry</span></a><ul><li><a href="#overview"><span>Overview</span></a></li><li><a href="#configuration"><span>Configuration</span></a></li><li><ul><li><a href="#telemetry-options"><span>Telemetry <wbr/>Options</span></a></li></ul></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CloudXR.js SDK Documentation - v6.0.0-beta</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
||||
56
deps/cloudxr/docs/documents/Troubleshooting.html
vendored
Normal file
56
deps/cloudxr/docs/documents/Troubleshooting.html
vendored
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Troubleshooting | CloudXR.js SDK Documentation - v6.0.0-beta</title><meta name="description" content="Documentation for CloudXR.js SDK Documentation"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">CloudXR.js SDK Documentation - v6.0.0-beta</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">CloudXR.js SDK Documentation</a></li><li><a href="Troubleshooting.html">Troubleshooting</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="troubleshooting" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Troubleshooting<a href="#troubleshooting" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p>This guide helps you diagnose and resolve common issues when using CloudXR.js for WebXR streaming.</p>
|
||||
<a id="common-issues" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Common Issues<a href="#common-issues" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="i-got-a-blank-page-when-opening-the-url-or-it-streams-2d-only-in-browser" class="tsd-anchor"></a><h3 class="tsd-anchor-link">I got a blank page when opening the URL or it streams 2D only in browser<a href="#i-got-a-blank-page-when-opening-the-url-or-it-streams-2d-only-in-browser" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong>For HTTP Mode:</strong></p>
|
||||
<p>If you're using HTTP mode (<code>http://</code>), you need to configure the Chromium browser to allow WebXR usage from insecure origins:</p>
|
||||
<ul>
|
||||
<li>Open Meta Quest 3 Browser or desktop Google Chrome</li>
|
||||
<li>Navigate to <code>chrome://flags</code></li>
|
||||
<li>Search for "insecure", and locate "Treat insecure origins as secure"</li>
|
||||
<li><em>Enable the flag</em></li>
|
||||
<li>Then in the text box below the flag, add your development web server
|
||||
<ul>
|
||||
<li>You <em>must</em> include the protocol (<code>http</code>) and the port (<code>:8080</code>)</li>
|
||||
<li><code>http://your-ip-address:8080</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><em>De-focus the text box</em> by "clicking somewhere else"</li>
|
||||
<li>A "Relaunch" message should appear at the bottom of the window</li>
|
||||
<li>Click "Relaunch"</li>
|
||||
<li>Verify the flags are set as intended in <code>chrome://flags</code></li>
|
||||
</ul>
|
||||
<p><strong>For HTTPS Mode:</strong></p>
|
||||
<p>If you're using HTTPS mode (<code>https://</code>), you need to trust the SSL certificates:</p>
|
||||
<ul>
|
||||
<li>Navigate to your web server URL in the browser: <code>https://your-ip-address:8080</code></li>
|
||||
<li>Accept the certificate warning by clicking "Advanced" → "Proceed to [your-ip-address] (unsafe)"</li>
|
||||
<li>If using a WebSocket proxy, also trust its certificate by visiting: <code>https://your-proxy-ip:48322</code></li>
|
||||
</ul>
|
||||
<p>See the <a href="Client_Setup.html#trust-ssl-certificates-https-mode">Client Setup Guide</a> for detailed SSL certificate configuration.</p>
|
||||
<a id="handtracking-is-not-responsive-when-i-start-the-webxr-session" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Handtracking is not responsive when I start the WebXR session<a href="#handtracking-is-not-responsive-when-i-start-the-webxr-session" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>You could pause the session by clicking the MENU button and resume the WebXR session.
|
||||
If the behavior persists, we advise to restart your Meta headset to clear up caches.</p>
|
||||
<a id="connection-issues" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Connection Issues<a href="#connection-issues" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>You might see an error with an error code (shown in hexadecimal format like <code>0xC0F22202</code>). In most cases, they are because of the following reasons:</p>
|
||||
<ul>
|
||||
<li>Verify the server address and port are correct</li>
|
||||
<li>Check network connectivity between client and server</li>
|
||||
<li>Ensure the CloudXR runtime is running on the server</li>
|
||||
<li>Verify firewall rules allow traffic</li>
|
||||
<li>Ensure UDP ports are not blocked</li>
|
||||
<li>Check for high network latency or packet loss</li>
|
||||
<li>Verify stable network connection (check for Wi-Fi disconnections)</li>
|
||||
<li>Test network quality (ping, bandwidth, packet loss)</li>
|
||||
<li>Ensure WebRTC is not blocked by browser settings or extensions</li>
|
||||
<li>Review network topology (double NAT, symmetric NAT issues)</li>
|
||||
<li>Setup TURN relay server if direct connection fails</li>
|
||||
<li>Check server configuration and logs</li>
|
||||
<li>Restart the CloudXR runtime if necessary</li>
|
||||
</ul>
|
||||
<p>For most issues, you can consult the <a href="Networking_Setup.html">Networking Setup Guide</a> for detailed configuration instructions and the issue should resolve.</p>
|
||||
<a id="❓-getting-help" class="tsd-anchor"></a><h2 class="tsd-anchor-link">❓ Getting Help<a href="#❓-getting-help" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>If you're still experiencing issues:</p>
|
||||
<ol>
|
||||
<li><strong>Check the console</strong> for error messages</li>
|
||||
<li>Test with <strong>different browsers</strong></li>
|
||||
<li>Verify <strong>server configuration and logs</strong></li>
|
||||
<li>Check <strong>network conditions</strong> and requirements</li>
|
||||
<li>Review <strong>the <a href="Session_API.html">Session API</a></strong> documentation</li>
|
||||
</ol>
|
||||
<p>For additional support, please reach out to NVIDIA CloudXR team.</p>
|
||||
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#troubleshooting"><span>Troubleshooting</span></a><ul><li><a href="#common-issues"><span>Common <wbr/>Issues</span></a></li><li><ul><li><a href="#i-got-a-blank-page-when-opening-the-url-or-it-streams-2d-only-in-browser"><span>I got a blank page when opening the URL or it streams 2<wbr/>D only in browser</span></a></li><li><a href="#handtracking-is-not-responsive-when-i-start-the-webxr-session"><span>Handtracking is not responsive when <wbr/>I start the <wbr/>WebXR session</span></a></li><li><a href="#connection-issues"><span>Connection <wbr/>Issues</span></a></li></ul></li><li><a href="#❓-getting-help"><span>❓ <wbr/>Getting <wbr/>Help</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CloudXR.js SDK Documentation - v6.0.0-beta</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
||||
Reference in New Issue
Block a user