Creating a Video Conferencing App with Whereby API and Bubble
Welcome back to part three of our tutorial series where we're looking at combining the Whereby API with Bubble to build a no code video conferencing app. In this video, I'm going to demonstrate what we do from this page where we've got a list of the meetings we've created. We create a meeting in Bubble and we create a meeting in Whereby, and how do we actually now link through to the ability for a user to join a call? Well, let's dive right into that.
Learning Bubble.io
But before I do that, if you're learning Bubble and you want to see more videos just like this one, head to our website planetnocode.com. There's a link down in the description and it's a fantastic resource for learning Bubble. I personally have recorded hundreds of Bubble tutorial videos just like this one.
Setting Up the Meeting Page
So let's jump right in here. We've got our repeating group and we want to link off to a page where we show a single instance of a meeting. So we can do that and I'll do that by creating a page and saying "meeting". I'm going to just clone the index page. Let's delete the repeating group and that button. So that I can tell a difference when I'm debugging, I'm just going to write in here "live meeting". Make that a little bit wider, even wider than that. Let's just say 50%.
Configuring the Meeting Page
This page is going to be a template for all of our meetings. When we link through from the repeating group, we're going to arrive on this page and we need Bubble to send through meeting details or an entry from the database. Bubble is an amazing no-code web app development platform. We don't need to worry about unique IDs; Bubble takes care of it. We can do that by going on to the page and saying the type of content and setting it to "meeting".
Setting Up Navigation
Now if I go back to my index page and I go on join and add a workflow and then the go-to page workflow which is in navigation, I can set a destination of meeting. But you notice now I have an issue, and that's because I can only now go to the meeting page if I send a single meeting from my database. Well, which meeting do I want to send? It's the meeting that's in the current cell of the repeating group of the button that I just clicked.
Displaying Meeting Data
So we say current cell's meeting. That means that we can go into meeting and I can update this and pull in data from the page. So I can say current page's meeting Room name. Now the room name is randomly generated, I think, so it's not going to mean much. In fact, let's make this 100% width now.
Testing the Navigation
Let's do a quick demo. So I clicked on preview on my meeting page and I get lorem ipsum. Now that's because Bubble is showing me this template of a page for meeting, but I've not actually put a meeting in the data. So what I really need to do is go back here, index, preview my index page. Now I can click join on this meeting, this event, this room that I created previously, and you can see I go through and I get to the page all about that particular meeting.
Adding Video Conferencing Features
We're missing a key bit here, which is where we're not actually showing any chat video conferencing features. So let's dive back into the API documentation and we can see that they provide a low-code option which uses an iframe. I'm going to copy the iframe code, go back into my editor, and go on to our meeting page.
Implementing the Whereby Iframe
I'm gonna add in an HTML block and set its width to 100%. I'm going to leave... we'll see how it responds to height. I'm not sure to be honest. Let's paste in the iframe code and we want to insert some dynamic data in here because we need to show the URL that was returned when we created the room through the Whereby Embedded API. So let's go current and current page's meeting URL.
Adjusting the Iframe Size
Now remember if I click preview it's not going to work because it's going to have Lorem Ipsum which is dummy content. So I need to always access my page through my repeating group now, basically. So let's go back to index to get there just as I was saying. And so now if I click join, we have got a slightly odd thing going on here. But we can see that something has worked because it has embedded something from Whereby. But it's way too small. So let's go back to meeting and I'm wondering what we need to do here. Maybe we'll set the min height to say 500. Let's try that.
Styling the Iframe
Otherwise, I'm gonna add a bit of extra code in here. So we can say iframe. We'll put a bit of CSS in here. So we'll basically inline style the iframe. So let's say width 100% so I make a difference that looks good. And then I'm also going to put a height value in there. Now we are using an iframe technique here, which iframes are not an incredibly good way of embedding content from another site. Whereby does have a script-based way of doing it, which we'll probably record a video on, but I'm demonstrating the iframe method of doing this because it's really quick and you get results very quickly from it.
Final Adjustments and Testing
So let's now say the height is 500 pixels and just make sure that the height of our element is 500 pixels. Let's make that slightly bigger to account for any padding it adds in. Let's go back here and refresh. Okay, that's looking much better. So if I put in my name and then it's going to... any browser-based video conferencing, I've got to approve it through my browser. Okay, cool. And there we go. So I'm now in a meeting and if I was to share this page with any other users in my app, then they would also be joining this same meeting.
Conclusion and Next Steps
So there we go. That's how you can add a video conferencing widget or video conferencing element into your Bubble app using the Whereby embedded API and iframe. In the next video, I'm going to cover things like privacy rules and how to register and log in your users. And I would just say that is essential viewing. Because right now, you don't want strangers hopping into meetings or email addresses of your users being leaked out. Privacy rules are an essential part of security when building a Bubble app. So see you in the next video.