Suggestions

close search

Add Messaging, Voice, and Authentication to your apps with Vonage Communications APIs

Visit the Vonage API Developer Portal

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.

setVideoTransformers() -- Sets video transformers for the publisher. 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:

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