Participant Label

Stream's UI components include a participant label that displays each participant's name and microphone status:

You can change the label style by passing RegularVideoRendererStyle or ScreenSharingVideoRendererStyle to UI components like CallContent, ParticipantsLayout, and ParticipantVideo.

CallContent( // or ParticipantsLayout
  style = RegularVideoRendererStyle(
      isShowingParticipantLabel = true,
      labelPosition = Alignment.TopStart
  ),
  ..
)

If you build the above styles, you will see the result below:

Customization

You can customize the participant label by implementing your own label composable function to the ParticipantVideo like the sample below:

CallContent(
    modifier = Modifier.background(color = VideoTheme.colors.appBackground),
    videoRenderer = { modifier, call, participant, style ->
        ParticipantVideo(
            modifier = modifier,
            call = call,
            participant = participant,
            style = style,
            labelContent = { participant ->
                Box(
                    modifier = Modifier
                        .padding(12.dp)
                        .align(Alignment.BottomStart)
                        .background(
                            Color.Black.copy(alpha = 0.5f),
                            RoundedCornerShape(16.dp)
                        )
                        .padding(horizontal = 12.dp, vertical = 6.dp)
                ) {
                    val userNameOrId by participant.userNameOrId.collectAsState()
                    Text(
                        text = userNameOrId,
                        color = Color.White
                    )
                }
            }
        )
    },
    ..

If you build the example, you'll see the result below:

UI Testing

Video Fallback