Me user video freezes when camera turned off or when turned on it keeps showing avatar sometimes

[ataballyyeva]

Describe the bug
Me user video freezes when camera turned off or when turned on it keeps showing avatar sometimes. It happens only when microphone is on, I could not reproduce it in microphone muted version.

SDK version

• 1.22.0

To Reproduce
Steps to reproduce the behavior:

1. Start a call and join
2. Make microphone is on
3. Tap the Video icon to turn it off
4. tap it a few more times (give it a second to change state each time)

Expected behavior
Video stream should have 2 states only, button should always match. If camera on show video, if camera is off show avatar.

Device:

• Pixel 7a
• Android version: OS16

Screenshots

[coderabbitai]

⚠️ Possible Duplicate Issue(s)

• Sometimes mute mic in call disturbs camera and shows avatar #1643

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[ataballyyeva]

I closed old issue it is not duplicate it is different.

[ataballyyeva]

I could reproduce it with demo app just adding extra Stream components it helped me to reproduce it. Just replace MainActivity of the DemoApp with following:

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]

here is screenshot with above demoApp added some more Stream component

[rahul-lohra]

Hi @ataballyyeva
Thank you for reporting and sharing reproduction steps. We will take a look into this