Video Fallback

In terms of design the video fallback can be quite creative. How do you indicate that someone is speaking or their video track is unavailable? How does the background look.

ParticipantVideo and VideoRenderer support to show an user avatar for the video fallback by default like the image below:

Here's an example of how to build your own video fallback. Let's say that you want to show a user avatar for video tracks that are not available.

// render a nice avatar as a fallback
VideoRenderer(
    call = call,
    media = media,
    videoFallbackContent = { call ->
        val participant by call.state.participants.collectAsState()
        val user = participant.firstOrNull { it.sessionId == media.sessionId }

        if (user != null) {
            UserAvatar(user = user.initialUser)
        }
    }
)

If you use ParticipantVideo, which is built with the full participant information on top of the VideoRenderer, it will be much easier:

ParticipantVideo(
    call = call,
    participant = participant,
    videoFallbackContent = {
        ..
    }
)

Customization

If you want to custom the video fallback from higher-level of components, such as CallContent, you can achieve it easily by implementing videoRenderer composable parameter like the example below:

CallContent(
    modifier = Modifier.background(color = VideoTheme.colors.appBackground),
    onBackPressed = { finish() },
    videoRenderer = { modifier, call, participant, style ->
        ParticipantVideo(
            modifier = modifier,
            call = call,
            participant = participant,
            style = style,
            videoFallbackContent = {
                UserAvatar(user = participant.initialUser)
            }
        )
    },
    ..
)

Customization​

Did you find this page helpful?

Customization