Streaming a Mesh Avatar Studio avatar uses two pages served by npm run dev: the Live page (camera, microphone, tracking, calibration) and the stream view (avatar only, built for OBS). Motion travels between them over a local WebSocket as numbers only.
Step 1 — Calibrate on the Live page
- Open your project in the editor and choose Live (or open
/live.html?project=<name>directly). - Start the camera. Face forward with relaxed eyes and a closed mouth, then choose Calibrate.
- Adjust to taste: Mirror, Sensitivity, Smoothing. Microphone lip sync is a separate toggle.
Step 2 — Add the stream view to OBS
- Pick a background and click Copy OBS URL — or Open stream view in a new tab to check it first.
- In OBS: Sources → + → Browser, paste the URL, and set the size — 1080 × 1080 is the documented example.
- Done. The transparent background works directly in OBS — no chroma key needed.
For capture software without transparency support, choose the green background in the Live page and apply a chroma key filter in your software instead.
Stream view URL parameters (power users)
The OBS URL accepts parameters you can edit by hand:
| Parameter | Values | Default |
|---|---|---|
bg | transparent, green, blue or hex like #336699 | transparent |
fit | contain (whole avatar) or cover (fill frame) | contain |
idle | 1 idle motion on, 0 off | 1 |
light | 1 enables lighting | off |
lx, ly, lz | Light position and height | 0.2 / 0.2 / 0.45 |
avatar | A .mavatar URL on the same origin | unset |
Out-of-range values are clamped and invalid ones fall back to defaults; external URLs are ignored and the sample loads instead.
Expressions while live
The Live page's Expression section switches the face: Neutral, Smile, Shy, Surprised, Half-lidded, Angry, Sad, Wink. Keys 1–8 switch instantly while the Live page is focused — even with the section closed — and tracking keeps running underneath (blinking, gaze and mouth continue; eyes, brows and blush hold the expression). Pressing the current expression's key again keeps it; 1 returns to Neutral.
To switch while OBS is in front, see Expressions & lighting — Stream Deck, macOS Shortcuts and plain curl all work.
Video calls: Zoom, Meet and friends
- Add the stream URL to an OBS scene as a Browser Source. Transparent turns black in the virtual camera — put a color or image source behind the avatar.
- Start OBS's Virtual Camera (on macOS, approve the camera extension the first time).
- In the call app, pick OBS Virtual Camera as your camera; select your real microphone for audio.
Keep the Live page running during the call. Most call apps mirror only your own preview — other participants see the avatar as OBS shows it.
Things that trip people
- The stream view stays idle: keep the Live page open and running, and make sure both pages use the same
project. - Flickering or expressions flip: the project is open in two Live tabs — close the one you are not using.
- Tracking slows in the background: tracking runs in a worker and survives hidden tabs, but if the Live page reports it stopped, bring its window to the front.
- No camera? Voice-only works: idle motion continues and your voice drives the mouth.
Privacy while streaming
Camera video and microphone audio are processed in the browser and never leave your machine. Only numeric pose values (head angles, eyes, mouth) travel over the local WebSocket to the stream view. The tracking models are served locally — the pages make no requests outside 127.0.0.1.