Skip to content
livekit-client · LiveKit Flutter · Agents

Arrière-plan virtuel et suppression du bruit pour LiveKit

Ajoutez flou et remplacement de l'arrière-plan, embellissement, cadrage automatique et suppression du bruit par IA aux applications LiveKit. Les effets s'exécutent sur l'appareil de chaque participant avant la publication de la piste, sans rien changer à votre serveur LiveKit.

Fonctionnement

  1. 1

    Envelopper la piste

    Vidéo : définissez un TrackProcessor d'Effects SDK sur la piste caméra. Audio : faites passer le micro par l'Audio Effects SDK.

  2. 2

    Traiter sur l'appareil

    Le SDK segmente et améliore les images ou nettoie l'audio dans le navigateur ou l'application, avec WebGPU, WebGL ou WebAssembly sur le web.

  3. 3

    Publier comme d'habitude

    LiveKit publie la piste traitée. Chaque abonné, humain ou agent, reçoit le résultat.

Code

Les track processors de LiveKit sont la façon standard de modifier une piste locale. L'exemple en implémente un autour du Web Video Effects SDK ; le fork Flutter ajoute les mêmes effets à LocalVideoTrack sur Android, iOS et le web.

  • Vidéo : flou, arrière-plans image ou vidéo, embellissement, cadrage automatique, correction des couleurs, bandeaux
  • Audio : suppression du bruit et de l'écho de la pièce, préréglages speed / balanced / quality
  • Changer d'effet pendant l'appel sans republier
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);
}

Questions

Vous développez avec Flutter ? Voir l'intégration Flutter.

Est-ce compatible avec LiveKit Cloud et LiveKit auto-hébergé ?

Oui. Les effets sont appliqués sur l'appareil du participant avant la publication de la piste ; le serveur, LiveKit Cloud ou le vôtre, reçoit donc une piste déjà traitée. Rien ne change côté serveur.

En quoi est-ce différent du filtre de bruit intégré à LiveKit ?

Effects SDK s'exécute entièrement sur l'appareil de l'utilisateur final, sur le web, iOS, Android et le bureau, fonctionne avec n'importe quel déploiement LiveKit et inclut des effets vidéo dans la même famille de SDK. Choisissez les préréglages (speed, balanced, quality) adaptés au matériel de vos utilisateurs.

Puis-je changer d'effet pendant un appel ?

Oui. Flou, arrière-plans, embellissement, cadrage et les autres effets peuvent être changés à tout moment, sans recréer ni republier la piste.

Est-ce compatible avec les agents vocaux LiveKit ?

Oui. Nettoyez le micro de l'utilisateur avec l'Audio Effects SDK avant la publication, et votre agent reçoit un audio sans bruit de fond ni écho de la pièce. Voir la suppression du bruit pour les agents vocaux IA.

Quels SDK LiveKit sont pris en charge ?

livekit-client pour le web (JavaScript/TypeScript) via un TrackProcessor, et LiveKit Flutter sur Android, iOS et le web via notre fork du SDK Flutter.

Vous intégrez LiveKit ?

Décrivez-nous votre configuration LiveKit : web, Flutter ou agents. Nous vous aidons à l'intégration.

Prêt à vous lancer ? Ouvrez le Developer Portal et démarrez un essai gratuit.

Protégé par reCAPTCHA. Consultez notre politique de confidentialité.