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

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.

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.

It's a highly optimised hook to only re-render when the requested properties change. It's also helpful to see when a user's microphone is muted. Take advantage of useAudioTrack and the isOff property. Just a little nicety at the end.

Whoever is currently speaking should be highlighted a little in the UI. useActiveSpeakerID helps with that and returns the current speaker's ID so you can render some CSS or styles when it matches the current tile's session ID.

So this is all you need for a very simple video conferencing app. Let's see if it really works. Hey Ninku. Hey Christian. How is it? It's all good. What are you up to? I am currently showing a demo at React Day Berlin. And you just became part of that. Wow, that is so cool. I do have to run though. So I'll talk to you later? Okay. Bye bye. Bye.

And this is how you can build your own video call UI with Daily React. And it's really just the beginning. There is a lot more that you can add to this little call UI like device pickers, screen sharing or text chat. You can find the code on daily's github and all documentation at docs.daily.co. And if you ever need help or advice, please reach out at community.daily.co. It was great sharing this with you. Enjoy the rest of the conference.