Skip to content
livekit-client · LiveKit Flutter · Agents

Fondo virtual y cancelación de ruido para LiveKit

Añade desenfoque y reemplazo del fondo, embellecimiento, encuadre automático y cancelación de ruido con IA a apps de LiveKit. Los efectos se ejecutan en el dispositivo de cada participante antes de publicar el track, sin cambios en tu servidor de LiveKit.

Cómo funciona

  1. 1

    Envuelve el track

    Video: asigna un TrackProcessor de Effects SDK al track de la cámara. Audio: pasa el micrófono por Audio Effects SDK.

  2. 2

    Procesa en el dispositivo

    El SDK segmenta y mejora los fotogramas o limpia el audio en el navegador o en la app: WebGPU, WebGL o WebAssembly en la web.

  3. 3

    Publica como siempre

    LiveKit publica el track procesado. Cada suscriptor, sean personas o agentes, recibe el resultado.

Código

Los track processors de LiveKit son la forma estándar de modificar un track local. El ejemplo implementa uno sobre el SDK web de video; el fork para Flutter añade los mismos efectos a LocalVideoTrack en Android, iOS y la web.

  • Video: desenfoque, fondos de imagen o video, embellecimiento, encuadre automático, corrección de color, rótulos
  • Audio: supresión de ruido y eliminación del eco de la sala, presets speed / balanced / quality
  • Cambia los efectos durante la llamada sin volver a publicar
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);
}

Preguntas

¿Desarrollas con Flutter? Consulta la integración con Flutter.

¿Funciona con LiveKit Cloud y con LiveKit autoalojado?

Sí. Los efectos se aplican en el dispositivo del participante antes de publicar el track, así que el servidor, sea LiveKit Cloud o el tuyo, recibe un track ya procesado. No cambia nada en el servidor.

¿En qué se diferencia del filtro de ruido integrado de LiveKit?

Effects SDK se ejecuta por completo en el dispositivo del usuario final en web, iOS, Android y escritorio, funciona con cualquier despliegue de LiveKit e incluye efectos de video en la misma familia de SDK. Elige los presets (speed, balanced, quality) que mejor se adapten al hardware de tus usuarios.

¿Puedo cambiar los efectos durante una llamada?

Sí. El desenfoque, los fondos, el embellecimiento, el encuadre y los demás efectos se pueden cambiar en cualquier momento sin recrear ni volver a publicar el track.

¿Funciona con agentes de voz de LiveKit?

Sí. Limpia el micrófono del usuario con Audio Effects SDK antes de publicarlo y tu agente recibirá audio sin ruido de fondo ni eco de la sala. Consulta la cancelación de ruido para agentes de voz con IA.

¿Qué SDK de LiveKit son compatibles?

livekit-client para la web (JavaScript/TypeScript) mediante un TrackProcessor, y LiveKit Flutter en Android, iOS y la web mediante nuestro fork del SDK de Flutter.

¿Integras con LiveKit?

Cuéntanos tu configuración de LiveKit: web, Flutter o agentes. Te ayudamos con la integración.

¿Listo para empezar? Abre el Developer Portal y comienza una prueba gratuita.

Protegido por reCAPTCHA. Consulta nuestra política de privacidad.