Easiest Way to Add Daily.co Video Call Support to Your React App
Daily.co provides an awesome developer experience for adding their video conferencing API to your web app. They offer also “Prebuilt UI” which is usually ticks all the boxes needed for great video conferencing UI.
Daily Prebuilt-UI plugin for React Studio
We wrapped Daily’s Prebuilt UI snippet into React Studio plugin. You may download the plugin from React Studio’s plugin store. The plugin is dead simple to use, you simply add and align the plugin element on your React Studio project’s screen or component and link the “url” to your Room url prop. You can also use static setting for url in case the room always stays the same.
Dynamic room url
Fixed room url
I assume you know all the basics of using React Studio and connecting your UI to Xano backend. If you are a beginner in Xano and React Studio checkout these videos.
Teacher admin; My Yoga Studio demo app
Now we know how to configure the UI for the video conferencing app but how do we create new Daily video call rooms dynamically from the app?
The answer is simple: we create a custom API endpoint in Xano and configure that endpoint to call the Daily’s API and “ask” for a new video conferencing room.
Here’s an example of my custom endpoint in Xano’s no-code backend builder. It may look a bit intimidating at first but it is quite straightforward. I’ll break down the steps next:
- I’ve created a custom function called “Func_1” which simply checks that the user role is either teacher or admin.
2. Create a variable which takes the current timestamp. This variable will be later used when we call Daily’s API to create a video conferencing room which automatically deletes in one hour from now.
3. Add on hour to timestamp (3600) seconds.
4. I created a JSON variable based on the example API response I took from Daily’s admin. This contains the stuff that the Daily’s API will return when we call it. Basically the only thing we need is the room URL but I’ll get back to that in the next phase.
5. In this step we make the actual POST call to Daily’s API. This is propably the most important part. I simply used the Daily’s API documentation for creating a working POST call with our Daily API key and pasted it into Xano’s External API request.
6. We create a variable which picks the room url from the JSON response from the Daily’s create room API. This URL will be the link that we use for connecting the Pre Built UI plugin to actual call.
7. We’ll save the Room URL to classes table and set the class_active value to “true”. This value is then used in the App’s UI to show a “Join” when the class is active and started.
That’s it, now we have an endpoint which we can call from the UI. Next I’ll show how I did that in my MyYogaStudio demo app.
The screenshot of the Yoga app’s Teacher’s admin page is pretty much self explanatory. When teacher clicks the “Activate class” button it simply calls the Endpoint we just created in the Xano. The Endpoint url is set to /openclass/<data slot value> which means that we inject the data slot value (classroom id) in to the endpoint path.
The MyYogaStudio; end user screens
The app itself is really simple; it starts with Login gate and the Main screen is “just” a list of Yoga classes. Each class item in the list contains a component which has two states: “Join class” and “Not started”. In the list we show the state depending on the value in “class_active” column.
When user clicks the Join class button the button interaction is set to save the class url to Data slot and then make a Go to interaction which points to Class screen. Class screen is simply a screen with fullscreen Daily plugin. Daily plugin gets the room url from a “Room Url” data slot which we populate with the prop called url in the first interaction.
Here’s a link to the MyYogaClasses demo app. Login with demo account and try clicking some of the classes. When writing this the Daily rooms are active but they might be already expired when you read this post. The main idea can be still seen even if the actual video call is not available anymore.
Let us know if you have any ideas regarding React Studio
Our forum https://discuss.reactstudio.com/ or hello@neonto.com
Download React Studio from www.reactstudio.com
