Processeur de médias (Web)

Utilisez la bibliothèque Vonage Media Processor pour appliquer des transformations personnalisées aux flux publiés.

Vous pouvez utiliser le Publisher.setAudioMediaProcessorConnector() et Publisher.setVideoMediaProcessorConnector() pour appliquer des transformateurs audio et vidéo personnalisés qui utilisent la bibliothèque Vonage Media Processor.

Il existe trois façons de mettre en œuvre les transformateurs :

  • De base : Utiliser le Publisher.applyVideoFilter() pour appliquer facilement le filtre prédéfini de flou d'arrière-plan ou de remplacement d'arrière-plan. Cette méthode met en œuvre ces filtres à l'aide de la médiathèque de Vonage, ne nécessitant que quelques paramètres de configuration :
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());

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

Remarque : Les transformations de média ne sont pas prises en charge sur tous les appareils. Voir Navigateurs pris en charge.

Les Processeur média de Vonage disponible sur npmfacilite l'utilisation de la Flux insérables API pour effectuer des opérations de transformation sur les pistes vidéo et audio.

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

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

Exigences du client

L'API Insertable Streams utilisée par le Publisher.setVideoMediaProcessorConnector() et Publisher.setAudioMediaProcessorConnector() n'est prise en charge que dans les versions récentes de Chrome, Electron, Opera, Samsung Internet, Edge et WebView Android. Elle n'est pas prise en charge dans les autres navigateurs (non basés sur Chrome) ou sur iOS. Vous pouvez vérifier si le client prend en charge cette fonctionnalité en appelant la méthode OT.hasMediaProcessorSupport() méthode.

Les transformateurs nécessitent un support processeur adéquat. Même dans les navigateurs pris en charge, les transformateurs peuvent ne pas être stables lorsque les processus en arrière-plan limitent les ressources de traitement disponibles. Utilisez Chrome (ordinateur de bureau ou Android) pour 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 devez effectuer des tests de référence sur le plus grand nombre possible d'appareils pris en charge, quelle que soit la transformation.

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 Videoo-api-web-samples 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 :

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.