React(ing) to WebRTC: Build Better Audio and Video Experiences with Daily React

Rate this content
Bookmark
Slides

What is WebRTC (Web Real-Time Communication), its main challenges, and how does the combination of React + Daily solve for them? We'll take a deep dive into specifics like React audio and video media elements and Daily React components and hooks. You'll even walk (or code?) out knowing how to build a video grid in just two minutes. 

Christian Stuff
Christian Stuff
10 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Imagine building your own video conferencing app in React using Daily React, a React library built on Daily's client SDK. Rendering components and user controls in the app is crucial, including joining the call, displaying participants, toggling camera and microphone, and leaving the call. Optimize hooks and add features like device pickers, screen sharing, and text chat. Find the code on daily's GitHub and documentation at docs.daily.co.

Available in Español

1. Building a Video Conferencing App in React

Short description:

Imagine building your own video conferencing app in React. WebRTC, the foundation for real-time communication, can be challenging due to browser-specific implementations and differences in behavior. However, with Daily React, a React library built on Daily's client SDK, you can simplify the process. The library provides components like App, Call, Prejoin, CallControls, and Tile, with only around 30 lines of code each. Just wrap your code with DailyProvider and specify the URL and Username, and you're good to go.

Hey there! Imagine you're having a video chat with a good friend of yours 15 minutes from now, but you forgot to send a meeting link along with the calendar invite. I know, I know. There are solutions to this, but what if you could build your very own video conferencing app in React? My name is Christian, I'm a product engineer at Daily, the WebRTC company for developers. And one of my main focuses in working at Daily is to make our APIs as easy as possible to use for React developers.

Coming back to the build-your-own-video-call-app-in-React problem. The web has how-tos, tutorials, and code-alongs in several formats but pretty much all that I've looked at suffer from the same problems. They require a solid amount of code, both on the client and server side, they usually don't handle more than two or three people on a call, and they require to set up infrastructure far beyond a CDN hosting your front-end bundle. So why is WebRTC, the foundation for all of these, so difficult? WebRTC in itself is an open-source project and provides standard APIs for sending audio, video, and data across the web in real-time. In theory, this means that you can use WebRTC APIs on different browsers and operating systems and you should be good. The issue is that each browser vendor maintains their very own implementation of WebRTC and you know what that means? There we dragon. Usually, a WebRTC app will ask for camera and microphone permission in order to further process the media tracks coming from your audio and video devices. GetUserMedia is probably the first API you see mentioned in articles and videos about WebRTC. This API in itself has already interesting differences in its behavior across browsers. As an example, Chrome allows you to re-prompt for audio and video as many times as you like even when access has been blocked. Safari, however, doesn't allow re-prompting so when a user blocks access your best bet is to have them refresh the page.

Now once you've managed to get a media stream from the users' devices, in order to make your app a video conferencing app you'll need to send the stream across the wires otherwise it would just be a mirror app. The RTC Peer Connection API is the tool of choice here but actually getting that connection set up requires a bunch of information. Who are you connecting to? Which codecs are being used for audio and video? What is the available bandwidth? Setting this connection up also includes a negotiation phase where one client, the first one to connect, sends an offer and the remote client answers with an answer. Furthermore, if you don't have a signaling server setup to identify the clients yourself you likely have to reach out to a stun or tone server on the internet to do the client identification process for you. Eventually, when the connection is negotiated and set up you can add the user's audio and video tracks to the connection and if all went well the media bytes should be flowing from one client to the other. Then finally you'll have to access the remote media tracks from the RTC Pure Connection object, attach the tracks to the media elements in the browser and then the users of your app should see each other on screen.

Up until now we haven't thought about any React code. But we are React developers, right? So while all of the things I just mentioned seem complex and overwhelming, and yes, they are, you don't really have to worry about them. This is where I want to introduce Daily React to you. It's a React library built on top of Daily's client SDK and it provides all the things you need to build a React app with WebRTC capabilities. Coming back to the original problem, how can you build a video conferencing app in React? Here's how. The app only has a few components, App, Call, Prejoin, CallControls, and Tile. They all have around 30 lines of code, including imports. Before you are able to utilize any of Daily React's hooks and components, you'll wrap with DailyProvider. It accepts a bunch of configuration options for Call, but for this case, URL and Username are sufficient.

2. Rendering Components and User Controls

Short description:

Users will want to see and hear each other, so rendering the DailyAudio component is crucial. Joining the call is done through daily.join. After calling daily.join, there should be a joining meeting event coming through to indicate that the call machinery is being set up and connections are initiated. UseParticipantIds returns all participants in the call as an array of string IDs. You'll want to know when the meeting ends to switch back to the pre-join screen. Users should be able to toggle their cam and mic. UseVideoTrack allows to read the local cam state. And when clicking the button you'll switch the cam on or off by calling setLocalVideo. When leaving the call all you have to do is call dailyLeave which will disconnect the user from the call. Finally, make sure that your users can see and distinguish each other in the video grid. To render a user's name on their tile, you can use useParticipant property.

Users will want to see and hear each other, so rendering the DailyAudio component is crucial. It sets up audio elements and automatically attaches the right audio tracks at the right time. In adding a little Prejoin screen, you'll allow your users to set a custom username and join the call when ready.

Joining the call is done through daily.join. Daily's Client SDK is an event-driven API framework, so anytime something happens in a call, there's an event emitted with detailed information. After calling daily.join, there should be a joining meeting event coming through to indicate that the call machinery is being set up and connections are initiated. That allows you to switch the view to the call component. This one renders all participants in the call in a little grid and the call controls. UseParticipantIds returns all participants in the call as an array of string IDs. These IDs are unique for each participant and a given meeting session and automatically assigned by daily. And mapping through this array allows you to render the actual tiles.

You'll want to know when the meeting ends to switch back to the pre-join screen. Listening for the left meeting event is the way to go here. Users should be able to toggle their cam and mic. That's like the bare minimum of controls you want to have in a video call. Also a leave button is table stakes for an app like this. For toggling the camera you'll need to know about the camera's track state. Like you can only turn something off when you know it's on, right? UseVideoTrack allows to read the local cam state. The cam state has a handy isOff property that allows to render meaningful text in the toggle cam button. And when clicking the button you'll switch the cam on or off by calling setLocalVideo.

So now that the cam button is functional you'll do the same thing for the mic button. But this time with the help of useAudioTrack and setLocalAudio. When leaving the call all you have to do is call dailyLeave which will disconnect the user from the call. Finally, make sure that your users can see and distinguish each other in the video grid. So here's the tile component. Most importantly you'll want to render the dailyVideo component which will setup the video element with the appropriate video track. The autoMirror prop is pretty cool. It mirrors the video for a local user facing video track. So when you look at your own video it will act like a mirror. To render a user's name on their tile, you can use useParticipant property.

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

A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
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.

Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
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.
Monolith to Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
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.
Power Fixing React Performance Woes
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Top Content
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! ⚡️
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
In this talk, we'll build our own Jarvis using Web APIs and langchain. There will be live coding.
Video Editing in the Browser
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

Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
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.
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
Wess Cope
Wess Cope
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!
Hard GraphQL Problems at Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
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.
0 To Auth In An Hour For Your JavaScript App
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Asaf Shen
Asaf Shen
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.
Build a Collaborative Notion-Like Product in 2H
JSNation 2023JSNation 2023
87 min
Build a Collaborative Notion-Like Product in 2H
WorkshopFree
Witek Socha
Witek Socha
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.