Service
Background blur and virtual backgrounds, applied on-device to the camera track before it's published — private, no server round-trip.
Platform support:Web / React Native: full background blur & virtual backgrounds today (WebGL/WASM). Flutter: on-device face detection is available now via
socrits_effects; blur baked into the published video is on the roadmap (it needs a native video processor).Web — background blur & virtual backgrounds
terminal
1npm i @socrits/client @livekit/track-processorsEffects wrap the camera track with a processor, so they work with both the raw room and the prebuilt UI. Toggle them any time during a call:
effects.ts
1import { applyBackgroundBlur, applyVirtualBackground, clearVideoEffects } from "@socrits/client";23// after the call is connected (you have the LiveKit `room`):4await applyBackgroundBlur(room, 10); // radius 0–205await applyVirtualBackground(room, "/bg/office.jpg"); // replace the background6await clearVideoEffects(room); // back to raw cameraFlutter — face detection
The socrits_effects companion package runs on-device face detection (Google ML Kit) and draws a live overlay — for beauty / AR previews, face tracking and expression-driven UI.
face.dart
1# flutter pub add socrits_effects23import 'package:socrits_effects/socrits_effects.dart';45// live on-device face detection with an overlay6SocritsFaceCam(7 showLandmarks: true,8 onFaces: (faces) {9 if (faces.isNotEmpty && faces.first.isSmiling) {10 // trigger a smile effect, AR sticker, beauty preset…11 }12 // faces.first.boundingBox, .headEulerAngleY (yaw), .landmarks['leftEye']13 },14)Local only:This renders on the local user's screen. Baking effects into the published video (so remote participants see them) needs a native video processor — on the roadmap for Flutter.
Notes
Processing is entirely client-side — the blurred/replaced frames are what get published, so the raw background never leaves the device. Effects are billed under the AI Effects package (see the console).