OTPublisher

Properties | properties object | Methods | Events

The OTPublisher component will initialize a publisher and publish to the specified session upon mounting. To destroy the publisher, unmount the OTPublisher component. Please keep in mind that the publisher view is not removed unless you specifically unmount the OTPublisher component.

Add the OTPublisher component as a child of the OTSession component:

class App extends Component {
  constructor(props) {
    super(props);

    this.publisherProperties = {
      publishAudio: true,
      publishVideo: false,
      publishCaptions: true,
      cameraPosition: 'front'
    };

    this.publisherEventHandlers = {
      streamCreated: event => {
        console.log('Publisher stream created!', event);
      },
      streamDestroyed: event => {
        console.log('Publisher stream destroyed!', event);
      }
    };
  }

  render() {
    return (
      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
        <OTPublisher
          properties={this.publisherProperties}
          eventHandlers={this.publisherEventHandlers}
          style={{ height: 100, width: 100 }}
        />
      </OTSession>
    );
  }
}

Props

The OTPublisher component has the following props, each of which is optional:

properties object

The properties object passed into the OTPublisher object has the following properties:

Methods

getRtcStatsReport() Gets the RTC stats report for the publisher. This is an asynchronous operation. The OTPublisher object dispatches an rtcStatsReport event when RTC statistics for the publisher are available.

setAudioTransformers() -- Sets audio transformers for the publisher.

Important: To use this method, you need to add the Vonage Media Transformer library to your project, separately from the OpenTok React Native SDK. For details, see Vonage Media Library integration.

One audio transformer is supported -- the noise suppression filter.

This method has one parameter -- and array of objects defining each transformer to apply to the publisher's stream. A transformer object has two properties:

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

Important: Media transformations, such as the noise suppression filter, 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 more information on transformers, see Using the Vonage Media Processor library

setVideoTransformers() -- Sets video transformers for the publisher.

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

This method has one parameter -- and array of objects defining each transformer to apply to the publisher's stream. A transformer object has two properties:

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

Important: Media transformations, such as background blur and background replacement, 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 more information on transformers, see Using the Vonage Media Processor library

Events