# Video Renderer

One of the primary low-level components we provide is the `VideoRenderer`. It's a simple component built in Jetpack Compose, which utilizes [VideoTextureViewRenderer](https://getstream.github.io/webrtc-android/stream-webrtc-android-ui/io.getstream.webrtc.android.ui/-video-texture-view-renderer/index.html) under the hood. It supports rendering of both a user camera track and screen sharing track.

Let's see how to use the component in your UI.

## Rendering a Single Video

To render a single video track on your layout, you can use the `VideoRenderer` composable function like this:

```kotlin
import io.getstream.video.android.compose.ui.components.video.VideoRenderer

@Composable
fun CustomVideoComponent(
    call: Call,
    participant: ParticipantState
) {
    // step 1 - observe video track from a participant.
    val videoTrack by participant.videoTrack.collectAsState()

    if (videoTrack != null) { // step 2 - check whether the track is null or not.
        VideoRenderer(
            modifier = Modifier.fillMaxSize(),
            call = call,
            video = videoTrack, // step 3 - pass the video track to VideoRenderer to render the video
            sessionId = participant.sessionId,
            trackType = TrackType.TRACK_TYPE_VIDEO
        )
    } else {
        // show a custom fallback for an unavailable video track
    }
}
```

There are a few steps going on here:

1. Using the `ParticipantState`, you can get that participant's `videoTrack`. It also contains the `sessionId` of that participant, which is a unique UUID value, used to connect the tracks and rendering.
2. When you have the track and it's not `null`, you're ready to show the UI using `VideoRenderer` and its parameters.
3. Using `modifier`, you can customize the size, shape, elevation and similar properties of the component UI.

This snippet of code will render a single video track from a call.

## Choosing the VideoTrack

The `video` parameter in the `VideoRenderer` is used to render the Video UI. To provide the video track, you can use the `ParticipantState`. Within it, we store an instance of the `VideoTrack` class from the WebRTC library and we expose two possible tracks:

- `videoTrack`: Represents the Video of the participant, from their camera feed.
- `screenSharingTrack`: Represents the screen sharing track of the participant, based on what screen or window they're sharing.

You can always determine if a person is screen sharing by checking the `ParticipantState.screenSharingTrack` property as well as if the `videoTrack` or `screenSharingTrack` are `null` or valid.

## VideoRenderer Lifecycle

To ensure that the `VideoRenderer` component works correctly, you need to handle the component lifecycle. Specifically, you need to start and stop the video track when the component is added to and removed from the screen.

Fortunately enough, we provide this for you, out of the box. While tracks are persisted within the `ParticipantState`, the WebRTC subscription is managed under the hood.

When the composable function is called within the UI, it's rendered and connected to the [VideoTextureViewRenderer](https://getstream.github.io/webrtc-android/stream-webrtc-android-ui/io.getstream.webrtc.android.ui/-video-texture-view-renderer/index.html) under the hood. When the state changes and it's removed from the UI, the renderer is disposed of and the state is cleaned up.

---

This page was last updated at 2025-08-15T14:16:34.405Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/android/ui-components/video-renderer/](https://getstream.io/video/docs/android/ui-components/video-renderer/).