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.

10 min
12 Dec, 2023

AI Generated Video Summary

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.

3. Optimizando Hooks y Añadiendo Características

Short description:

Utiliza el hook altamente optimizado para volver a renderizar propiedades solo cuando cambien. Monitorea el estado de silencio del micrófono con useAudioTrack y isOff. Destaca al orador actual en la interfaz de usuario utilizando useActiveSpeakerID. Esto es todo lo que necesitas para una sencilla aplicación de videoconferencia. Explora características adicionales 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. Para ayuda y consejos, contacta en community.daily.co. ¡Disfruta de la masterclass!

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.

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

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️
React Summit 2023React Summit 2023
24 min
Video Editing in the Browser
Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial!

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
JSNation 2023JSNation 2023
87 min
Build a Collaborative Notion-Like Product in 2H
WorkshopFree
You have been tasked with creating a collaborative text editing feature within your company’s product. Something along the lines of Notion or Google Docs.
CK 5 is a feature-rich framework and ecosystem of ready-to-use features targeting a wide range of use cases. It offers a cloud infrastructure to support the real-time collaboration system needs. During this workshop, you will learn how to set up and integrate CK 5. We will go over the very basics of embedding the editor on a page, through configuration, to enabling real-time collaboration features. Key learnings: How to embed, set up, and configure CK 5 to best fit a document editing system supporting real-time collaboration.
Table of contents:- Introduction to the CK 5 ecosystem.- Introduction to a “Notion-like” project template.- Embedding CK 5 on a page.- Basic CK 5 configuration.- Tuning up CK 5 for a specific use case.- Enabling real-time editing features.