gh-vuer-ai-vuer-skill-marketplace-skills-docs-vuer-ai/docs/tutorials/basics/ssl-proxy-webxr.md

Setting Up SSL Proxy for WebXR

Overview

Vuer requires secure connections for WebXR functionality. Both the web client and WebSocket connections must use TLS/SSL encryption.

Key Configuration Points

WebSocket Endpoint Setup

Pass the secure WebSocket URL via query parameter to the web client:

https://vuer.ai?ws=wss://xxxxx.ngrok.io

Static File Serving

Update component source paths to use the correct HTTPS domain. For example, change:

# Before (insecure)
src='http://localhost:8012/static/urdf/robot.urdf'

To:

# After (secure)
src='https://<your-domain-with-ssl>/static/urdf/robot.urdf'

Recommended Proxy Solutions

Option 1: ngrok (Recommended)

ngrok converts local HTTP/WebSocket connections to secure HTTPS/WSS:

• ws://localhost:8012 → wss://xxxx.ngrok.io
• http://localhost:8012/static/ → https://xxxx.ngrok.io/static/

Installation: Visit ngrok's website for installation instructions.

Usage:

ngrok http 8012

This will provide a secure URL like https://xxxx.ngrok.io that you can use for WebXR.

Option 2: localtunnel

Free alternative requiring a passcode.

Installation:

npm install -g localtunnel

Usage:

lt --port 8012

Documentation: https://localtunnel.me

Option 3: Let's Encrypt Self-Signed Certificate

Generate and use your own SSL certificate.

Launch Vuer with Certificate:

vuer --cert cert.pem --key key.pem --port 8012

Generate Certificate: Follow Let's Encrypt's localhost certificate guide for implementation details.

Complete Example with ngrok

from vuer import Vuer
from vuer.schemas import Scene, Urdf

app = Vuer()

@app.spawn
async def main(session):
    # Use the ngrok HTTPS domain for static files
    session.set @ Scene(
        Urdf(
            src='https://xxxx.ngrok.io/static/urdf/robot.urdf',
            position=[0, 0, 0],
            key="robot",
        ),
    )

    while True:
        await asyncio.sleep(1.0)

app.run()

Then access your app at:

https://vuer.ai?ws=wss://xxxx.ngrok.io

Troubleshooting

WebSocket Connection Fails

• Ensure you're using wss:// (not ws://)
• Verify the ngrok tunnel is running
• Check firewall settings

Static Files Not Loading

• Confirm HTTPS domain is correct
• Verify static files are being served
• Check browser console for mixed content warnings

Source

Documentation: https://docs.vuer.ai/en/latest/tutorials/basics/ssl_proxy_webxr.html