Build Real-Time Video Apps in Minutes with Cloudflare RealtimeKit

[music] Did you know you can build a fullfeatured realtime video app just like this [music] in minutes? All of this runs on Cloudflare's realtime kits now in open beta. [music] In this video, I'll show you what Realtime Kit is, how it works, and how you can use it to build your own realtime video application without touching any of the WebRTC complexity. If you've ever tried building real-time video or audio from scratch, you know it's not fun. You probably started with a simple idea. Say for example, let's add a video chat feature into your application and suddenly you're kneedeep in WebRTC setup. Web RTCC for those that are not familiar is an open standard that lets browsers and devices share audio, video and data directly between each other without sending everything through a central server. Now this sounds simple enough but in practice it's not that simple. You are juggling signaling not traversal with stone and turn servers and managing connections between multiple peers. The diagram on the screen shows how traffic passes through tone and stone layers and an SFU for scaling plus extra part for media like transcription, recording, chats. All these things you have to build and maintain yourself. Now add browser quirks, permissions and scaling challenges and you are maintaining a full communication stack instead of building your product. Now that's where real time kits comes in. Realtime kit is a collection of web and mobile SDKs that provides a developer friendly abstraction layer over web RTC. It handles all the low-level complexities from media permissions and not traverse out connection management so that you can focus on building your applications features and it includes two parts. First the core SDK. This is what handles the sessions the media and signaling and then you have also the UI kit. This comes with pre-built components like the video grids and Mac controls that you can use within your application. With real time kit, you can start from a ready to use setup with some of the templates that we have available or you can go bare bones for full control. Either way, the infrastructure scaling and webtc complexities are already handled for you. Now, let's jump into a demo. I built a virtual classroom app I called Lenley. And here's how it works. It's an application that lets you create a virtual classroom where you can host classes, study groups or one-on- ones. And it has two core features. You are able to create a new meeting or you can join an existing meeting with the meeting ID if you have one. So to create a new meeting, you give your meeting a name. Let's call this real time 101. And this is the name of the meeting. You can also add your name. So, whoever is joining, you add your name. I'm going to add my name in there. And then we have this advanced tab which shows a list of presets that you can select depending on the kind of call and the role you want to assign to the user during the call. So for example, we have group call guests, group call hosts, and group call participants. If we're doing a live stream, we have the same. And if we're doing a webinar, we have the same. So these are roles you want to assign to users joining the call simply because they have different privileges as a host. You can, for example, um start a recording or you can um add people or remove people from the call or mute people. As a participant, you have limited privileges as compared to a host. Whenever I create a new meeting, I always want my the person creating the meeting to be the host. So, I'm going to set that and then start this meeting. When you start the meeting, you see an initial page where you can select, for example, your audio device, your where the camera that you're using, and also the um where the volume of the call is coming from. So, the mic and the video. We also have this effects tab here where you can for example blur your background if you want to or add a virtual background if that's what you want before then joining the call. And then when you join the call you see similar features that you are familiar with already with applications like this one. For example, you can share a screen can turn on your mic, turn off your mic. We also have this cool troubleshooting panel for just making sure that everything works well before you actually share or start the meeting. And [snorts] we also have the effects tab here as well. On this side, we have the chats tab, the pools if you're going to be running pools for your classroom. You can see here all the participants and those requesting to join and the plugins. The plugins is actually a very useful feature in this um scenario. So we're hosting classes and we want to share documents, we can use doc shareer. We want to illustrate, we can use escali drop plugin or we want to use a whiteboard, we can use that as well. So this is my demo in a nutshell. Now let's look at the code. So my application is composed of two parts. The back end and the front end. The back end is wired up with a Cloudflare worker that has three endpoints. One is meetings, tokens, and presets. So these are what is calling the real time kit API in my worker. I decided to use the worker, but you can also do this directly from the dashboard or you can use the API using coil. But I feel like this is more intuitive and I can programmatically do it directly from the UI without um doing any API calls because I have that wired up, right? So for my meetings endpoint, I have a few parameters that I need in order for this to work, which is the account ID, the application ID that I have created because for every new roadtime kit application, you need to create an app and you need the app ID and then my CF API token. And after I have all of those, I send a request to the API. So that whenever I click create meeting in the UI, this is what triggers and a meeting is then created. Next, we have what issues the token. So for every participant that joins a meeting, they need to have a token assigned to the user. And how do you do this? You can use the um slash meetings slash meeting ID participants. This API endpoint is what it used to create a token. And the way that I've wired up my application is whenever a user tries to join a meeting or tries to create a meeting, a token is automatically created for that user and when they need to join the meeting, they still need to use the token every single time they join because this is what verifies the user before they join the meeting. And what I need cred what are the credentials that is needed? So we need their name, we need the presets um that the user or the role that the user is assigned to. So whether they are the host or whether they are the participants and then the their user ID and then the last endpoint is called list presets and I like I showed you in the UI I have a drop-own list of all the presets where you can select. So I'm I'm calling the API endpoint to list out all the presets that I have in my realtime kit app and then show it in the UI so that the user can select one before creating a meeting. So that's it for the back end. For the front end, I have two main components um pages that I created. First is the home. This is what you see when you first um open up the application. And this is where I'm calling all the different endpoints. This is where I'm loading the presets. This is where I am using the API meetings. And this is where I'm also using the tokens. The core part of the application on the front end is in the meeting. CSS file. And here is where I am using the real time kits UI. [clears throat] um kit to actually build out this application because I'm not doing everything by myself. And for this I have installed two libraries, the Cloudflare Realtime Kit React UI library and the actual realtime kits react library as well because I need it to set up my application. And here I'm calling this component realtime kit and passing my meeting and also the custom configurations that I have added like the blur background that I showed earlier. Like I said for every meeting or for every participant joining a meeting the user joining whether they are the host or whether they are the participant they need to have a token and that's one of the things that I check for before joining the meeting. Right. And here I have written out a custom toggle control bar that shows you the the options to blur your background or the options to add a virtual background. Here I've passed in different parameters like the blush strength. This goes from 0 to 100. So you can always update it. And I'm also passing the images that you see in the in the tab for changing your background. Right. So that's pretty much it. You can always customize this however you want to fit your UI. You can even go as far as changing the theme on the real time kit GitHub repo which I'll link in this video. We have different templates set up for you. So if you don't want to use the default which I am currently using here, you can always use one of those ones or you can customize it to fit your brand or to fit your own needs. Now, real time kits gives you real time analytics as well for latency to see jitter, packet loss and session health. And this is accessible via the dashboard or through the analytics API. Here on my dashboard for my app, which I called virtual classroom, I can see the usage for the last 30 days. I've used 46 minutes in total. I've had over 14 sessions. I haven't recorded anything or transcribed anything but you can see all of this here. Also on the dashboard like I mentioned you can create your meetings here. You see all the meetings that I've created. You can see the sessions. So for every session right now we have an ongoing session which is the call that I joined and it's live. We see that it's live. If the call was recorded I would see the recording after the call here that I can then go ahead and download. And then we also see a list of presets like I showed you. So everything you see through the dashboard you can also do with an API. Right? So realtime kits can power different use cases from virtual learning like you've seen in my demo to voice AI and realtime agents interactive games and robotics webinar and live shopping. Realtime kit is perfect if you're looking for something with speed and something that's ready to use. But in case you're looking for more customizable at a low level, we also have infra primitives for SFU and tone which is part of the same realtime suits that we offer at Cloudflare. So that's real time kits. It's your tool kit for building realtime video and voice applications on Cloudflare. It's fast, developer friendly, and globally distributed. It's now in open beta, so that means you can try it out today. Feel free to check out the description where I'll be linking the docs as well as the sample demo that I showed in this video. Thank you so much for watching and I'll see you in the next video.