Medienprozessor (Web)

Verwenden Sie die Vonage Media Processor-Bibliothek, um benutzerdefinierte Transformationen auf veröffentlichte Streams anzuwenden.

Sie können die Publisher.setAudioMediaProcessorConnector() und Publisher.setVideoMediaProcessorConnector() Methoden zur Anwendung benutzerdefinierter Audio- und Videotransformatoren, die die Vonage Media Processor-Bibliothek verwenden.

Es gibt drei Möglichkeiten, Transformatoren zu implementieren:

  • Grundlegend: Verwenden Sie die Publisher.applyVideoFilter() Methode, um den vordefinierten Filter für die Hintergrundunschärfe oder die Hintergrundersetzung einfach anzuwenden. Diese Methode implementiert diese Filter mithilfe der Vonage-Medienbibliothek und erfordert nur wenige Konfigurationseinstellungen:
await publisher.applyVideoFilter({
    type: 'backgroundBlur',
    blurStrength: 'high',
});

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

Anmerkung: Medienumwandlungen werden nicht auf allen Geräten unterstützt. Siehe Unterstützte Browser.

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

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 '@vonage/client-sdk-video';
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 '@vonage/client-sdk-video';
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);
    });

Anforderungen des Kunden

Die API für einfügbare Ströme, die von der Publisher.setVideoMediaProcessorConnector() und Publisher.setAudioMediaProcessorConnector() Methoden werden nur in neueren Versionen von Chrome, Electron, Opera, Samsung Internet, Edge und WebView Android unterstützt. Sie wird nicht unterstützt in anderen (nicht-Chromium-basierten) Browsern oder auf iOS. Sie können überprüfen, ob der Client diese Funktion unterstützt, indem Sie die OT.hasMediaProcessorSupport() Methode.

Transformatoren erfordern eine angemessene Prozessorunterstützung. Selbst in unterstützten Browsern sind Transformatoren möglicherweise nicht stabil, wenn Hintergrundprozesse die verfügbaren Verarbeitungsressourcen begrenzen. Verwenden Sie Chrome (Desktop oder Android) für optimale Ergebnisse.

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 so vielen unterstützten Geräten wie möglich durchführen, unabhängig von der Transformation.

Mehr über Transformatoren und Beispielcode

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

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

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.