Skip to content
livekit-client · LiveKit Flutter · Agents

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. 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. 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. 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);
}

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.

Protegido por reCAPTCHA. Veja a nossa política de privacidade.