LiveKit 的虛擬背景與降噪
為 LiveKit App 加入背景模糊與替換、美顏、自動取景和 AI 降噪。特效在軌道發布前於每位參與者的裝置上執行——不需改動你的 LiveKit 伺服器。
運作方式
-
1
包裝軌道
視訊：在攝影機軌道上設定 Effects SDK 的 TrackProcessor。音訊：讓麥克風經過 Audio Effects SDK。
-
2
在裝置端處理
SDK 在瀏覽器或 App 中分割和增強影格，或淨化音訊——在 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。