Skip to main content

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,
);
},
);
},
);
},
)

Did you find this page helpful?