Filters and Effects

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.

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.

Use the Publisher.applyVideoFilter() method to apply a video filter for the publisher. You can apply a background blur filter or a background image filter. A publisher can have only one (or zero) filters applied at one time. When you set a new filter, a previously set filter is removed.

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

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

You can also apply a video filter by setting the videoFilter option when calling the OT.initPublisher() method:

For details, see the reference documentation for Publisher.applyVideoFilter().

This method is incompatible with the Publisher.setVideoMediaProcessorConnector() method. Calling this method after Publisher.setVideoMediaProcessorConnector(connector) returns a promise that is rejected with an error, with the name property of the error set to 'OT_NOT_SUPPORTED'. You can remove the connector by calling Publisher.setVideoMediaProcessorConnector(null).

You can also set the initial video filter by setting a videoFilter option when calling OT.initPublisher() method.

To clear the video filter, call the Publisher.clearVideoFilter() method.

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.

Advanced noise suppression is an audio filter that greatly reduces the background noise around the publisher. This can be useful when a participant is in a crowded or noisy environment, like in a cafe, or if white noise is present, like from an HVAC system. It can work separately or in conjunction with the noiseSuppression property set when calling the OT.initPublisher method.

Use the Publisher.applyAudioFilter() method to apply an audio filter for the publisher. You can apply an advanced noise suppression filter. A publisher can have only one (or zero) filters applied at one time. When you set a new filter, any previously set filter is removed. This is a beta feature.

The following code applies an advanced noise suppression audio filter to a publisher's audio:

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

You can also apply the advanced noise suppression audio filter by setting the audioFilter option when calling the OT.initPublisher() method:

const publisher = OT.initPublisher(null, {
  audioFilter: {
    type: 'advancedNoiseSuppression',
  },
});

For details, see the reference documentation for Publisher.applyAudioFilter().

This method is incompatible with the Publisher.setAudioMediaProcessorConnector() method. Calling this method after Publisher.setAudioMediaProcessorConnector(connector) returns a promise that is rejected with an error, with the name property of the error set to 'OT_NOT_SUPPORTED'. You can remove the connector by calling Publisher.setAudioMediaProcessorConnector(null).

To clear the advanced noise suppression filter, call the Publisher.clearAudioFilter() method.