How do I embed video calls in Tadabase?
In this episode, we'll learn how to embed a video call platform inside your Tadabase application using:
Features Discussed:
Transcript Summary
Introduction
Hey everybody, welcome back to another episode of Build It with Tadabase. In this week's episode, we're talking about embedding video calls inside your Tadabase applications. This build will function as a module that you can integrate into your existing application. If you want to offer video calls for you and your teammates directly inside your app, this tutorial is for you.
We'll be using basic Tadabase techniques like connection fields, custom components, and leveraging a service called Whereby for the embedded video calls.
Overview of the System
The system we're building is a module for embedding video calls within an application. This approach uses services like Whereby for embedding, allowing you to host video calls directly in your Tadabase app. The service was suggested by a user, and we'll walk you through how to embed it into your app.
You could use other platforms like Zoom if they allow embedding, but today we're focused on Whereby.
Finished Module Preview
Let’s first look at the finished module before we dive into building it. On this page, we can see a list of meeting invitations. Users can join meetings hosted by them or by others. By clicking “Join as Host,” a video call is embedded directly into the app, allowing you to participate in a meeting without leaving your Tadabase environment.
Setting Up the Data Tables
Step 1: Creating the Rooms and Meetings Tables
We need to create two tables:
- Rooms Table: This table will track rooms that are created in Whereby.
- Meetings Table: This table will be associated with a room and track the details of individual meetings.
Step 2: Adding Fields to the Rooms Table
The Rooms table will store data like:
- Room name
- Host link
- Participant link
- End date
- Room size (e.g., 2-4 or 2-200 participants)
- Whether the room is locked
Step 3: Adding Fields to the Meetings Table
The Meetings table will store:
- Meeting name
- Date and time
- Hosted by (linked to users)
- Host and participant links (pulled from the room table)
Step 4: Creating Meeting Invitations Table
Next, we create a table for meeting invitations. Each invitation will be linked to:
- A user
- A meeting
- A room
- Whether the user is attending (yes, no, maybe)
Building the Pages
We’ll create three essential pages:
- Rooms Page: Where admins can create new rooms.
- Meetings Page: A page to create meetings associated with rooms.
- Meeting Invitations Page: Where users can send invitations to meetings and track responses.
Detail Pages
We’ll set up two detailed pages:
- Join as Host: Embeds the host link for the meeting.
- Join as Participant: Embeds the participant link.
Adding the Custom Component
We’ll be embedding Whereby rooms using a custom component. You can embed the video call using Whereby’s embed element, which loads the room based on the host or participant link.
In the custom component, we'll reference the Whereby URL and dynamically pull in the host or participant link based on the user's role in the meeting.
Final Touches: Adding Filters and Notifications
To ensure that users only see meetings they are part of, we’ll add filter tabs:
- Hosted by Me: Shows meetings hosted by the logged-in user.
- Hosted by Others: Shows meetings hosted by others.
Lastly, we’ll add a notification system to send an email when someone is invited to a meeting.
Conclusion
That's it for this episode of Build It with Tadabase! We've built a module that integrates Whereby video calls into your Tadabase application. You can expand this further by adding real-time notifications or integrating other video services. Let me know how you plan to use this in your applications, and feel free to reach out with any questions.