Fundo virtual e cancelamento de ruído para LiveKit
Adicione desfoque e substituição do fundo, embelezamento, enquadramento automático e cancelamento de ruído com IA a apps LiveKit. Os efeitos rodam no dispositivo de cada participante antes de o track ser publicado, sem mudanças no seu servidor LiveKit.
Como funciona
-
1
Envolva o track
Vídeo: defina um TrackProcessor do Effects SDK no track da câmera. Áudio: passe o microfone pelo Audio Effects SDK.
-
2
Processe no dispositivo
O SDK segmenta e melhora os quadros ou limpa o áudio no navegador ou no app: WebGPU, WebGL ou WebAssembly na web.
-
3
Publique como sempre
O LiveKit publica o track processado. Todos os assinantes, pessoas ou agentes, recebem o resultado.
Código
Os track processors do LiveKit são a forma padrão de modificar um track local. O exemplo implementa um sobre o SDK web de vídeo; o fork para Flutter adiciona os mesmos efeitos ao LocalVideoTrack no Android, iOS e web.
- Vídeo: desfoque, fundos de imagem ou vídeo, embelezamento, enquadramento automático, correção de cor, letterings
- Áudio: supressão de ruído e remoção do eco da sala, presets speed / balanced / quality
- Troque os efeitos durante a chamada sem publicar de novo
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);
}
O que você pode adicionar a uma sala LiveKit
Perguntas
Desenvolve com Flutter? Veja a integração com Flutter.
Funciona com o LiveKit Cloud e com LiveKit auto-hospedado?
Sim. Os efeitos são aplicados no dispositivo do participante antes de o track ser publicado, então o servidor, seja o LiveKit Cloud ou o seu, recebe um track já processado. Nada muda no servidor.
Qual é a diferença para o filtro de ruído integrado do LiveKit?
O Effects SDK roda totalmente no dispositivo do usuário final em web, iOS, Android e desktop, funciona com qualquer implantação do LiveKit e traz efeitos de vídeo na mesma família de SDKs. Escolha os presets (speed, balanced, quality) que combinam com o hardware dos seus usuários.
Posso trocar os efeitos durante uma chamada?
Sim. Desfoque, fundos, embelezamento, enquadramento e os demais efeitos podem ser trocados a qualquer momento, sem recriar nem publicar o track de novo.
Funciona com agentes de voz do LiveKit?
Sim. Limpe o microfone do usuário com o Audio Effects SDK antes de publicar, e o seu agente recebe áudio sem ruído de fundo nem eco da sala. Veja o cancelamento de ruído para agentes de voz com IA.
Quais SDKs do LiveKit são compatíveis?
livekit-client para a web (JavaScript/TypeScript) por um TrackProcessor, e LiveKit Flutter no Android, iOS e web pelo nosso fork do SDK para Flutter.
Integrando com o LiveKit?
Conte a sua configuração do LiveKit: web, Flutter ou agentes. Ajudamos com a integração.
Pronto para começar? Abra o Developer Portal e inicie um teste grátis.