LiveKit 的虚拟背景与降噪
为 LiveKit 应用添加背景虚化与替换、美颜、自动取景和 AI 降噪。特效在轨道发布前于每位参与者的设备上运行——无需改动你的 LiveKit 服务器。
工作原理
-
1
包装轨道
视频：在摄像头轨道上设置 Effects SDK 的 TrackProcessor。音频：让麦克风经过 Audio Effects SDK。
-
2
在设备端处理
SDK 在浏览器或应用中对帧进行分割和增强，或净化音频——在 Web 上使用 WebGPU、WebGL 或 WebAssembly。
-
3
照常发布
LiveKit 发布处理后的轨道。每位订阅者——无论是人还是智能体——都会收到处理结果。
代码
LiveKit 的 track processor 是修改本地轨道的标准方式。示例基于 Web Video Effects SDK 实现了一个；Flutter 分支则在 Android、iOS 和 Web 上为 LocalVideoTrack 添加了同样的特效。
- 视频：虚化、图片或视频背景、美颜、自动取景、调色、字幕条
- 音频：降噪和房间回声消除，speed / balanced / quality 预设
- 通话中切换特效，无需重新发布
import { Track, TrackProcessor, VideoProcessorOptions } from 'livekit-client';
import { tsvb } from 'effects-sdk';
export class EffectsVideoProcessor implements TrackProcessor<Track.Kind.Video, VideoProcessorOptions> {
name = 'effects-sdk';
processedTrack?: MediaStreamTrack;
sdk = new tsvb('YOUR_CUSTOMER_ID');
constructor() {
this.sdk.config({ provider: 'webgpu' });
this.sdk.preload();
}
async init(opts: VideoProcessorOptions) {
this.sdk.clear();
this.sdk.useStream(new MediaStream([opts.track]));
this.processedTrack = this.sdk.getStream()?.getVideoTracks()[0];
await new Promise((ready) => (this.sdk.onReady = ready));
this.sdk.run();
}
async restart(opts: VideoProcessorOptions) {
await this.init(opts);
}
async destroy() {
this.sdk.stop();
this.sdk.clear();
this.processedTrack = undefined;
}
}import { createLocalVideoTrack } from 'livekit-client';
const processor = new EffectsVideoProcessor();
const cameraTrack = await createLocalVideoTrack();
await cameraTrack.setProcessor(processor);
await room.localParticipant.publishTrack(cameraTrack);
// Change effects at any time, without republishing
processor.sdk.setBlur(0.6);
processor.sdk.setBackground('https://example.com/office.jpg');import { atsvb } from 'audio-effects-sdk';
const sdk = new atsvb('YOUR_CUSTOMER_ID');
sdk.config({ preset: 'speed', sample_rate: 16000 });
sdk.preload();
const mic = await navigator.mediaDevices.getUserMedia({ audio: true });
sdk.useStream(mic);
sdk.onReady = async () => {
sdk.run();
const cleanTrack = sdk.getStream().getAudioTracks()[0];
// Publish the processed track instead of the raw microphone
await room.localParticipant.publishTrack(cleanTrack);
};// pubspec.yaml: livekit_client from github.com/EffectsSDK/livekit-client-sdk-flutter
// Web only: load tsvb-web.js in index.html and call this first
VideoEffectsSDKExt.initialize('YOUR_CUSTOMER_ID');
final videoTrack = await LocalVideoTrack.createCameraTrack(
CameraCaptureOptions(effectsSdkRequired: true),
);
await videoTrack.start();
// Android and iOS: authorize the track
final status = await videoTrack.auth('YOUR_CUSTOMER_ID');
if (status == AuthStatus.active) {
await videoTrack.setPipelineMode(PipelineMode.blur);
await videoTrack.setBlurPower(0.6);
}常见问题
在用 Flutter 开发？请参阅 Flutter 集成。
是否支持 LiveKit Cloud 和自托管的 LiveKit？
支持。特效在轨道发布前于参与者的设备上应用，因此无论是 LiveKit Cloud 还是你自己的服务器，收到的都是已处理的轨道。服务器端无需任何改动。
这和 LiveKit 内置的降噪滤镜有什么区别？
Effects SDK 完全在终端用户的 Web、iOS、Android 和桌面设备上运行，适用于任何 LiveKit 部署，并在同一 SDK 家族中提供视频特效。你可以根据用户的硬件选择预设（speed、balanced、quality）。
通话中可以切换特效吗？
可以。虚化、背景、美颜、取景等特效可随时切换，无需重新创建或重新发布轨道。
是否适用于 LiveKit 语音智能体？
适用。发布前先用 Audio Effects SDK 净化用户的麦克风，你的智能体收到的音频就不会有背景噪声和房间回声。请参阅面向 AI 语音智能体的降噪。
支持哪些 LiveKit SDK？
通过 TrackProcessor 支持 Web 端的 livekit-client（JavaScript/TypeScript），通过我们的 Flutter SDK 分支支持 Android、iOS 和 Web 上的 LiveKit Flutter。