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