React(ing) a WebRTC: Construye Mejores Experiencias de Audio y Video con Daily React

¡Hola! Imagina que estás teniendo una charla video con un buen amigo tuyo dentro de 15 minutos, pero olvidaste enviar un enlace de reunión junto con la invitación del calendario. Lo sé, lo sé. Hay soluciones para esto, pero ¿qué tal si pudieras construir tu propia aplicación de conferencia video en React? Mi nombre es Christian, soy ingeniero de producto en Daily, la compañía WebRTC para desarrolladores. Y uno de mis principales enfoques en trabajar en Daily es hacer que nuestras APIs sean lo más fáciles posible de usar para los desarrolladores de React.

Volviendo al problema de construir-tu-propia-aplicación-de-llamada-video-en-React. La web tiene cómo hacerlo, tutoriales y códigos en varios formatos pero prácticamente todos los que he visto sufren de los mismos problemas. Requieren una cantidad sólida de código, tanto en el lado del cliente como del servidor, generalmente no manejan más de dos o tres personas en una llamada, y requieren configurar una infraestructura mucho más allá de un CDN que aloja tu paquete de front-end. Entonces, ¿por qué es WebRTC, la base de todo esto, tan difícil? WebRTC en sí es un proyecto open-source y proporciona APIs estándar para enviar audio, video, y data a través de la web en tiempo real. En teoría, esto significa que puedes usar las APIs de WebRTC en diferentes navegadores y sistemas operativos y deberías estar bien. El problema es que cada proveedor de navegador mantiene su propia implementación de WebRTC y ¿sabes lo que eso significa? Allí tenemos un dragón. Usualmente, una aplicación WebRTC pedirá permiso para la cámara y el micrófono para procesar más las pistas de medios que provienen de tus dispositivos de audio y video. GetUserMedia es probablemente la primera API que ves mencionada en artículos y videos sobre WebRTC. Esta API en sí misma ya tiene diferencias interesantes en su comportamiento en diferentes navegadores. Como ejemplo, Chrome te permite volver a solicitar audio y video tantas veces como quieras incluso cuando se ha bloqueado el acceso. Safari, sin embargo, no permite volver a solicitar, por lo que cuando un usuario bloquea el acceso, tu mejor opción es hacer que actualicen la página.

Ahora, una vez que has logrado obtener un flujo de medios de los dispositivos de los usuarios, para hacer que tu aplicación sea una aplicación de conferencia video, necesitarás enviar el flujo a través de los cables, de lo contrario solo sería una aplicación de espejo. La API de Conexión de Pares RTC es la herramienta de elección aquí, pero en realidad conseguir esa conexión requiere mucha información. ¿A quién te estás conectando? ¿Qué códecs se están utilizando para audio y video? ¿Cuál es el ancho de banda disponible? Configurar esta conexión también incluye una fase de negociación donde un cliente, el primero en conectarse, envía una oferta y el cliente remoto responde con una respuesta. Además, si no tienes un servidor de señalización configurado para identificar a los clientes tú mismo probablemente tendrás que recurrir a un servidor de stun o tono en internet para hacer el proceso de identificación del cliente por ti. Finalmente, cuando la conexión se negocia y se configura, puedes agregar las pistas de audio y video del usuario a la conexión y si todo salió bien, los bytes de medios deberían estar fluyendo de un cliente a otro. Luego finalmente tendrás que acceder a las pistas de medios remotas del objeto de Conexión Pura RTC adjuntar las pistas a los elementos de medios en el navegador y luego los usuarios de tu aplicación deberían verse en la pantalla.

Hasta ahora no hemos pensado en ningún código React. Pero somos desarrolladores de React, ¿verdad? Entonces, mientras todas las cosas que acabo de mencionar parecen complejas y abrumadoras, y sí, lo son, realmente no tienes que preocuparte por ellas. Aquí es donde quiero presentarte Daily React. Es una biblioteca React construida sobre el SDK del cliente de Daily y proporciona todas las cosas que necesitas para construir una aplicación React con capacidades WebRTC. Volviendo al problema original, ¿cómo puedes construir una aplicación de videoconferencia en React? Aquí está cómo. La aplicación solo tiene unos pocos componentes, App, Call, Prejoin, CallControls y Tile. Todos tienen alrededor de 30 líneas de código, incluyendo importaciones. Antes de poder utilizar cualquiera de los hooks y componentes de Daily React, envolverás con DailyProvider. Acepta un montón de opciones de configuración para Call, pero para este caso, URL y Username son suficientes.

Los usuarios querrán verse y escucharse entre sí, por lo que es crucial renderizar el componente DailyAudio. Configura los elementos audio y automáticamente adjunta las pistas de audio correctas en el momento adecuado. Al agregar una pequeña pantalla de Prejoin, permitirás a tus usuarios establecer un nombre de usuario personalizado y unirse a la llamada cuando estén listos.

Unirse a la llamada se hace a través de daily.join. El SDK del Cliente de Daily es un marco de API basado en eventos, por lo que cada vez que algo sucede en una llamada, se emite un evento con información detallada. Después de llamar a daily.join, debería haber un evento de unión a la reunión que indique que se está configurando la maquinaria de la llamada y se están iniciando las conexiones. Eso te permite cambiar la vista al componente de la llamada. Este renderiza a todos los participantes en la llamada en una pequeña cuadrícula y los controles de la llamada. UseParticipantIds devuelve todos los participantes en la llamada como un array de IDs de cadena. Estos IDs son únicos para cada participante y una sesión de reunión dada y son asignados automáticamente por daily. Y mapear a través de este array te permite renderizar los mosaicos reales.

Querrás saber cuándo termina la reunión para volver a la pantalla de pre-unión. Escuchar el evento de salida de la reunión es la forma de hacerlo aquí. Los usuarios deberían poder alternar su cámara y micrófono. Eso es como el mínimo de controles que querrás tener en una llamada de video. También un botón de salida es esencial para una aplicación como esta. Para alternar la cámara necesitarás saber sobre el estado de la pista de la cámara. Como solo puedes apagar algo cuando sabes que está encendido, ¿verdad? UseVideoTrack permite leer el estado local de la cámara. El estado de la cámara tiene una propiedad isOff muy útil que permite renderizar un texto significativo en el botón de alternar la cámara. Y al hacer clic en el botón, encenderás o apagarás la cámara llamando a setLocalVideo.

Así que ahora que el botón de la cámara es funcional, harás lo mismo para el botón del micrófono. Pero esta vez con la ayuda de useAudioTrack y setLocalAudio. Al salir de la llamada, todo lo que tienes que hacer es llamar a dailyLeave, lo que desconectará al usuario de la llamada. Por último, asegúrate de que tus usuarios pueden verse y distinguirse entre sí en la cuadrícula de video. Así que aquí está el componente de mosaico. Lo más importante es que querrás renderizar el componente dailyVideo que configurará el elemento video con la pista de video apropiada. La propiedad autoMirror es bastante genial. Refleja el video para una pista de video local del usuario. Así que cuando miras tu propio video, actuará como un espejo. Para renderizar el nombre de un usuario en su mosaico, puedes usar la propiedad useParticipant.

Es un hook altamente optimizado para volver a renderizar solo cuando las propiedades solicitadas cambian. También es útil ver cuando el micrófono de un usuario está silenciado. Aprovecha useAudioTrack y la propiedad isOff. Solo un pequeño detalle al final.

Quien esté hablando actualmente debería ser resaltado un poco en la interfaz de usuario. useActiveSpeakerID ayuda con eso y devuelve la ID del orador actual para que puedas renderizar algo de CSS o estilos cuando coincida con la ID de sesión del mosaico actual.

Así que esto es todo lo que necesitas para una aplicación de video conferencia muy sencilla. Veamos si realmente funciona. Hola Ninku. Hola Christian. ¿Cómo está? Todo bien. ¿Qué estás haciendo? Actualmente estoy mostrando una demo en el React Day Berlin. Y tú acabas de formar parte de eso. Wow, eso es genial. Pero tengo que irme. ¿Hablamos luego? Vale. Adiós. Adiós.

Y así es como puedes construir tu propia interfaz de llamada de video con Daily React. Y realmente es solo el principio. Hay mucho más que puedes añadir a esta pequeña interfaz de llamada como selectores de dispositivos, compartir pantalla o chat de texto. Puedes encontrar el código en el github de daily y toda la documentation en docs.daily.co. Y si alguna vez necesitas ayuda o consejo, por favor contacta en community.daily.co. Fue genial compartir esto contigo. Disfruta el resto de la masterclass. Nos vemos.