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

Rate this content
Bookmark
Slides

¿Qué es WebRTC (Comunicación Web en Tiempo Real), cuáles son sus principales desafíos y cómo resuelve la combinación de React + Daily? Profundizaremos en aspectos específicos como los elementos de medios de audio y video de React y los componentes y hooks de Daily React. Incluso saldrás sabiendo cómo construir una cuadrícula de video en solo dos minutos.

Christian Stuff
Christian Stuff
10 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Imagina construir tu propia aplicación de videoconferencia en React utilizando Daily React, una biblioteca de React construida sobre el SDK del cliente de Daily. Es crucial renderizar componentes y controles de usuario en la aplicación, incluyendo unirse a la llamada, mostrar participantes, alternar cámara y micrófono, y abandonar la llamada. Optimiza los hooks y añade características como selectores de dispositivos, compartir pantalla y chat de texto. Encuentra el código en el GitHub de Daily y la documentación en docs.daily.co.

1. Construyendo una Aplicación de Videoconferencia en React

Short description:

Imagina construir tu propia aplicación de videoconferencia en React. WebRTC, la base para la comunicación en tiempo real, puede ser un desafío debido a las implementaciones específicas del navegador y las diferencias en el comportamiento. Sin embargo, con Daily React, una biblioteca de React construida sobre el SDK del cliente de Daily, puedes simplificar el proceso. La biblioteca proporciona componentes como App, Call, Prejoin, CallControls y Tile, con solo alrededor de 30 líneas de código cada uno. Solo envuelve tu código con DailyProvider y especifica la URL y el nombre de usuario, y estás listo para comenzar.

¡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.

2. Renderizando Componentes y Controles de Usuario

Short description:

Los usuarios querrán verse y escucharse entre sí, por lo que es crucial renderizar el componente DailyAudio. Unirse a la llamada se hace a través de daily.join. 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. UseParticipantIds devuelve todos los participantes en la llamada como un array de IDs de cadena. Querrás saber cuándo termina la reunión para volver a la pantalla de pre-unión. Los usuarios deberían poder alternar su cámara y micrófono. UseVideoTrack permite leer el estado local de la cámara. Y al hacer clic en el botón, encenderás o apagarás la cámara llamando a setLocalVideo. 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. Para renderizar el nombre de un usuario en su mosaico, puedes usar la propiedad useParticipant.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Seamos realistas: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica.En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.

Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
En esta charla, construiremos nuestro propio Jarvis utilizando Web APIs y langchain. Habrá codificación en vivo.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
Next.js y otros marcos de trabajo que envuelven a React proporcionan un gran poder en la construcción de aplicaciones más grandes. Pero con gran poder viene una gran responsabilidad de rendimiento - y si no prestas atención, es fácil añadir varios segundos de penalización de carga en todas tus páginas. ¡Vaya! Vamos a recorrer un estudio de caso de cómo unas pocas horas de depuración de rendimiento mejoraron tanto los tiempos de carga como los de análisis para la aplicación Centered en varios cientos por ciento cada uno. Aprenderemos no solo por qué ocurren esos problemas de rendimiento, sino cómo diagnosticarlos y solucionarlos. ¡Viva el rendimiento! ⚡️
De Monolito a Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
De Monolito a Micro-Frontends
Top Content
Muchas empresas en todo el mundo están considerando adoptar Micro-Frontends para mejorar la agilidad empresarial y la escala, sin embargo, hay muchas incógnitas cuando se trata de cómo se ve en la práctica el camino de migración. En esta charla, discutiré los pasos necesarios para migrar con éxito una aplicación React monolítica a una arquitectura de frontend más modular y desacoplada.
Edición de video en el navegador
React Summit 2023React Summit 2023
24 min
Edición de video en el navegador
Top Content
La edición de video es un mercado en auge con influencers siendo toda la rabia con Reels, TikTok, Youtube. ¿Sabías que los navegadores ahora tienen todas las APIs para hacer edición de video en el navegador? En esta charla voy a darte una introducción sobre cómo funciona la codificación de video y cómo hacerla funcionar dentro del navegador. Spoiler, ¡no es trivial!

Workshops on related topic

Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
JSNation 2023JSNation 2023
57 min
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend Node.js + frontend Vanilla JS) para autenticar usuarios con contraseñas de un solo uso (correo electrónico) y OAuth, incluyendo:
- Autenticación de usuario: Gestión de interacciones de usuario, devolución de JWT de sesión / actualización- Gestión y validación de sesiones: Almacenamiento seguro de la sesión para solicitudes posteriores del cliente, validación / actualización de sesiones
Al final del masterclass, también abordaremos otro enfoque para la autenticación de código utilizando Flujos de Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.
Crear un Producto Colaborativo Similar a Notion en 2H
JSNation 2023JSNation 2023
87 min
Crear un Producto Colaborativo Similar a Notion en 2H
WorkshopFree
Witek Socha
Witek Socha
Se te ha asignado la tarea de crear una función de edición de texto colaborativa dentro del producto de tu empresa. Algo similar a Notion o Google Docs.
CK 5 es un marco de trabajo y ecosistema rico en funciones listas para usar que se enfoca en una amplia gama de casos de uso. Ofrece una infraestructura en la nube para satisfacer las necesidades del sistema de colaboración en tiempo real. Durante esta masterclass, aprenderás cómo configurar e integrar CK 5. Repasaremos los conceptos básicos de cómo incrustar el editor en una página, desde la configuración hasta la habilitación de funciones de colaboración en tiempo real. Aprendizajes clave: cómo incrustar, configurar y ajustar CK 5 para que se adapte mejor a un sistema de edición de documentos que admita colaboración en tiempo real.
Tabla de contenidos:- Introducción al ecosistema de CK 5.- Introducción a una plantilla de proyecto similar a `Notion`.- Incrustar CK 5 en una página.- Configuración básica de CK 5.- Ajustar CK 5 para un caso de uso específico.- Habilitar funciones de edición en tiempo real.