Filtres et effets

Vue d'ensemble

Les SDK du client vidéo de Vonage vous permettent d'utiliser des filtres et des effets lors de la publication de vidéos.

Ce mode d'emploi aborde les points suivants :

  • Publication d'un objet MediaStreamTrack et application d'effets
  • Application d'un filtre de flou d'arrière-plan ou de remplacement d'arrière-plan
  • Application du filtre avancé de suppression du bruit
  • Utilisation de la bibliothèque Vonage Media Processor pour appliquer des transformations personnalisées

Publication d'un objet MediaStreamTrack et application d'effets

Vous pouvez utiliser un piste MediaStream audio ou un vidéo MediaStream track comme source audio ou vidéo d'un flux publié. Cette fonction permet d'appliquer des filtres et des effets, tels que le flou d'arrière-plan ou le remplacement de l'arrière-plan, à l'audio ou à la vidéo publiée.

Vous pouvez utiliser le OT.getUserMedia() pour obtenir une référence à un MediaStream qui utilise la caméra sélectionnée par l'utilisateur. Vous pouvez ensuite utiliser la piste MediaStreamTrack vidéo obtenue à partir de cet objet MediaStream comme source d'un élément Video. Vous pouvez ensuite ajouter cet élément Video à un élément HTML Canvas, appliquer des filtres ou des effets au canevas et utiliser l'objet MediaStreamTrack vidéo filtré obtenu à partir du canevas comme source vidéo pour un flux publié. Pour un exemple, voir l'exemple Stream-Filter repo opentok-web-samples sur GitHub.

Vous pouvez utiliser le OT.getUserMedia() pour obtenir une référence à un MediaStream qui utilise le microphone sélectionné par l'utilisateur. Vous pouvez ensuite utiliser la piste audio MediaStreamTrack obtenue à partir de cet objet MediaStream comme la méthode audioSource lors de l'appel OT.initPublisher(). Vous pouvez ensuite créer un AudioContext et appeler son objet createMediaStreamSource() en passant l'objet MediaStream pour créer un objet MediaStreamAudioSourceNode . Vous pouvez ensuite appliquer des filtres audio à l'objet MediaStreamAudioSourceNode, ce qui aura pour effet d'appliquer les filtres au flux publié.

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

Use the OTPublisher.setVideoTransformers() method to apply a video filter for published video. You can apply a background blur filter or a background image filter.

Important: In version 2.28.0+ of the Vonage Video React Native SDK, you need to install the Vonage Media Library separately from the Vonage Video React Native SDK. For details, see Vonage Media Library integration.

The following code applies a background blur filter to a publisher's video:

<OTPublisher
  eventHandlers={{
    streamCreated: () => {
      this.publisher.setVideoTransformers([
        {
          name: 'BackgroundBlur',
          properties: JSON.stringify({
            radius: 'low',
          }),
        }
      ])
    }
  }}
  ref={instance => {
    this.publisher = instance;
  }}
/>

Note that the OTPublisher.setVideoTransformers() method takes an array of transformer objects. Each object has two properties:

A name property, set to either 'BackgroundBlur' or 'BackgroundReplacement'.

A properties property, defining options for the filter.

For details, see the documentation for the OTPublisher.setVideoTransformers() method.

The following code applies a background replacement filter to a publisher's video (supported on iOS only):

<OTPublisher
  eventHandlers={{
    streamCreated: () => {
      this.publisher.setVideoTransformers([
        {
          name: 'BackgroundReplacement',
          properties: JSON.stringify({
            image_file_path: 'path/to/image',
          }),
        }
      ])
    }
  }}
  ref={instance => {
    this.publisher = instance;
  }}
/>

To remove video filters from the published stream, call the OTPublisher.setVideoTransformers() method and pass in an empty array.

Important: Background blur and background replacement filters are resource-intensive and require devices with high processing power. It is recommended to only use these transformations on supported devices. See the following documentation: for iOS and Android

Application du filtre avancé de suppression du bruit

Use the OTPublisher.setAudioTransformers() method to apply an audio transformer to published video. One transformer, the noise suppression filter, is supported.

Important: The noise suppression filter uses the Vonage Media Library. You need to install the Vonage Media Library separately from the Vonage Video React Native SDK. For details, see Vonage Media Library integration.

The following code applies a noise suppression filter to a publisher's video:

<OTPublisher
  eventHandlers={{
    streamCreated: () => {
      this.publisher.setAudioTransformers([
        {
          name: 'NoiseSuppression',
          properties: '',
        }
      ])
    }
  }}
  ref={instance => {
    this.publisher = instance;
  }}
/>

To remove audio transformers from the published stream, call the OTPublisher.setAudioTransformers() method and pass in an empty array.

Important: Audio transformers are resource-intensive and require devices with high processing power. It is recommended to only use these transformations on supported devices. See the following documentation:

Utilisation de la bibliothèque du processeur multimédia de Vonage pour appliquer des transformations personnalisées

Voir le Utilisation du processeur média de Vonage guide du développeur.