Network Quality Indicator

It's important to indicate to users when the connection quality isn't good. Each participants (ParticipantState) includes the connectionQuality attribute. In addition you can also monitor your own connection using call.state.networkQuality.

You can use the NetworkQualityIndicator composable component, which is integrated into video render components by default:

Customization

Here's a small compose example to render a custom connection quality icon for each participant:

@Composable
fun NetworkQualityIndicator(
    modifier: Modifier,
    networkQuality: NetworkQuality
) {
    val color = lerp(Color.Red, Color.Green, networkQuality.quality)

    Canvas(modifier = modifier.size(16.dp)) {
        drawCircle(color)
    }
}

You can easily swap out the standard connection quality indicator with your own.

CallContent(
    modifier = Modifier.background(color = VideoTheme.colors.appBackground),
    videoRenderer = { modifier, call, participant, style ->
        ParticipantVideo(
            modifier = modifier,
            call = call,
            participant = participant,
            style = style,
            connectionIndicatorContent = {
                NetworkQualityIndicator(
                    modifier = Modifier
                        .align(Alignment.BottomEnd)
                        .padding(8.dp),
                    networkQuality = it
                )
            }
        )
    },
 ..
)

Now, you will see the custom network quality indicator like the result below:

Runtime Layout Switching

Connection Unstable