Browser-based live avatar camera for OBS (no mocap rig)

赵yj — Sat, 07 Nov 2026 22:55:16 +0000

I've been experimenting with getting a live avatar into streams and video calls without a mocap rig. Here's the pipeline that worked for me, plus the pitfalls.

The pipeline

Capture: navigator.mediaDevices.getUserMedia({ video: { width: 1280, height: 720, frameRate: 30 } }) gives you the webcam stream in the browser.
Transform: each frame (or a downscaled copy) is sent through an avatar/restyle model. Latency is the main constraint, so keep input resolution modest and avoid blocking the render loop.
Render: draw the result to a <canvas> and keep it visible in a dedicated tab or window.
Expose to apps: in OBS, add a Window Capture or Browser Source of that canvas, then enable Start Virtual Camera. Zoom, Meet, Teams, Discord and Twitch Studio can now pick "OBS Virtual Camera" as the webcam.

Pitfalls

Latency: aim for a steady frame rate over peak quality; viewers notice jitter more than softness.
Lighting: even front lighting makes face tracking noticeably more stable.
Permissions: only use reference images you have the rights to use.
Audio sync: if the video lags, add a small audio delay filter in OBS.

Try it

I work on LiveSwap, a browser-based live avatar camera built around this workflow (disclosure: it's my project). It has a free tier with 30 credits, so you can test the OBS virtual camera setup without paying. I'd be glad to hear which latency and quality trade-offs matter most in your setups.

DEV Community: 赵yj

Browser-based live avatar camera for OBS (no mocap rig)

The pipeline

Pitfalls

Try it