Creating a video chat app

Kotlin

Adjusting the sample app UI

The Android SDK exposes the video streams (both published and subscribed) as View objects. You can attach these views to any composable view in your layout.

Create a composable view

In Android Studio:

Create a new file VideoChatScreen.kt
Fill contents of the file with:

@Composable
fun VideoChatScreen(
    publisherView: View?,
    subscriberView: View?
) {
    Box(modifier = Modifier.fillMaxSize()) {

        // Subscriber full-screen
        subscriberView?.let { view ->
            AndroidView(
                factory = { view },
                modifier = Modifier
                    .fillMaxSize()
            )
        }?: run {
            Text(
                "Connect another subscriber to this session to see his/hers video",
                modifier = Modifier
                .fillMaxSize()
                    .padding(vertical =
                    150.dp)
            )
        }


        publisherView?.let { view ->
            // Publisher picture-in-picture
            AndroidView(
                factory = { view },
                modifier = Modifier
                    .size(width = 90.dp, height = 120.dp)
                    .align(Alignment.BottomEnd)
                    .padding(16.dp)
                    .background(Color.LightGray)
            )
        }
    }
}

Now declare publisherView and subscriberView as properties of the MainActivity class (right after the declaration for the session property):

private var publisherView by mutableStateOf<View?>(null)
private var subscriberView by mutableStateOf<View?>(null)

Finally, in the existing onCreate() method, initialize the VideoChatScreen view by adding it via the setContent() method call:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()

    setContent {
        VideoChatScreen(
            publisherView = publisherView,
            subscriberView = subscriberView
        )
    }

    requestPermissions()
}

Basic video chat

Learn the basic concepts of the Vonage Video API platform, including how users can communicate through video, voice, and messaging. Explore a basic Vonage Video API flow.

Available on:

JavaScript Kotlin Java Swift Objective-C Windows Linux

Steps

Introduction

Getting Started

Creating a new project

Adding the Android SDK

Setting up authentication

Requesting permissions

Connecting to the session

Adjusting the sample app UI

Publishing a stream to the session