abundant-magician-17307
07/22/2025, 9:50 AMtall-airline-16756
07/22/2025, 9:51 AMtall-airline-16756
07/22/2025, 9:51 AMnpm add @livekit/track-processors
2. 检查浏览器支持:
import { BackgroundBlur, VirtualBackground, supportsBackgroundProcessors } from '@livekit/track-processors';
if(!supportsBackgroundProcessors()) {
throw new Error('this browser does not support background processors');
}
3. 使用背景模糊:
const videoTrack = await createLocalVideoTrack();
const blur = BackgroundBlur(10); // 模糊半径为10
await videoTrack.setProcessor(blur);
room.localParticipant.publishTrack(videoTrack);
4. 使用虚拟背景图片:
cameraTrack.track?.setProcessor(VirtualBackground('图片路径'));
5. 动态切换/禁用背景处理:
await videoTrack.stopProcessor(); // 禁用背景处理
Android 平台:
1. 添加依赖:
implementation "io.livekit:livekit-android-track-processors:<当前SDK版本>"
2. 创建 VirtualBackgroundVideoProcessor 实例并设置背景图片(可选,默认模糊):
val processor = VirtualBackgroundVideoProcessor(eglBase)
processor.backgroundImage = drawable.bitmap // 可选
3. 注册 CameraProvider 并创建视频轨道,发布到房间:
val videoTrack = room.localParticipant.createVideoTrack(
options = LocalVideoTrackOptions(position = CameraPosition.FRONT),
videoProcessor = processor,
)
videoTrack.startCapture()
room.localParticipant.publishVideoTrack(videoTrack)
4. 动态启用/禁用或更换背景图片:
processor.enabled = true // 或 false
processor.backgroundImage = newBitmap
虚拟背景支持实时切换、模糊或自定义图片,并有性能优化。具体实现可根据平台选择上述方法。
Sources: examples/virtual-background/src/main/java/io/livekit/android/selfie/MainAct... | src/webgl/index.ts | lib/CameraSettings.tsx