Detecting audio and video quality changes (JavaScript Only)

If a client experiences periods of degraded network connectivity, this may be reflected on the subscriber call quality. The Subscriber object dispatches a qualityScoreChanged event when the calculated audio and video MOS scores change. These scores are reported as integers between 1 (worst) and 5 (best), corresponding to bad, poor, fair, good, and excellent. For more details, see the Subscriber qualityScoreChanged event.

A Subscriber object dispatches this event only when one of the quality scores has changed. Each Subscribe dispatches events with its own audio and video quality scores, depending on whether it is subscribing to audio, video, or both.

In response to these events, your application can (optionally) notify the client of network conditions resulting in degraded call quality:

subscriber.on('qualityScoreChanged', ({qualityScore}) => {
  if (qualityScore.audioQualityScore <= 3){
    // Alert the user that the remote party is experiencing degraded service
  }
  if (qualityScore.videoQualityScore <= 3){
    // Alert the user that the remote party is experiencing degraded service
  }
});

Automatic reconnection

If a client drops a connection to a subscribed stream (for example, due to a network issue), it will attempt to automatically reconnect to the stream.

If a client drops a connection to a subscribed stream (for example, due to a drop in network connectivity in either client), it will attempt to automatically reconnect to the stream. When the stream is dropped and the client tries to reconnect, the OTSubscriber object dispatches a disconnected event. When the stream is restored, the OTSubscriber object dispatches a connected event. If the client cannot restore the stream, the OTSubscriber object dispatches a destroyed event.

In response to these events, your application can (optionally) display user interface notifications indicating the temporary disconnection, reconnection, and destroyed states:

<OTSubscriber
  eventHandlers={{
    disconnected: (event) => {
      console.log('stream disconnected -- stream ID:', event.streamId);
      // Display a user interface notification.
    },
    connected: (event) => {
      console.log('stream connected -- stream ID:', event.streamId);
      // Adjust user interface.
    },
    destroyed: (event) => {
      console.log('stream destroyed -- stream ID:', event.streamId);
      // Adjust user interface.
    }
  }}/>