Implantación de la pantalla compartida

Kotlin

Solicitud de permisos

Dado que nuestra aplicación utiliza audio y vídeo del dispositivo del usuario, tendremos que añadir algo de código para solicitar permisos de audio y vídeo. Utilizaremos accompanist para simplificar el proceso.

Añadir permisos a AndroidManifest.xml

Dentro de tu AndroidManifest.xmlañada lo siguiente dentro del <manifest> etiqueta:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />

<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />

ℹ️ Nota: En WAKE_LOCK se utiliza para evitar que el dispositivo entre en reposo durante una videollamada. Esto garantiza la transmisión ininterrumpida de contenido multimedia.

1a. Servicio de primer plano para proyección multimedia

La captura de pantalla debe ejecutarse dentro de un servicio en primer plano de tipo mediaProjection. Declare el servicio en su manifiesto:

<service
    android:name=".ScreenSharingService"
    android:exported="false"
    android:foregroundServiceType="mediaProjection"
    android:permission="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />

Añadir dependencias y manifestar permisos

En primer lugar, añada el Accompanist dependencia a su build.gradle archivo:

dependencies {
   implementation("com.google.accompanist:accompanist-permissions:0.34.0")
}

Aplicación de la gestión de permisos en Compose

Con Accompanistutilizamos rememberMultiplePermissionsState. Esto permite que la interfaz de usuario reaccione automáticamente cuando se conceden o deniegan permisos. Crear un nuevo archivo VideoChatPermissionWrapper.kt como sigue:

@OptIn(ExperimentalPermissionsApi::class)
@Composable
fun VideoChatPermissionWrapper(
    onPermissionsGranted: () -> Unit,
    content: @Composable () -> Unit
) {
    val permissionsState = rememberMultiplePermissionsState(
        permissions = listOf(
            Manifest.permission.CAMERA,
            Manifest.permission.RECORD_AUDIO
        )
    )

    if (permissionsState.allPermissionsGranted) {
        // 1. Notify parent that permissions are ready (run once)
        LaunchedEffect(Unit) {
            onPermissionsGranted()
        }
        // 2. Show the actual video UI
        content()
    } else {
        // 3. Show a Rationale UI if permissions are missing
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Camera and Audio permissions are required for video chat.")

            Button(
                onClick = { permissionsState.launchMultiplePermissionRequest() },
                modifier = Modifier.padding(top = 16.dp)
            ) {
                Text("Grant Permissions")
            }
        }

        // Auto-launch the popup on the very first composition
        LaunchedEffect(Unit) {
            if (!permissionsState.allPermissionsGranted) {
                permissionsState.launchMultiplePermissionRequest()
            }
        }
    }
}

Actualización MainActivity.kt & definir el initializeSession() como marcador de posición para la configuración de tu videollamada"

Ahora, integra esto en tu MainActivity. Simplemente llame a su VideoChatPermissionWrapper dentro de setContent.

class MainActivity : ComponentActivity() {

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

        enableEdgeToEdge()

        setContent {
            VideoChatPermissionWrapper(
                onPermissionsGranted = {
                    initializeSession(
                        appId = VonageVideoConfig.APP_ID,
                        sessionId = VonageVideoConfig.SESSION_ID,
                        token = VonageVideoConfig.TOKEN
                    )
                }
            ) {
                VideoChatScreen(
                    publisherView = publisherView,
                    subscriberView = subscriberView
                )
            }
        }
    }


    private fun initializeSession(appId: String, sessionId: String, token: String) {
        // TODO: Connect to Vonage session
    }
}

Próximos pasos

Una vez concedidos los permisos, el initializeSession() se activará. En los próximos pasos del tutorial, implementarás la lógica para conectarte a una sesión de la Video API de Vonage.