Creación de una aplicación de chat de video: WebRTC en Jetpack Compose (Parte 2) | de Jae Woong Eum | febrero 2023

Publicado originalmente en el blog Stream de Jaewoong. Hemos desglosado el nuestro WebRTC en Jetpack Compose en una serie de varias partes, cada una de las cuales cubre los conceptos básicos de WebRTC y el uso de WebRTC en su proyecto de Android con Jetpack Compose, y cree su aplicación de video de Android con WebRTC. En esta parte, aprenderá a generar comunicaciones de video en tiempo real mediante WebRTC en el proyecto Jetpack Compose. ¡Empecemos! Desde que Google anunció Jetpack Compose 1.0 como estable, el ecosistema de Jetpack Compose ha crecido y muchas empresas han comenzado a adaptarlo en sus proyectos de nivel de producción. Sin embargo, WebRTC no es compatible con Jetpack Compose directamente en el lado de la interfaz de usuario, como B. Procesador de transmisión de video, por lo que debemos averiguar cómo se procesan las pistas de video WebRTC en los proyectos de Jetpack Compose. Primero, examinemos cómo se procesan las transmisiones de video en Android utilizando los componentes tradicionales de la interfaz de usuario de Android. Debe usar un componente de interfaz de usuario específico para representar el contenido de la transmisión, por ejemplo, una escena OpenGL de un video, una vista previa de la cámara, una red en tiempo real o algo así. Por lo general, puede usar SurfaceViewRenderer para mostrar secuencias de video en tiempo real en un diseño que tiene estructuras planas o simples. Sin embargo, si desea implementar diseños complicados como una pista de video superpuesta a otra, debe encontrar diferentes formas. Supongamos que debe implementar una pantalla de videollamada compleja, p. B. Un diseño de videollamada debe superponerse a otro diseño de videollamada como la siguiente imagen:En este caso, SurfaceViewRenderer no funciona como se esperaba. Hay dos razones por las que SurfaceViewRenderer no funciona correctamente:

1. SurfaceViewRenderer está incrustado en una jerarquía de vistas: SurfaceView vive en su capa, lo que significa que esencialmente hace un agujero en su ventana para mostrar el contenido directamente en la pantalla. Además, la superficie está ordenada en Z. Por lo tanto, si superpone varias SurfaceView, pueden destruirse entre sí y es posible que el orden z no funcione como se esperaba.
2. Problema del ciclo de vida de SurfaceViewRenderer: SurfaceViewRenderer extiende SurfaceView, y esto significa que si un SurfaceView se vuelve invisible, la superficie subyacente se destruirá. Dependiendo de sus casos de uso, se enfrentará a un SurfaceView que se vuelve blanco o negro porque su superficie ha sido destruida.

Así que tenemos que encontrar una forma alternativa: TextureView. A diferencia de SurfaceView, TextureView no crea una ventana separada sino que se comporta como una vista normal. También permite la translucidez, la rotación arbitraria y el recorte complejo. Hay otra razón para usar TextureView, que es que hasta la API 24, la representación de SurfaceView no se sincronizaba correctamente con las animaciones de vista. Entonces, si necesita implementar animaciones complejas, como diseño de video o desplazamiento, debe usar TextureView.

nota: si desea obtener más información sobre la diferencia entre SurfaceView y TextureView, consulte Android HDR | una migración de TextureView a SurfaceView (Parte 1) – Cómo migrar.

El WebRTC en el proyecto Jetpack Compose implementó una vista personalizada llamada VideoTextureViewRendererque extiende TextureView, VideoSink y SurfaceTextureListener como el siguiente código:

nota: si usa el paquete WebRTC para componentes de interfaz de usuario de la biblioteca de código abierto webrtc-android, puede usar el VideoTextureViewRenderer Componente de interfaz de usuario rápido sin implementación adicional.

Ahora examinemos cómo se procesan las transmisiones de video en Jetpack Compose. Como se mencionó, WebRTC no es compatible directamente con Jetpack Compose en el lado de la interfaz de usuario, y Jetpack Compose no tiene componentes de interfaz de usuario específicos que permitan la interoperabilidad entre múltiples renderizadores: el kit de herramientas de interfaz de usuario y un reproductor de video o un motor de renderizado OpenGL/Vulkan. Por lo tanto, todavía necesitamos usar SurfaceView en Jetpack Compose para renderizar transmisiones de video. Con suerte, Jetpack Compose admitirá las API de interoperabilidad que le permitirán usar la vista tradicional de Android e inyectar una jerarquía de vista de Android en una interfaz de usuario de Compose. AndroidView Composable le permite agregar la vista tradicional de Android en una interfaz de usuario de redacción. Puede crear una nueva función componible llamada renderizador de video que representa secuencias de video usando AndroidView Composable y VideoTextureViewRenderer como viste en el siguiente código: Resolvamos las funciones anteriores una por una:

• renderizador de video: El VideoRenderer componible obtiene un VideoTrack y crea el VideoTextureViewRenderer con el AndroidView componible. Esta función limpia VideoTextureViewRenderer, que expande VideoSink al salir de la composición con AvailableEffect.
• Limpiar pista: Esta función limpia la pista de video dada con un VideoTextureViewRenderer dado; Esto significa que VideoTrack ya no utiliza el VideoSink(VideoTextureViewRenderer) especificado y se elimina por completo.
• configuración de vídeo: Agregue el VideoTextureViewRenderer especificado al Pista de video y listo para renderizar transmisiones de video.

Ahora puede renderizar secuencias de video con renderizador de video componible Vamos a crear una pantalla de videollamada con renderizador de video componible para comunicar una conexión peer-to-peer. Si desea resumir los conceptos principales de WebRTC, lea el artículo ¿Qué es WebRTC? Parte 1. La pantalla de la videollamada consta de las tres partes principales, como se muestra en la siguiente imagen:Por lo tanto, la pantalla de videollamada es responsable de cuatro partes: inicializar WebRtcSessionManager, renderizar una pista de video remota, renderizar una pista de video local y controlar el comportamiento de la videollamada con un controlador de video. ¡Desglosemos cada parte una por una! Primero, debe inicializar WebRtcSessionManager con LaunchedEffect como en el siguiente código: Entonces, WebRtcSessionManager está listo para procesar las pistas de video locales/remotas desde la conexión punto a punto y enviar una respuesta o una oferta según el caso. A continuación, puede renderizar fácilmente la pista de video remota con el VideoRenderer componible como en el siguiente código: Como puede ver en el código anterior, puede observar una pista de video remota desde WebRtcSessionManager y renderizar la pista de video con el VideoRenderer componible. Si crea el proyecto en varios dispositivos, verá las pantallas de llamadas remotas de cada dispositivo en tiempo real. Ahora agreguemos una pista de video local sobre la pista de video remota en Jetpack Compose. Normalmente, las personas deberían estar disponibles para ver pantallas de video simultáneas de una persona que llama y una persona que llama en videollamadas 1:1. Puede implementarlo fácilmente agregando un nuevo VideoRenderer Composable que renderiza una pista de video local. En este artículo, implementará un renderizador de video flotante que puede flotar sobre la pista de video remota, como se muestra en la imagen a continuación:El concepto básico del renderizador de video flotante es que la pista de video local se puede mover sobre la pista de video remota mediante acciones del usuario. Tampoco debe colocarse fuera de la pista de video eliminada y recortarse de la pantalla. Para que podamos implementarlo Representador de video flotante Use pointerInput y detetDragGestures Compose funciones como el siguiente código: A continuación, puede actualizar VideoCallScreen con el FloatingVideoRenderer compositable como el siguiente código: Ha implementado todas las pantallas de representación en tiempo real para videollamadas. Ahora implementemos un controlador de video que controle la configuración de audio y cámara en una videollamada. Un controlador de video es una característica típica que permite a los usuarios controlar configuraciones de videollamadas como: o algo mas. En WebRTC-in-Jetpack-Compose, el controlador de video incluye las siguientes cuatro funciones: voltear una cámara, cambiar una cámara, cambiar un micrófono y dejar una llamada.

reflejando una cámara

Puede cambiar fácilmente una cámara local en la clase WebRtcSessionManagerImpl usando la función switchCamera de Camera2Capturer, como en el siguiente código: La función switchCamera cambia la orientación de una cámara interna: de adelante hacia atrás o al revés, según el estado actual de la cámara Dirección.

Cambiar una cámara

Puede habilitar o deshabilitar fácilmente la cámara con VideoCapturer como el siguiente código: En la clase WebRtcSessionManagerImpl, ya calculó la resolución, por lo que puede usar la función startCapture para comenzar a capturar una cámara especificando la resolución. También puede detener una cámara local simplemente llamando a la función stopCapture.

Cambiar un micrófono

Ya ha utilizado AudioManager para escuchar sonidos de audio en una conexión punto a punto en tiempo real. Por lo tanto, puede alternar fácilmente un micrófono usando la función setMicrophoneMute como el siguiente código:

dejar una llamada

Si alguien quiere dejar una llamada, desconecte el enchufe web del servidor de señalización y deseche todos los recursos, como B. Pistas de video locales/remotas, una pista de audio y cámaras locales, como la función de división a continuación: Finalmente, puede componer todos los métodos de control anteriores en la VideoCallScreen compositable a continuación: Finalmente, después de ejecutar el proyecto en múltiples dispositivos Android, podrá ver el siguiente resultado:Esto termina la segunda parte del WebRTC en Jetpack Compose. Esta parte cubrió cómo se procesan las transmisiones de video WebRTC en Jetpack Compose. Si desea comprender mejor cómo funciona WebRTC y las terminologías relevantes, como peer-to-peer, el servidor de señalización, SDP (Protocolo de descripción de sesión) e ICE (Establecimiento de conectividad interactiva), eche un vistazo a Creación de una aplicación de chat de video: WebRTC en Android (Parte 1) Entrada de blog. También puede encontrar el repositorio de código fuente completo en GitHub. Si quieres estar al día de Stream, síguenos en Twitter @getstream_io o el autor @github_skydoves para obtener más contenido técnico excelente. Y como siempre, ¡diviértete programando! -Jaewoong