Skip to content
livekit-client · LiveKit Flutter · Agents

Virtueller Hintergrund und Rauschunterdrückung für LiveKit

Fügen Sie LiveKit-Apps Hintergrund-Weichzeichnung und -Ersetzung, Beautification, Auto-Framing und KI-Rauschunterdrückung hinzu. Die Effekte laufen auf dem Gerät jedes Teilnehmers, bevor der Track veröffentlicht wird – ohne Änderungen an Ihrem LiveKit-Server.

So funktioniert es

  1. 1

    Track umhüllen

    Video: einen TrackProcessor von Effects SDK auf den Kamera-Track setzen. Audio: das Mikrofon durch das Audio Effects SDK leiten.

  2. 2

    Auf dem Gerät verarbeiten

    Das SDK segmentiert und verbessert Frames oder bereinigt Audio im Browser oder in der App – mit WebGPU, WebGL oder WebAssembly im Web.

  3. 3

    Wie gewohnt veröffentlichen

    LiveKit veröffentlicht den verarbeiteten Track. Jeder Abonnent – Mensch oder Agent – erhält das Ergebnis.

Code

Track-Processors sind in LiveKit der Standardweg, einen lokalen Track zu verändern. Das Beispiel implementiert einen auf Basis des Web Video Effects SDK; der Flutter-Fork ergänzt LocalVideoTrack auf Android, iOS und im Web um dieselben Effekte.

  • Video: Weichzeichnung, Bild- oder Videohintergründe, Beautification, Auto-Framing, Farbkorrektur, Bauchbinden
  • Audio: Rauschunterdrückung und Entfernung von Raumhall, Presets speed / balanced / quality
  • Effekte während des Anrufs ändern, ohne neu zu veröffentlichen
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);
}

Fragen

Sie entwickeln mit Flutter? Siehe Flutter-Integration.

Funktioniert es mit LiveKit Cloud und selbst gehostetem LiveKit?

Ja. Die Effekte werden auf dem Gerät des Teilnehmers angewendet, bevor der Track veröffentlicht wird; der Server – LiveKit Cloud oder Ihr eigener – erhält also einen bereits verarbeiteten Track. Auf Serverseite ändert sich nichts.

Worin unterscheidet sich das vom integrierten Rauschfilter von LiveKit?

Effects SDK läuft vollständig auf dem Gerät der Endnutzer – im Web, auf iOS, Android und Desktop –, funktioniert mit jeder LiveKit-Bereitstellung und bringt Videoeffekte in derselben SDK-Familie mit. Wählen Sie die Presets (speed, balanced, quality), die zur Hardware Ihrer Nutzer passen.

Kann ich Effekte während eines Anrufs ändern?

Ja. Weichzeichnung, Hintergründe, Beautification, Framing und die anderen Effekte lassen sich jederzeit umschalten, ohne den Track neu zu erstellen oder neu zu veröffentlichen.

Funktioniert es für LiveKit-Sprachagenten?

Ja. Bereinigen Sie das Mikrofon des Nutzers vor dem Veröffentlichen mit dem Audio Effects SDK, und Ihr Agent erhält Audio ohne Hintergrundgeräusche und Raumhall. Siehe Rauschunterdrückung für KI-Sprachagenten.

Welche LiveKit-SDKs werden unterstützt?

livekit-client für das Web (JavaScript/TypeScript) über einen TrackProcessor und LiveKit Flutter auf Android, iOS und im Web über unseren Fork des Flutter-SDK.

Sie integrieren LiveKit?

Erzählen Sie uns von Ihrem LiveKit-Setup – Web, Flutter oder Agenten. Wir helfen bei der Integration.

Bereit loszulegen? Öffnen Sie das Developer Portal und starten Sie eine kostenlose Testphase.

Geschützt durch reCAPTCHA. Siehe unsere Datenschutzerklärung.