Verwendung der Vonage Medienprozessor-Bibliothek

Verwenden Sie die Vonage Media Processor-Bibliothek, um benutzerdefinierte Transformationen auf Audio- und Videodaten anzuwenden.

Sie können die Publisher.setAudioMediaProcessorConnector(), Publisher.setVideoMediaProcessorConnector(), Subscriber.setAudioMediaProcessorConnector()und Subscriber.setVideoMediaProcessorConnector(), Methoden zur Anwendung benutzerdefinierter Audio- und Videotransformatoren, die die Vonage Media Processor-Bibliothek nutzen, auf Audio- und Videodaten. Die „Publisher“-Methoden wirken sich auf die Videos aller Abonnenten aus, während die „Subscriber“-Methoden nur für den jeweiligen einzelnen Abonnenten gelten.

OpenTok.js bietet drei Möglichkeiten zur Implementierung von Transformatoren:

Grundlegend: Verwenden Sie die Publisher.applyVideoFilter() Methode, um den vordefinierten Filter für Hintergrundunschärfe oder Hintergrundersetzung ganz einfach anzuwenden. Verwenden Sie die Publisher.applyAudioFilter() Methode zur einfachen Anwendung des vordefinierten, erweiterten Rauschunterdrückungsfilters. Diese Methoden implementieren diese Filter mithilfe der Vonage Media Library und erfordern nur wenige Konfigurationseinstellungen:

await publisher.applyVideoFilter({
  type: 'backgroundBlur',
  blurStrength: 'high',
});

publisher.applyAudioFilter({
  type: 'advancedNoiseSuppression',
});

Siehe Anwenden eines Filters zum Verwischen oder Ersetzen des Hintergrunds und Anwendung des erweiterten Rauschunterdrückungsfilters.

Mäßig: Sie können Transformatoren aus den Vonage ML-Transformatoren verwenden ([@vonage/ml-transformers](https://www.npmjs.com/package/@vonage/ml-transformers)) Bibliothek.
Kopieren
```
const config = {
  transformerType: 'VirtualBackground',
  backgroundAssetUri: "https://MY_IMAGE_URL"
};
const processor = await createVonageMediaProcessor(config);
publisher.setVideoMediaProcessorConnector(processor.getConnector());
```
Siehe die Ersetzen von Hintergrundbildern und Hintergrundunschärfe Beispielanwendungen.

Fortgeschrittene: Sie können Ihre eigene Transformatorklasse schreiben, die die Transformator Klasse:

class OverlayTextTransformer  implements  Transformer {
  // transform function must be implemented.
  transform(frame:any, controller:TransformStreamDefaultController) {
    // This will be more complicated in a real-world transformer...
    this.startCtx_.drawImage(frame, 0, 0, .., ..,)
    this.startCtx_.font = "30px Arial";
    this.startCtx_.fillText(this.message_, 50, 150);
    frame.close();
    controller.enqueue(new VideoFrame(this.startCanvas_, {timestamp, alpha: 'discard'}));
  }
}

const transformer = new OverlayTextTransformer('Hello World'); const transformers = [ transformer ] const mediaProcessor = new MediaProcessor(); mediaProcessor.setTransformers(transformers); const mediaProcessorConnector = new MediaProcessorConnector(mediaProcessor); publisher.setVideoMediaProcessorConnector(mediaProcessorConnector);

Siehe Anwenden eines Videotransformators aus der Vonage-Medienbibliothek.

Die Vonage Medienprozessor Bibliothek, abrufbar unter npmerleichtert die Nutzung des Einfügbare Ströme API zur Durchführung von Transformationsvorgängen an Video- und Audiospuren.

Anwenden eines Filters zum Verwischen oder Ersetzen des Hintergrunds

Siehe diese Dokumentation.

Anwendung des erweiterten Rauschunterdrückungsfilters

Siehe diese Dokumentation.

Anwenden eines Videotransformators aus der Vonage-Medienbibliothek

Die Bibliothek umfasst zwei Schlüsselklassen:

MediaProzessor - Steuert Transformatoren und enthält einen setTransformers() Methode, mit der Sie Transformatoren festlegen können.

MediaProcessorConnector - Akzeptiert eine MediaProcessor Objekt in seinem Konstruktor und behandelt Eingabe- und Ausgabespuren. Die OpenTok.js-Implementierung verwaltet die Spuren. Sie müssen nur die MediaProcessorConnector Instanz.

Zur Verwendung eines MediaProcessorConnector um einen Transformator an das Audio- oder Videosystem eines Verlags anzuschließen, verwenden Sie die Publisher.setAudioMediaProcessorConnector() und Publisher.setVideoMediaProcessorConnector() Methoden.

Publisher.setVideoMediaProcessorConnector() Methode

Die Publisher.setVideoMediaProcessorConnector() Methode wendet einen Videotransformer auf einen veröffentlichten Stream an:

import { MediaProcessor, MediaProcessorConnector } from '@vonage/media-processor';
import OT from '@opentok/client';
import MyTransformer from './path/to/my-transformer';

const mediaProcessor = new MediaProcessor();
const transformers = [
  new MyTransformer(),
];

mediaProcessor.setTransformers(transformers);
const connector = new MediaProcessorConnector(mediaProcessor);
const publisher = OT.initPublisher('targetDiv', () => {
  publisher.setVideoMediaProcessorConnector(connector);
});

Anmerkung: Die Publisher.setVideoMediaProcessorConnector() Methode ist nicht kompatibel mit der Publisher.applyVideoFilter() Methode.

Publisher.setAudioMediaProcessorConnector() Methode

Die Publisher.setAudioMediaProcessorConnector() wendet einen Audiotransformator auf einen veröffentlichten Stream an:

import { MediaProcessor, MediaProcessorConnector } from '@vonage/media-processor';
import OT from '@opentok/client';
import MyTransformer from './path/to/my-transformer';

const mediaProcessor = new MediaProcessor();
const transformers = [
  new MyTransformer(),
];

mediaProcessor.setTransformers(transformers);
const connector = new MediaProcessorConnector(mediaProcessor);
const publisher = OT.initPublisher('targetDiv', () => {
  publisher.setAudioMediaProcessorConnector(connector);
});

Methode „Subscriber.setVideoMediaProcessorConnector()“

Die Subscriber.setVideoMediaProcessorConnector() Die Methode wendet einen Videotransformator auf einen abonnierten Stream an:

import { MediaProcessor, MediaProcessorConnector } from '@vonage/media-processor';
import OT from '@opentok/client';
import MyTransformer from './path/to/my-transformer';

const mediaProcessor = new MediaProcessor();
const transformers = [
  new MyTransformer(),
];

mediaProcessor.setTransformers(transformers);
const connector = new MediaProcessorConnector(mediaProcessor);
await subscriber.setVideoMediaProcessorConnector(connector);

Methode „Subscriber.setAudioMediaProcessorConnector()“

Die Subscriber.setAudioMediaProcessorConnector() wendet einen Audio-Transformator auf einen abonnierten Stream an:

import { MediaProcessor, MediaProcessorConnector } from '@vonage/media-processor';
import OT from '@opentok/client';
import MyTransformer from './path/to/my-transformer';

const mediaProcessor = new MediaProcessor();
const transformers = [
  new MyTransformer(),
];

mediaProcessor.setTransformers(transformers);
const connector = new MediaProcessorConnector(mediaProcessor);
await subscriber.setAudioMediaProcessorConnector(connector);

Anforderungen des Kunden

Die API für einfügbare Ströme, die von der Publisher.setVideoMediaProcessorConnector(), Subscriber.setVideoMediaProcessorConnector() und Publisher.applyVideoFilter() Diese Methoden werden in den aktuellen Versionen von Chrome, Firefox, Electron, Opera, Edge, Samsung Internet und WebView für Android sowie in den neuesten Versionen von Safari (Version 26+) und iOS WebView (Version 26+) unterstützt. Publisher.setAudioMediaProcessorConnector(), Subscriber.setAudioMediaProcessorConnector() und Publisher.applyAudioFilter() werden in anderen (nicht auf Chromium basierenden) Browsern oder unter iOS nicht unterstützt. Sie können überprüfen, ob der Client diese Funktionen unterstützt, indem Sie die OT.hasMediaProcessorSupport() Methode.

Transformatoren, Audiofilter und Videofilter erfordern eine ausreichende Prozessorunterstützung. Selbst in unterstützten Browsern sind Transformatoren unter Umständen nicht stabil, wenn Hintergrundprozesse die verfügbaren Rechenressourcen einschränken. Verwenden Sie Chrome (Desktop oder Android), um optimale Ergebnisse zu erzielen.

Stellen Sie sicher, dass die Laptops/Desktops diese Mindestanforderungen erfüllen, um eine optimale Nutzung zu ermöglichen:

CPU - Intel Core i5 (mit 4 Kernen oder höher) oder Apple Silicon M1 (oder höher)
8G RAM (oder mehr)
Dedizierter Grafikprozessor (z. B. NVIDIA)

Einige Betriebssysteme bieten mehrere Akku-Einstellungen oder Modi an, um Energie zu sparen (z. B. um die Lebensdauer der Laptop-Batterie zu verlängern), indem die CPU-Leistung gedrosselt wird. Dies kann zu einer suboptimalen Transformatorleistung führen und unerwünschte Audio- oder Video-Artefakte verursachen. Wir empfehlen Ihnen, Ihr Betriebssystem so einzustellen, dass es den besten Leistungsmodus verwendet (oder auf nicht Energiesparmodus) in solchen Fällen.

Viele Videotransformationen (z. B. Hintergrundunschärfe) verwenden Segmentierung, um den Sprecher vom Hintergrund zu trennen. Die besten Ergebnisse erzielen Sie, wenn Sie eine gute Beleuchtung und einen einfachen Hintergrund verwenden. Unzureichende Beleuchtung oder komplexe Hintergründe können Videoartefakte verursachen (z. B. kann der Sprecher oder ein Hut, den der Sprecher trägt, zusammen mit dem Hintergrund verschwimmen).

Sie sollten Benchmark-Tests auf möglichst vielen unterstützten Geräten durchführen, unabhängig davon, ob es sich bei der Transformation um eine einfache, mittelschwere oder fortgeschrittene Implementierung handelt.

Mithilfe des Ereignisses „Session cpuPerformanceChanged“ können Sie Änderungen der CPU-Leistung erkennen und bei Bedarf Videotransformer deaktivieren. Siehe Erkennen von Veränderungen der CPU-Leistung.

Weitere Hinweise zur Optimierung der Gesprächsqualität finden Sie unter Überwachung der Anrufqualität.

Mehr über Transformatoren und Beispielcode

Weitere Informationen finden Sie in der Vonage Medienprozessor Dokumentation der Bibliothek.

Die opentok-web-beispiele Repo enthält die folgenden Beispielanwendungen, die die Vonage Media Processor-Bibliothek verwenden, um Transformationen auf in OpenTok.js veröffentlichte Streams anzuwenden:

Basis-Audio-Transformator - Zeigt, wie man einen Audiotransformer mit einem Webworker und einem separaten Thread für den Webworker anwendet.
Basis-Video-Transformator - Zeigt, wie man einen Videotransformer mit einer Leinwand, einem Webworker und einem separaten Thread für den Webworker anwendet.
Zoom-Grundlagen-Video — Zeigt, wie man mit einem einfachen Transformator den Publisher vergrößern kann.
Moderat-Hintergrund-Schleier - Zeigt, wie man einen Videotransformator aus dem @vonage/ml-transformers Modul.

Es gibt weitere Beispiele, die die Vonage Media Transformers Bibliothek verwenden hier.

Weitere Optionen zur Anpassung der Benutzeroberfläche

Weitere Optionen zum Anpassen der Benutzeroberfläche finden Sie im Abschnitt Anpassen der Benutzeroberfläche Leitfaden.