How do you use this tool?
- Open the tool and click 'Allow Camera' when prompted for webcam access.
- The tool displays your live webcam feed with background blur applied.
- Adjust the blur intensity slider (subtle to heavy bokeh) to your preference.
- Select blur type: Gaussian (uniform softness) or bokeh (depth-of-field simulation).
- In your video call app, select 'OBS Virtual Camera' or your browser tab as the camera source.
What This Tool Does
This tool applies real-time background blur to your webcam stream — entirely in the browser. A machine learning segmentation model running via WebAssembly identifies the person in frame and applies Gaussian or bokeh blur to the background on every frame, updating at up to 30fps.
How It Works
The pipeline runs in three stages on each frame:
- Capture — the browser reads a frame from your webcam using the
getUserMediaAPI. - Segment — a real-time segmentation model (WASM-compiled) produces a pixel-level mask separating foreground from background.
- Blur + composite — background pixels receive a Gaussian blur (configurable radius) using the Canvas API; foreground pixels are composited on top, unmodified.
| Stage | API / Technology | Latency |
|---|---|---|
| Frame capture | getUserMedia | ~1 ms |
| ML segmentation | WebAssembly / WebGPU | 15–50 ms |
| Blur + composite | Canvas 2D / WebGL | ~2 ms |
| Virtual output | HTMLVideoElement | ~1 ms |
Total per-frame latency is 20–60ms on modern hardware — sufficient for 20–30fps video call quality.
What Are Common Use Cases?
Remote work from home. The home office background — bookshelves, kids walking by, laundry drying — is distracting and can undermine professional presence in client calls. Background blur maintains focus on the speaker without requiring a dedicated office or green screen.
BYOD and shared devices. On employer-issued devices, installing third-party apps may be restricted by IT policy. A browser-based blur tool requires no installation and works within existing browser permissions.
Web-based video platforms. Platforms like Google Meet (in-browser), Whereby, Jitsi, and Daily.co can receive the blurred virtual camera output through OBS. This extends blur capability to any browser-based call platform.
Privacy during screen recordings. When recording a tutorial or demo, blur your background to keep personal space private without switching to a different room or setting up lighting for a green screen.
Teaching and tutoring. Online tutors and educators using browser-based classroom tools benefit from background blur to keep students focused on the teacher, not the home environment.
Traveling professionals. Hotel rooms, airport lounges, and co-working spaces are notoriously distracting video call backgrounds. Browser-based blur requires no software install on the travel laptop.
How Do the Blur Types Compare?
| Mode | Effect | Best For |
|---|---|---|
| Gaussian (light) | Soft, uniform blur, radius 5–10px | Minimal distraction removal |
| Gaussian (heavy) | Strong uniform blur, radius 20–40px | High-privacy situations |
| Bokeh / depth-of-field | Simulated lens blur, subject sharp | Professional, cinematic look |
| Custom background | Solid color or uploaded image | Branding, fully controlled look |
How Do You Set Up with OBS?
To use the blurred feed in any video call app:
- Download and install OBS Studio (free, open source — obsproject.com).
- In OBS, add a Browser Source pointing to this tool’s URL.
- Allow camera access in the OBS browser source.
- Enable OBS Virtual Camera (Tools menu → Start Virtual Camera).
- In Zoom, Teams, or Meet, select OBS Virtual Camera as your camera device.
This routes the browser-processed, blurred feed as a system-wide virtual camera available to all applications.
Frequently Asked Questions
Why is the blur edge around my hair imperfect? Real-time segmentation at 30fps runs a lighter model than still-image processing. Hair and flyaways at the boundary are harder to classify correctly at speed. Increasing ambient light and wearing clothing that contrasts with your background significantly improves edge quality.
Can I use this on an iPad or mobile device? Yes — the tool runs in Safari on iOS/iPadOS and Chrome on Android. Performance depends on the device’s Neural Engine or GPU. Older mobile devices may experience reduced frame rates. Mobile video apps (Zoom, Teams mobile) may not support virtual camera selection.
What happens if I minimize the browser tab? Most browsers throttle background tabs, which will reduce the frame rate of the blur processing. Keep the browser tab visible and active during your call for best performance.
Last updated: