RemoteParticipant displays mirroring screen

[ataballyyeva]

Describe the bug
when Android user joins call first, User B video shows mirrored

SDK version
-1.22.0

To Reproduce
Steps to reproduce the behavior:
Pre-conditions: User A on android device

1. User A start call
2. User A join into Call room first
3. User B join into call room

Expected behavior
User B video should always show in normal video view. Attached screenshot that shows both local and joined users in mirror mode.

Device:

• Pixel 7A, Pixel 9 PRO
• OS16, OS15
  Screenshots

[ataballyyeva]

I locally added some of Stream components into demo app to reproduce the issue, just copy and paste the MainActivity in demo app with below version:

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
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.activecall.CallContent
import io.getstream.video.android.compose.ui.components.call.controls.ControlActions
import io.getstream.video.android.compose.ui.components.call.controls.actions.FlipCameraAction
import io.getstream.video.android.compose.ui.components.call.controls.actions.ToggleCameraAction
import io.getstream.video.android.compose.ui.components.call.controls.actions.ToggleMicrophoneAction
import io.getstream.video.android.compose.ui.components.call.renderer.FloatingParticipantVideo
import io.getstream.video.android.compose.ui.components.call.renderer.LayoutType
import io.getstream.video.android.compose.ui.components.call.renderer.ParticipantVideo
import io.getstream.video.android.compose.ui.components.call.renderer.ParticipantsLayout
import io.getstream.video.android.compose.ui.components.call.renderer.RegularVideoRendererStyle
import io.getstream.video.android.core.GEO
import io.getstream.video.android.core.StreamVideoBuilder
import io.getstream.video.android.model.User

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

    val apiKey = "mmhfdzb5evj2"
    val userToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL3Byb250by5nZXRzdHJlYW0uaW8iLCJzdWIiOiJ1c2VyL1ZpdmFjaW91c19CYXJyYWN1ZGEiLCJ1c2VyX2lkIjoiVml2YWNpb3VzX0JhcnJhY3VkYSIsInZhbGlkaXR5X2luX3NlY29uZHMiOjYwNDgwMCwiaWF0IjoxNzc3MzA3NDEzLCJleHAiOjE3Nzc5MTIyMTN9.509wXArZHNbpFgWy5WyVoXq4Ap2zx2quAyZ8LevyG6U"
    val userId = "Vivacious_Barracuda"
    val callId = "XUZ7Zhrq0bEIG46hXYLDh"

    // 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",
    )

    // Initialize StreamVideo. For a production app, we recommend adding the client to your Application class or di module.
    val client = StreamVideoBuilder(
        context = applicationContext,
        apiKey = apiKey,
        geo = GEO.GlobalEdgeNetwork,
        user = user,
        token = userToken,
    ).build()

    setContent {
        // Request permissions and join a call, which type is `default` and id is `123`.
        val call = client.call(type = "default", id = callId)
        val me by call.state.me.collectAsState()
        LaunchCallPermissions(
            call = call,
            onAllPermissionsGranted = {
                // All permissions are granted so that we can join the call.
                val result = call.join(create = true)
                result.onError {
                    Toast.makeText(applicationContext, it.message, Toast.LENGTH_LONG).show()
                }
            }
        )

        // Apply VideoTheme
        VideoTheme {
            val isCameraEnabled by call.camera.isEnabled.collectAsState()
            val isMicrophoneEnabled by call.microphone.isEnabled.collectAsState()
            var parentSize: IntSize by remember { mutableStateOf(IntSize(0, 0)) }


            CallContent(
                modifier = Modifier.background(color = Color.White),
                call = call,
                onBackPressed = { onBackPressed() },
                videoContent = {
                    ParticipantsLayout(
                        call = call,
                        layoutType = LayoutType.DYNAMIC,
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(6.dp),
                        videoRenderer = { modifier, _, participant, style ->
                            ParticipantVideo(
                                call = call,
                                participant = participant,
                                modifier = modifier,
                                style = style
                            )
                        })
                },
                floatingVideoRenderer = { call, _ ->
                    if (me != null) {
                        FloatingParticipantVideo(
                            modifier = Modifier.align(Alignment.TopEnd),
                            call = call,
                            participant = me!!,
                            parentBounds = parentSize
                        )
                    }
                },
                controlsContent = {
                    ControlActions(
                        call = call,
                        actions = listOf(
                            {
                                ToggleCameraAction(
                                    modifier = Modifier.size(52.dp),
                                    isCameraEnabled = isCameraEnabled,
                                    onCallAction = { call.camera.setEnabled(it.isEnabled) }
                                )
                            },
                            {
                                ToggleMicrophoneAction(
                                    modifier = Modifier.size(52.dp),
                                    isMicrophoneEnabled = isMicrophoneEnabled,
                                    onCallAction = { call.microphone.setEnabled(it.isEnabled) }
                                )
                            },
                            {
                                FlipCameraAction(
                                    modifier = Modifier.size(52.dp),
                                    onCallAction = { call.camera.flip() }
                                )
                            },
                        )
                    )
                }
            )
        }
    }
}

}

[ataballyyeva]

I think ParticipantsLayout is causing this issue. I did not customize anything in there all default Stream Components

[rahul-lohra]

Hi @ataballyyeva
Thanks for reporting. We will take a look into this

[rahul-lohra]

Closing this issue as part of the changes released in v1.23.1