OTSubscriber

Props | Properties | Methods | Events

Props

Prop Type Required Description
sessionId String No OpenTok Session ID. This is auto populated by wrapping OTSubscriber with OTSession
streamId String No OpenTok Subscriber streamId. This is auto populated inside the OTSubscriber component when streamCreated event is fired from the native instance
properties Object No Properties passed into the native subscriber instance
streamProperties Object No Used to update individual subscriber instance properties
eventHandlers Object<Function> No Event handlers passed into the native subscriber instance
subscribeToSelf Boolean No If set to true, the subscriber can subscribe to it's own publisher stream (default: false)
children Function No A render prop allowing individual rendering of each stream

Properties

The OTSubscriber component will subscribe to a specified stream from a specified session upon mounting. The OTSubscriber component will stop subscribing and unsubscribing when it's unmounting.

Methods

getRtcStatsReport(streamId) Gets the RTC stats report for the subscriber to the stream with the specified stream ID. This is an asynchronous operation. The OTSubscriber object dispatches an rtcStatsReport event when RTC statistics for the subscriber are available.

Events

Example

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      streamProperties: {},
    };

    this.subscriberProperties = {
      subscribeToAudio: false,
      subscribeToVideo: true,
      subscribeToCaptions: false,
    };

    this.sessionEventHandlers = {
      streamCreated: event => {
        const streamProperties = {...this.state.streamProperties, [event.streamId]: {
          subscribeToAudio: true,
          subscribeToVideo: false,
          style: {
            width: 400,
            height: 300,
          },
        }};
        this.setState({ streamProperties });
      },
    };

    this.subscriberEventHandlers = {
      error: (error) => {
        console.log(`There was an error with the subscriber: ${error}`);
      },
      audioNetworkStats: event => {
        console.log('audioNetworkStats', event);
        // { timeStamp: 1643203644833, audioPacketsLost: 0, audioPacketsReceived: 64, audioBytesReceived: 5574 }
      },
      videoNetworkStats: event => {
        console.log('videoNetworkStats', event);
        // videoBytesReceived: 706635, videoPacketsLost: 0, timeStamp: 1643203644724, videoPacketsReceived: 656 }
      },
    };
  }

  render() {
    return (
      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token" eventHandlers={this.sessionEventHandlers}>
        <OTSubscriber
          properties={this.subscriberProperties}
          eventHandlers={this.subscriberEventHandlers}
          style={{ height: 100, width: 100 }}
          streamProperties={this.state.streamProperties}
        />
      </OTSession>
    );
  }
}

Custom rendering of streams

You can control the rendering of individual subscribers to streams. See Custom rendering of subscribers .