From 4955745d4e04aec77ce0eea81e8125ad538e8d06 Mon Sep 17 00:00:00 2001 From: Jaewoong Eum Date: Wed, 8 May 2024 10:12:00 +0900 Subject: [PATCH] Refactor video calling tutorial samples (#1087) --- .../android/tutorial/video/MainActivity.kt | 50 ++++++++----------- .../android/tutorial/video/MainActivity2.kt | 6 ++- .../android/tutorial/video/MainActivity3.kt | 6 ++- 3 files changed, 28 insertions(+), 34 deletions(-) diff --git a/tutorials/tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity.kt b/tutorials/tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity.kt index 255407f293..5dc03aa6af 100644 --- a/tutorials/tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity.kt +++ b/tutorials/tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity.kt @@ -17,16 +17,13 @@ package io.getstream.video.android.tutorial.video import android.os.Bundle -import android.util.Log import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.background -import androidx.compose.foundation.layout.BoxWithConstraints -import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material.Text -import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf @@ -43,7 +40,6 @@ import io.getstream.video.android.compose.permission.LaunchCallPermissions import io.getstream.video.android.compose.theme.VideoTheme import io.getstream.video.android.compose.ui.components.call.renderer.FloatingParticipantVideo import io.getstream.video.android.compose.ui.components.call.renderer.ParticipantVideo -import io.getstream.video.android.compose.ui.components.video.VideoRenderer import io.getstream.video.android.core.GEO import io.getstream.video.android.core.RealtimeConnection import io.getstream.video.android.core.StreamVideoBuilder @@ -63,21 +59,23 @@ class MainActivity : ComponentActivity() { // replace the secrets with the following instruction: // https://getstream.io/video/docs/android/playground/demo-credentials/ - val userId = "REPLACE_WITH_USER_ID" + val apiKey = "REPLACE_WITH_API_KEY" val userToken = "REPLACE_WITH_TOKEN" + val userId = "REPLACE_WITH_orange-flower-9" val callId = "REPLACE_WITH_CALL_ID" // step1 - create a user. val user = User( id = userId, // any string - name = "Tutorial", // name and image are used in the UI + name = "Tutorial", // name and image are used in the UI, + image = "https://bit.ly/2TIt8NR", role = "admin", ) // step2 - initialize StreamVideo. For a production app we recommend adding the client to your Application class or di module. val client = StreamVideoBuilder( context = applicationContext, - apiKey = "REPLACE_WITH_API_KEY", // demo API key + apiKey = apiKey, // demo API key geo = GEO.GlobalEdgeNetwork, user = user, token = userToken, @@ -92,46 +90,38 @@ class MainActivity : ComponentActivity() { // step4 - apply VideTheme VideoTheme { - // step5 - define required properties. + // step5 - define required properties val remoteParticipants by call.state.remoteParticipants.collectAsState() val remoteParticipant = remoteParticipants.firstOrNull() - val me by call.state.localParticipant.collectAsState() + val me by call.state.me.collectAsState() val connection by call.state.connection.collectAsState() var parentSize: IntSize by remember { mutableStateOf(IntSize(0, 0)) } - LaunchedEffect(key1 = connection) { - Log.e("Test", "connection: $connection") - } - - // step5 - render a local and remote videos. - BoxWithConstraints( + // step6 - render text that displays the connection status + Box( contentAlignment = Alignment.Center, modifier = Modifier .fillMaxSize() - .background(VideoTheme.colors.baseSheetPrimary) + .background(VideoTheme.colors.baseSenary) .onSizeChanged { parentSize = it }, ) { if (remoteParticipant != null) { - val remoteVideo by remoteParticipant.video.collectAsState() - - Column(modifier = Modifier.fillMaxSize()) { - VideoRenderer( - modifier = Modifier.weight(1f), - call = call, - video = remoteVideo, - ) - } + ParticipantVideo( + modifier = Modifier.fillMaxSize(), + call = call, + participant = remoteParticipant, + ) } else { if (connection != RealtimeConnection.Connected) { Text( - text = "loading...", + text = "waiting for a remote participant...", fontSize = 30.sp, color = VideoTheme.colors.basePrimary, ) } else { Text( modifier = Modifier.padding(30.dp), - text = "Join call ${call.id} in your browser", + text = "Join call ${call.id} in your browser to see the video here", fontSize = 30.sp, color = VideoTheme.colors.basePrimary, textAlign = TextAlign.Center, @@ -140,11 +130,11 @@ class MainActivity : ComponentActivity() { } // floating video UI for the local video participant - if (me != null) { + me?.let { localVideo -> FloatingParticipantVideo( modifier = Modifier.align(Alignment.TopEnd), call = call, - participant = me!!, + participant = localVideo, parentBounds = parentSize, ) } diff --git a/tutorials/tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity2.kt b/tutorials/tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity2.kt index a5686236d7..7b267746c7 100644 --- a/tutorials/tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity2.kt +++ b/tutorials/tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity2.kt @@ -45,21 +45,23 @@ class MainActivity2 : ComponentActivity() { // replace the secrets with the following instruction: // https://getstream.io/video/docs/android/playground/demo-credentials/ - val userId = "REPLACE_WITH_USER_ID" + val apiKey = "REPLACE_WITH_API_KEY" val userToken = "REPLACE_WITH_TOKEN" + val userId = "REPLACE_WITH_orange-flower-9" val callId = "REPLACE_WITH_CALL_ID" // step1 - create a user. val user = User( id = userId, // any string name = "Tutorial", // name and image are used in the UI + image = "https://bit.ly/2TIt8NR", role = "admin", ) // step2 - initialize StreamVideo. For a production app we recommend adding the client to your Application class or di module. val client = StreamVideoBuilder( context = applicationContext, - apiKey = "REPLACE_WITH_API_KEY", // demo API key + apiKey = apiKey, // demo API key geo = GEO.GlobalEdgeNetwork, user = user, token = userToken, diff --git a/tutorials/tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity3.kt b/tutorials/tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity3.kt index 7b2bd424f7..bbbcd94e15 100644 --- a/tutorials/tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity3.kt +++ b/tutorials/tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity3.kt @@ -47,21 +47,23 @@ class MainActivity3 : ComponentActivity() { // replace the secrets with the following instruction: // https://getstream.io/video/docs/android/playground/demo-credentials/ - val userId = "REPLACE_WITH_USER_ID" + val apiKey = "REPLACE_WITH_API_KEY" val userToken = "REPLACE_WITH_TOKEN" + val userId = "REPLACE_WITH_orange-flower-9" val callId = "REPLACE_WITH_CALL_ID" // step1 - create a user. val user = User( id = userId, // any string name = "Tutorial", // name and image are used in the UI + image = "https://bit.ly/2TIt8NR", role = "admin", ) // step2 - initialize StreamVideo. For a production app we recommend adding the client to your Application class or di module. val client = StreamVideoBuilder( context = applicationContext, - apiKey = "REPLACE_WITH_API_KEY", // demo API key + apiKey = apiKey, // demo API key geo = GEO.GlobalEdgeNetwork, user = user, token = userToken,