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.
Top comments (0)