Transmisión de video en vivo con Jetpack Compose y Agora Android Video SDK | Por Meherdeep Thakur | Marzo de 2022
Con Vanilla Android, las personas solían preocuparse por la jerarquía de actividades de visualización, lo que a menudo complica el desarrollo de la interfaz de usuario para las aplicaciones de Android. Jetpack Compose resuelve este problema utilizando Kotlin, un lenguaje con el que la mayoría de los desarrolladores de Android están familiarizados. Jetpack Compose es un kit de herramientas de interfaz de usuario reactiva que simplifica y acelera el desarrollo de la interfaz de usuario. Los desarrolladores familiarizados con Flutter o React encontrarán muchas similitudes en los marcos.
En este tutorial, seguiremos los pasos necesarios para crear una aplicación de transmisión de video en vivo utilizando Agora Android SDK y Jetpack Compose framework. Las transmisiones en vivo permiten a los usuarios unirse a un canal como anfitrión o miembro de la audiencia.
- Abra Android Studio, cree un proyecto y seleccione la plantilla Actividad de composición vacía:
2. Asigne un nombre apropiado a su aplicación y haga clic en Finalizar.
3. Agregue las dependencias necesarias a su archivo Gradle de nivel de aplicación:
implementation "androidx.compose.material:material-icons-extended:$compose_version"
implementation 'io.agora.rtc:full-sdk:3.5.0'
4. Agregue permisos relevantes a su AndroidManifest documento.
¡Todo listo! Ahora construyamos nuestra aplicación.
Continuaremos y crearemos una interfaz de usuario simple para nuestra pantalla de inicio de sesión que tiene dos funciones principales:
- Lea el nombre del canal como una cadena ingresada por el usuario.
- Lea el rol del usuario (emisor o espectador) como un botón de opción.
Después de toda la configuración y creación de la página de inicio de sesión, tenemos todo lo que necesitamos para crear la pantalla de llamada. Comenzaremos agregando permisos de usuario para la cámara y el micrófono.Para ello vamos a crear una función. UIRequirePermissions Compruebe si el usuario ha concedido permiso para la cámara y el micrófono.
Si se otorga el permiso, movemos al usuario a nuestra pantalla de llamadas. De lo contrario, mostramos una pantalla de alerta para los permisos de usuario.
Una vez que hayamos creado las funciones que verifican y solicitan permisos de usuario, podemos hacerlo en nuestro VideoActivity.
Según el estado del permiso, redirigimos a la pantalla de llamada o a la pantalla de alerta.
pantalla de alerta
La pantalla de alerta es responsable de obtener los permisos de cámara y micrófono del usuario.
pantalla de llamada
Una vez que el usuario acepte todos los permisos de usuario, será redirigido a la pantalla de llamada, donde inicializaremos el SDK de Agora Android y configuraremos nuestro diseño de videollamada.
Comenzamos creando una variable remoteUserMap que asigna los UID de los usuarios remotos a sus TextureViews:
var remoteUserMap by remember {
mutableStateOf(mapOf())
}
Después de declarar esta variable, podemos crear nuestra función initEngine, que es responsable de inicializar el SDK de Android Agora y configurar el perfil del canal para vivir.
En esta función, configuramos el rol del cliente en función de la entrada recibida del usuario en la página de inicio de sesión.
Con eso, tenemos la configuración completa que necesitamos para hacer videollamadas. Vamos a crear la interfaz de usuario para nuestra aplicación.
Incluiremos tres componentes principales en la interfaz de usuario de este proyecto:
- vista de usuario local
- vista de usuario remoto
- Controles de usuario (silenciar/activar, activar/desactivar cámara, desconectar llamadas)
Para construir la vista local usaremos AndroidView De Jetpack Componer. AndroidView() Es componible y se puede usar para agregar vistas de Android en las funciones @Composable. Esto significa que simplemente puede usar las clases de Android existentes en lugar de los equivalentes de composición.
Puede diseñar la vista local como desee. Pero para simplificar, extenderemos la vista nativa a pantalla completa. Para usuarios remotos, usaremos una fila desplazable que aparece en la parte superior de la pantalla del usuario.
aquí, remoteListInfo es sólo remoteUserMap hemos estado manteniendo. Para la vista remota, usaremos una línea para agregar dinámicamente la vista texturizada cuando el usuario se una al canal.
Una vez que agregamos las vistas local y remota, tenemos una aplicación de transmisión de video en vivo completa. Para agregar controles a nuestra plataforma de transmisión, agregaremos algunas funcionalidades básicas como:
- Silenciar/activar transmisión
- Deshabilitar/habilitar cámara
- desconectar
¡Eso es todo!
Así de fácil es crear aplicaciones de transmisión de video en vivo con Jetpack Compose. Si siguió el código compartido anteriormente, tendrá una interfaz de usuario final que se ve así:
Puedes consultar el código completo de esta aplicación aquí.
Para obtener más información sobre Agora Android SDK y otros casos de uso, consulta la guía para desarrolladores. aquí.
También puede consultar la documentación completa para las funciones anteriores y más aquí.
te invito a unirte Comunidad Slack de desarrolladores de Agora.io.
