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:

  • name (String) -- Set this to 'NoiseSuppression'.

  • properties (String) -- Set this to an empty string.

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:

  • name (String) -- Either 'BackgroundBlur' (for a background blur filter) or 'BackgroundReplacement' (for a background image replacement filter).

  • properties (String) -- A JSON string with the properties of the Vonage video transformer.

    For a background blur transformer, the format of the JSON is:

    `{
   "radius" :"None"
 }`

    Valid values for the radius property are "None", "High", and "Low".

    For a custom background blur transformer, the format of the JSON is:

    `{
  "radius": "Custom",
  "custom_radius": "value"
}`

    custom_radius can be any positive integer.

    For a background replacement transformer, the format of the JSON is:

    `{
  "image_file_path": "path/to/image"
}`

    Where image_file_path is the absolute file path of a local image to use as virtual background. Supported image formats are PNG and JPEG.

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

  • audioLevel (Number) -- The audio level, from 0 to 1.0. Adjust this value logarithmically for use in adjusting a user interface element, such as a volume meter. Use a moving average to smooth the data.

  • audioNetworkStats (Object) — Sent periodically to report audio statistics for the publisher. A PublisherAudioNetworkStatsEvent object is passed into the event handler.

  • error (Object) -- Sent if the publisher encounters an error. After this message is sent, the publisher can be considered fully detached from a session and may be released.

  • muteForced -- Sent when a moderator has forced this client to mute audio.

  • otrnError (Object) -- Sent if there is an error with the communication between the native publisher instance and the JS component.

  • rtcStatsReport (Object) -- Sent when RTC stats reports are available for the publisher, in response to calling the OTPublisher.getRtcStatsReport() method. A PublisherRtcStatsReportEvent object is passed into the event handler. This event has an array of objects. For a routed session (a seesion that uses the OpenTok Media Router), this array includes one object, defining the statistics for the single video media stream that is sent to the OpenTok Media Router. In a relayed session, the array includes an object for each subscriber to the published stream. Each object includes two properties:

    • connectionId -- For a relayed session (in which a publisher sends individual media streams to each subscriber), this is the unique ID of the client’s connection.

    • jsonArrayOfReports -- A JSON array of RTC stats reports for the media stream. The structure of the JSON array is similar to the format of the RtcStatsReport object implemented in web browsers (see the Mozilla docs). Also see this W3C documentation.

  • streamCreated (Object) -- Sent when the publisher starts streaming. A streamingEvent object is passed into the event handler.

  • streamDestroyed (Object) -- Sent when the publisher stops streaming. A streamingEvent object is passed into the event handler.

  • videoDisabled -- Sent when the publisher stops sending video because of publisher audio fallback.

  • videoDisableWarning -- Sent when the publisher is close to going to audio-only fallback becuase of declining network conditions. See publisher audio fallback.

  • videoDisableWarningLifted -- Sent after a videoDisableWarning event when network conditions improve. See publisher audio fallback.

  • videoEnabled -- Sent when the publisher resumes sending video after it was disabled because of publisher audio fallback.

  • videoNetworkStats (Object) -- Sent periodically to report audio statistics for the publisher. A PublisherVideoNetworkStatsEvent object is passed into the event handler.