Network Quality Indicator

Network quality can impact the video experience a lot. Therefore, it is always a good idea to display the network quality of the participants in the call.

Network quality in a call

When you are in a call, the network quality for each participant is delivered from the server. It is available via the connectionQuality property from CallParticipantState.

The connection quality property can have the following values:

enum SfuConnectionQuality {
  unspecified,
  poor,
  good,
  excellent,
}

By default, it is shown via the StreamConnectionQualityIndicator widget:

StreamConnectionQualityIndicator(
  connectionQuality: participant.connectionQuality,
  activeColor: connectionLevelActiveColor,
  inactiveColor: connectionLevelInactiveColor,
),

Additionally, you can customise some aspects of the network quality indicator such as the active/inactive color as well as the alignment of the network indicator.

You can do these customisations inside the StreamCallParticipant widget:

StreamCallContainer(
  // ...
  callContentBuilder: (
    BuildContext context,
    Call call,
    CallState callState,
  ) {
    return StreamCallContent(
      call: call,
      callState: callState,
      callParticipantsBuilder: (
        BuildContext context,
        Call call,
        CallState callState,
      ) {
        return StreamCallParticipants(
          call: call,
          participants: callState.callParticipants,
          callParticipantBuilder: (
            BuildContext context,
            Call call,
            CallParticipantState callState,
          ) {
            return StreamCallParticipant(
              call: call,
              participant: callState,
              connectionLevelActiveColor: Colors.blue,
              connectionLevelAlignment: Alignment.bottomRight,
              connectionLevelInactiveColor: Colors.white,
            );
          },
        );
      },
    );
  },
)

Watching a Livestream

Audio Volume Indicator