Applying filters to published video

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.