Utilisation de la bibliothèque Vonage Media Processor

Utilisez la bibliothèque Vonage Media Processor pour appliquer des transformations personnalisées aux flux audio et vidéo.

Vous pouvez utiliser le Publisher.setAudioMediaProcessorConnector(), Publisher.setVideoMediaProcessorConnector(), Subscriber.setAudioMediaProcessorConnector()et Subscriber.setVideoMediaProcessorConnector(), des méthodes permettant d'appliquer des transformateurs audio et vidéo personnalisés, qui utilisent la bibliothèque Vonage Media Processor, aux flux audio et vidéo. Les méthodes « Publisher » auront un impact sur les vidéos des abonnés, tandis que les méthodes « Subscriber » ne s'appliqueront qu'à cet abonné en particulier.

OpenTok.js propose trois méthodes pour implémenter des transformateurs :

De base : Utiliser le Publisher.applyVideoFilter() méthode permettant d'appliquer facilement le filtre prédéfini de flou d'arrière-plan ou de remplacement d'arrière-plan. Utilisez la Publisher.applyAudioFilter() méthode permettant d'appliquer facilement le filtre avancé de suppression du bruit prédéfini. Ces méthodes mettent en œuvre ces filtres à l'aide de la bibliothèque multimédia Vonage, ce qui ne nécessite que quelques paramètres de configuration :

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

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

Voir Application d'un filtre de flou d'arrière-plan ou de remplacement d'arrière-plan et Application du filtre avancé de suppression du bruit.

Modéré : Vous pouvez utiliser les transformateurs de la bibliothèque « Vonage ML transformers » ([@vonage/ml-transformers](https://www.npmjs.com/package/@vonage/ml-transformers)) bibliothèque.
Copie
```
const config = {
  transformerType: 'VirtualBackground',
  backgroundAssetUri: "https://MY_IMAGE_URL"
};
const processor = await createVonageMediaProcessor(config);
publisher.setVideoMediaProcessorConnector(processor.getConnector());
```
Voir le remplacement de l'image d'arrière-plan et flou d'arrière-plan exemples d'applications.

Avancée : Vous pouvez écrire votre propre classe de transformateur qui implémente la méthode Transformateur classe :

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

Voir Application d'un transformateur vidéo à partir de la médiathèque de Vonage.

Les Processeur média de Vonage bibliothèque, disponible à l'adresse suivante : npmfacilite l'utilisation de la Flux insérables API pour effectuer des opérations de transformation sur les pistes vidéo et audio.

Application d'un filtre de flou d'arrière-plan ou de remplacement d'arrière-plan

Voir cette documentation.

Application du filtre avancé de suppression du bruit

Voir cette documentation.

Application d'un transformateur vidéo à partir de la médiathèque de Vonage

La bibliothèque comprend deux classes principales :

MediaProcessor - Contrôle les transformateurs et comprend un setTransformers() qui vous permet de définir des transformateurs.

Connecteur de processeur de médias - Accepte un MediaProcessor dans son constructeur et gère les pistes d'entrée et de sortie. L'implémentation d'OpenTok.js gère les pistes. Vous n'avez qu'à fournir l'objet MediaProcessorConnector instance.

Pour utiliser un MediaProcessorConnector pour connecter un transformateur à l'audio ou à la vidéo d'un éditeur, utilisez la fonction Publisher.setAudioMediaProcessorConnector() et Publisher.setVideoMediaProcessorConnector() des méthodes.

Méthode Publisher.setVideoMediaProcessorConnector()

Les Publisher.setVideoMediaProcessorConnector() applique un transformateur vidéo à un flux publié :

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

Remarque : Les Publisher.setVideoMediaProcessorConnector() est incompatible avec la méthode Publisher.applyVideoFilter() méthode.

Méthode Publisher.setAudioMediaProcessorConnector()

Les Publisher.setAudioMediaProcessorConnector() applique un transformateur audio à un flux publié :

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

Méthode `Subscriber.setVideoMediaProcessorConnector()`

Les Subscriber.setVideoMediaProcessorConnector() Cette méthode applique un transformateur vidéo à un flux auquel l'utilisateur est abonné :

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

Méthode `Subscriber.setAudioMediaProcessorConnector()`

Les Subscriber.setAudioMediaProcessorConnector() applique un transformateur audio à un flux auquel l'utilisateur est abonné :

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

Exigences du client

L'API Insertable Streams utilisée par le Publisher.setVideoMediaProcessorConnector(), Subscriber.setVideoMediaProcessorConnector() et Publisher.applyVideoFilter() Ces méthodes sont prises en charge par les versions récentes de Chrome, Firefox, Electron, Opera, Edge, Samsung Internet, WebView Android ainsi que par les dernières versions de Safari (version 26 et plus) et de WebView iOS (version 26 et plus). Publisher.setAudioMediaProcessorConnector(), Subscriber.setAudioMediaProcessorConnector() et Publisher.applyAudioFilter() ne sont pas prises en charge par les autres navigateurs (non basés sur Chromium) ni sur iOS. Vous pouvez vérifier si le client prend en charge ces fonctionnalités en appelant la méthode OT.hasMediaProcessorSupport() méthode.

Les transformateurs, les filtres audio et les filtres vidéo nécessitent une prise en charge suffisante du processeur. Même dans les navigateurs pris en charge, les transformateurs peuvent ne pas fonctionner de manière stable lorsque des processus en arrière-plan limitent les ressources de traitement disponibles. Utilisez Chrome (version bureau ou Android) pour obtenir des résultats optimaux.

Pour une meilleure expérience utilisateur, assurez-vous que les ordinateurs portables/de bureau répondent à ces exigences minimales :

CPU - Intel Core i5 (avec 4 cœurs ou plus) ou Apple Silicon M1 (ou plus)
8G RAM (ou plus)
GPU dédié (par exemple, NVIDIA)

Certains systèmes d'exploitation peuvent proposer plusieurs paramètres ou modes de batterie pour économiser l'énergie (par exemple, pour prolonger la durée de vie de la batterie de l'ordinateur portable) en limitant les performances du processeur. Cela peut entraîner des performances sous-optimales du transformateur et introduire des artefacts audio ou vidéo indésirables. Nous vous recommandons de configurer votre système d'exploitation pour qu'il utilise le mode le plus performant (ou le mode pas utiliser le mode basse consommation) dans de tels cas.

De nombreuses transformations vidéo (telles que le flou d'arrière-plan) utilisent la segmentation pour séparer le locuteur de l'arrière-plan. Pour obtenir les meilleurs résultats, utilisez un éclairage adéquat et un arrière-plan simple. Un éclairage insuffisant ou des arrière-plans complexes peuvent provoquer des artefacts vidéo (par exemple, l'orateur ou un chapeau qu'il porte peuvent être flous en même temps que l'arrière-plan).

Vous devriez effectuer des tests de performance sur le plus grand nombre possible d'appareils pris en charge, que la transformation soit de niveau basique, intermédiaire ou avancé.

Vous pouvez utiliser l'événement « cpuPerformanceChanged » de la session pour détecter les variations de performances du processeur et désactiver les transformateurs vidéo si nécessaire. Voir Détection des variations de performances du processeur.

Pour obtenir des conseils supplémentaires sur l'optimisation de la qualité des appels, consultez Contrôle de la qualité des appels.

En savoir plus sur les transformateurs et les exemples de code

Pour plus d'informations, voir le Processeur média de Vonage la documentation de la bibliothèque.

Les Exemples Web d'Opentok comprend les exemples d'applications suivants qui utilisent la bibliothèque Vonage Media Processor pour appliquer des transformations aux flux publiés dans OpenTok.js :

Transformateur audio de base - Montre comment appliquer un transformateur audio à l'aide d'un web worker et d'un thread séparé pour le web worker.
Transformateur vidéo de base - Montre comment appliquer un transformateur vidéo à l'aide d'un canevas, d'un web worker et d'un thread distinct pour le web worker.
Zoom vidéo de base — Explique comment utiliser un transformateur de base pour agrandir l'éditeur.
Modéré-Arrière-plan-Blanchiment - Montre comment appliquer un transformateur vidéo à partir de l'écran d'affichage. @vonage/ml-transformers module.

Il existe d'autres exemples qui utilisent la bibliothèque Vonage Media Transformers ici.

Autres options de personnalisation de l'interface utilisateur

Pour connaître les autres options disponibles pour personnaliser l'interface utilisateur, voir la section Personnaliser l'interface utilisateur guide.