Skip to main content

LiT Web Listener – Setup Checklist

A self-contained HTML page that joins a live translation session and plays translated audio in the browser.

Before You Can Test​

1. Enable CORS on the API​

The page makes fetch() calls to https://api.lit-capstone.com. The API Lambda(s) must return CORS headers that allow the origin you're serving the page from (e.g. http://localhost:8080 or file://).

Headers needed on every response:

Access-Control-Allow-Origin: *          (or the specific origin)
Access-Control-Allow-Methods: POST, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type

Also handle the pre-flight OPTIONS request for each endpoint (/join, /leave).

2. Serve the Page over Plain HTTP (not HTTPS)​

The LiveKit SFU uses an insecure WebSocket URL (ws://livekit.lit-capstone.com:7880). Browsers block mixed-content WebSocket connections from HTTPS pages, so serve this file over HTTP.

Quickest local server options:

# Python 3
python3 -m http.server 8080 --directory /path/to/client/web

# Node (npx)
npx serve /path/to/client/web

# VS Code
# Install the "Live Server" extension, right-click index.html → Open with Live Server

Then open http://localhost:8080 in the browser.

> Opening index.html directly as a file:// URL may also work for the API calls, > but some browsers restrict camera access and autoplay on file:// origins.

3. Have a Host Session Running​

The web listener joins an existing session — it cannot start one.

  1. Log in on the Android host app.
  2. Select a language and start a session.
  3. Tap Generate QR Code on the translation screen.

Using the Page​

  1. Paste or scan the QR code – tap the camera button or copy the QR JSON and paste it into the text area. The QR JSON looks like: 
    { "joinAuthToken": "…", "roomName": "…", "sessionID": "…", "timestamp": 0 }
  2. Choose a language from the dropdown.
  3. Click Connect – the page calls /join, then connects to LiveKit and subscribes to the matching audio track.
  4. Audio plays automatically once the backend bot publishes the track for your language.

Potential Issues​

SymptomLikely cause
fetch fails with CORS errorCORS headers missing on API (see step 1)
LiveKit connect hangs / failsws:// blocked by browser mixed-content policy — serve over HTTP
Connected but no audioBot may not have started yet; wait a few seconds and reconnect. Also check that the host is actively speaking.
"Join failed (HTTP 4xx)"joinAuthToken or roomName in the QR data is invalid or expired
Camera button does nothingBrowser requires HTTPS (or localhost) for getUserMedia — use a local server