How to Add Professional Video Streaming to Your Bubble App Using Bunny.net

Let's talk about video. If you're storing videos in your Bubble apps database right now, you're probably hemorrhaging money and killing your user experience. My name is Dennis H. Lewis from ratio.dev, and over the past 15 years of building web applications, I've learned one hard truth: video storage will destroy your app if you do it wrong. One thing that is also really becoming true is that almost any app can benefit from incorporating video. If you're a real estate agency, you're gonna want to put videos of the properties on, in your listings. If you're a, you know, if you've got a blog, you're going to want to be able to incorporate video into your blog posts. There's so many different applications of incorporating video content into applications of all sorts of shapes and sizes. But the mechanics of doing it are a bit tricky. And here's the thing that most Bubble developers don't realize. You may be doing it wrong without even knowing it. But I'm going to show you the exact system that we use here at Ratio.to to integrate professional-grade video streaming into Bubble apps using Bunny.net content development, content delivery network. And by the end, you'll have a complete reusable element that you can use. You'll know the database structures. We'll talk about mixing and matching because sometimes your users will want to give you a YouTube link or a Vimeo link. And other times they're going to want to upload the video straight from their computer. And we're going to handle these cases. And hopefully by the end, you'll see that this can really enhance the quality of the user experience for your Bubble applications. So first, let's talk about Bunny.net. So the glo— it's a global edge network. Okay. There's, there are alternatives, but we found that this is the best choice for us and our customers. And I think you're going to be happy with them. They're affordable. They give you just a lot of different features here, not just streaming videos, but images and scripts. And, you know, they've got good support. You can see here, the globe here, all of the, all of the edge points, because that means that their distributing isn't traveling long distances. It's routing from wherever closest to, to the user, which really improves the experience. Yeah. So I feel comfortable today recommending that you use— there's no affiliate links here or anything like that. Just, just a heartfelt appreciation for a service that we use in our day-to-day experience. So look, we've spent literally hundreds of hours figuring this out through trial and error on real client projects. We've used tools that have gone out of business. We have tried to just use YouTube or Vimeo. We have experimented with other providers, but I think that the solution I'm going to give you right now is probably the easiest to implement and one of the best solutions that you can use in your Bubble application. So first, let's talk about the problem with Bubble file storage. You know, a few years ago, we were working with a startup that was building a coaching platform. Think MasterClass meets Zoom, and they had coaches uploading training videos, 20 minutes, 30 minutes, sometimes an hour, high quality, HD quality video. And they came to us because their Bubble bill had gone from $200 a month to $2,400 in 90 days. And their users were complaining about videos taking 2 to 3 minutes just to start playing. And we looked into their app and we found the problem immediately that they were just storing all the video directly in Bubble's file storage. And what nobody tells you about that is that first of all, there's storage costs. So a single 500-megabyte video uploaded by a user that's living in your Bubble database forever, multiply it by 100 users or 1,000 users and storage becomes expensive. And second, not Bubble does automatically cache files. And, uh, but that's not the same thing as a streaming video. Okay. Because, you know, if it's just cached, then the user has to download the entire file before it starts playing the video. Whereas a streaming solution does exactly that. It's like building your own little Netflix. Every time you're watching Jessica Fletcher or in Murder, She Wrote on Amazon Prime or on Netflix, you can tell my age, you're, you're not downloading the entire episode before it starts playing, because, you know, first of all, that would be humongously expensive and the experience for the user would be really lousy. Whereas what you do is you say, start playing this, and the server communicates with the, the, with your TV or the browser intelligently, and it starts sending them the first, you know, first couple minutes, and then it buffers. And I don't want to get into the technical part of that. But it streams the video file to the user as they need the data. So it's not, you know, and God forbid, if you should stop watching, you know, that episode of Columbo, which I will not condone because Columbo is sacred, then, you know, it doesn't keep sending information. So it's a good use of resources. The reason why we choose Bunny is that because it does not just, you know, content delivery, which would be caching, but it does video streaming. And you can pick and choose how many edge points you want to stream from and from what continents. And sure, your costs will vary a little bit, but it's not that big a deal unless you're really building Netflix or something like that. But you will see high-quality video getting to your customer's browser quickly and without, you know, breaking the bank. And that is what led us down this road of experimenting is, was when we started all those, you that time back with that customer and we had to fix their Bubble app for them. And that's why I think this video is going to be useful as well for you. So the first thing I'm going to do is I'm going to jump into the Bubble builder and I'm going to show you the actual API calls that you need to, to, to use to be able to work with Bunny from your Bubble application. We're not going to use any plugins. This is going to be native Bubble development. We're going to really, in this case, you're going to need 3 API calls. One is to create collections. The other is fetch video from a URL. And the last one is going to be get video. Okay. So the first one is to create a collection. You could just create one collection and store all your user uploaded content or whatever in one big folder on bunny.net and that might be okay, but I recommend that you create for each account or each user, a collection so that you can keep them organized. That would also allow you in the future, if that user cancels, then you can, you can create a backend workflow that goes through and goes to Bunny and, and deletes those videos. Because I mean, in the end, there is a cost associated. And so it keeps things structured and ordered. It's a very simple call. You're going to give it the library ID that You're going to get that when you've set up your Bunny.net, you go to streaming and you're just going to create a library. We create separate libraries for each application. And then inside there, we create collections and you just pass it a name and it gives you back an ID for that collection. And you just store it in a field in your database. And that's, that's all that needs. The second step and can be a little bit tricky, especially in other platforms that we've used, because you have to upload the video and you Usually this requires either a special process or a piece of code that chunks it out, and you need to make sure that you're encoding in the right format and that, you know, it can get kind of complicated. Fortunately, the Bunny.net API gives us a call which is called fetch video from a URL, and so this way all we do is we temporarily upload the video to Bubble, to the Bubble file storage. That gives us a URL, and then we just pass to Bunny the URL and the library ID and the collection ID here, and the URL and a title. You give it a name, and that automatically Bunny will pull the file from the URL and upload it into its servers. It will transcode and encode the file and Once it's done, it's ready to be streamed. Okay. So it's really simple process. It's one API call. You don't need to jump through a bunch of hoops. It's just one API call. And then the last thing is once the video has been processed, you're going to want to get the information from that video. And so we have a call called get_video, and it just takes the library ID and the ID of the video, which we're going to be returned from this fetch_video. It's going to return the video ID. And then it's going to return back the title, the size, the aspect ratio, the resolutions that it has encoded for, and it's going to give you the collection ID, the thumbnail file here as well. It's giving you all of this information back. It will also give you the most important thing here is the ID here. And we're going to use that when we want to use the the Bunny.net embedded video player so that we can also show the videos on our, on our website. And so we're going to complete the whole loop here. So what I'm going to do is now we're going to actually go in and look at the video uploader reusable element that we've created. So this allows us to have this little icon of a camera. And whenever anybody clicks on this icon, it's going to open up a window on their computer so they can choose which video they want to upload, and it's It's going to upload it to, to, to Bubble. And so what that does is in the workflow section, you're going to see that whenever the video icon is clicked, it's going to show the file uploader. We're going to run this little JavaScript, which just is basically just telling click on it so that it automatically opens the file uploader. And then it hides the file uploader. And that will allow them to pick the file and it will upload. Once it starts uploading, it's going to show a group focus. Which we can see here is uploading and it's going to show this little thing here. So showing the percentage that it's been uploaded, the user can have some visual feedback. Okay. It's uploading my file. These can be big files. I think the limit is 2.5 gigs is what we can support right now. And then when the uploader's value has uploaded all 100% of the video, what it's going to do, it's first of all, going to show, set the, it's got custom state called processing. Which is going to show a little text that says processing video, because one of the things that's important here is that these processes take a while. So you want to give your user visual cues so that they know that things are working, because otherwise they're going to be kind of like, oh, is this really uploading? Is it really working? So that's why we set this custom state. We have a custom event called Get Collection, and this is either going to, in this case, and this could be different in your case, but what I do is I check and see if the customer has is a collection ID associated in the database. If it does, I just return it. And if it doesn't, then I create one and I return it. So the result of this custom event is always a collection ID. And so now down here, I now can fetch the video. I pass it the collection ID. I pass it HTTPS and the URL and the file uploader's URL. You have to put the HTTPS there because The URLs that the Bubble returns back just start with the two forward slashes, just a little trick there. And the title of the video, whatever title I've done, that comes from your app. And then I'm going to create a record in a table called video uploads that allows me to keep track of everything. So I store there the upload URL, the bunny ID, which is going to come from this fetch URL is going to return me the ID and any other fields that I want to keep. And then the next thing important is I'm going to schedule, and I usually give it 2 minutes, a backend workflow called video check. Okay. And we're going to look at that in a minute. So, but what it's going to do is that's going to go and poll Bunny and say, has it been processed yet? Is it finished? Is it ready to go? And if it's not, it's going to wait a little bit and try again. Okay. And we're going to see this, this workflow in just a second. This reusable could be used for different places in my application, and I want it to store the video uploader record in the, in the right file. So that's what I'm doing there. I hide the group focus and then I can just set it as no longer processing, no longer uploading, and we're good to go. And that, that has finished the user experience of uploading a video. It's really quite simple. And here, We have our backend workflow called video check. Okay. And it takes a record from the video upload file. And the first thing it's going to do is it's going to use our get video function API call, passing in the library, the ID that we have that we stored there from when we uploaded to, to Bunny. And then it's going to trigger a a custom, a custom event called video done. If the encode process from this get video is at 100%. So if it's completed 100% of the processing, then we're going to call it video done. And if it's not, we're going to call video pending. This hasn't gotten through yet. So that means it's not finished yet. So if it has completed, then we're going to do, we're going to call a function called video purge because we want to delete the file that we uploaded to Bubble because we don't want to be accumulating those files on Bubble. Otherwise, we're— we've got this orphaned huge video file that is worthless, really. It's not, it's not ever going to be used now that the video has been successfully uploaded to Bunny and is ready to go. So we delete that file and we make a change there saying that it's been purged so that we keep track of that. And that way we know that the video is not occupying a space in our Bubble application. If it's still pending, it hasn't finished, then what we're going to do, in my case, I'm saying if it's gone through 5 times and it's still not finished, then I'm just going to purge it and let the, I'll, you know, let the user, I'll send them a message or something saying, hey, something went wrong with your video upload. If not, I'm just going to upload the status. I'm going to check, I'm going to upload the number of times I've checked here. And then if it's less than 5 and it's not been finished, then I'm going to reschedule for 3 minutes later. So I'm going to give it 3 more minutes and I'm going to check it again. And that way I won't be creating an infinite loop because when it gets to 5, it's going to stop. It's not going to keep doing it. But when it, as long as it's, you know, the first 5 times, it's going to check and see if it can, if it's completed. You never know how long the servers may take. So this makes sure. That our video is correctly uploaded. It's correctly encoded and transcoded, and it's ready to go. And we've cleaned out our Bubble file storage. So we're not, you know, we're not occupying needless amounts of space. And then the last thing that I want to show you is just how easy it is to embed. And here, basically from bunny.net, we're going to get this little snippet of code and Then all I have to do is paste that into an HTML element on my webpage anywhere I want. I'm going to, I'm going to change the source to the video URL that we've created when we uploaded the video and we got it from, from bunny.net with its ID. So that is completely handled there. And this will embed and you'll be able to see the player, which by the way, in bunny.net, you can, you can personalize, you can change the colors and that you can tell what icons you want to be available. Do you want them to be able to slow it down or speed it up or, or go into full screen? You can handle all of that in Bunny.net. And then finally, one thing I wanted to show you is how do, how do we handle the case that they don't want to upload the video. They want to just embed a YouTube video, for example. And so if I go into setup flow here and I scroll down here, we have a section here called video. What I've done, we have a radio button here, which says, okay, your video shows up at the top of your page. You can either upload or you can use an external video, which will be YouTube or Vimeo. And then if they choose external, then it's going to show them this group where they can just paste in the URL. And, and if it is, if it's upload, then it's going to show them this group with our video uploader here, and it will let them upload the video like we've just seen. And then you store either the external video or you store the one that can, the URL for the one that you've uploaded. And that way it always works the same seamlessly. The Bunnyn.net will stream YouTube videos or Vimeo videos fine. So that's no, that's no problem at all. The actual player will play them fine. So basically that's the full cycle of what you need to do to get this set up on your, on your Bubble application and use it in yourself. You do need to check for uploads that failed. So that's where, you know, we get to those 5 tries. If it hasn't worked right, then we need to clean out the— it out, and we should send a notification or something like that. You do need to store the video in Bubble first, but you have to remember to, to get rid of it at the end. Otherwise, you will have those files just accumulating there on your Bubble application, which is not what you want. And, uh, Other than that, the bunny player is mobile responsive, so it adapts well to cell phones. So you don't really have any problems there at all. If at all, this seems like really complicated or you don't want to dig into the weeds and you need help, feel free to reach out to us here at ratio.dev. We'd be happy to set up a call, talk to you and figure out how we can help you set this all up on your Bubble application. And be sure to go to ratio.dev and sign up for our no-code resource center. That's where the plugins that we recommend and the list of tutorial videos and podcast episodes and great books to read. It's, you know, that's where you can get all of that information. We update it regularly. If you're a founder or a startup owner, or you're a Bubble developer and you're building an application, I really recommend you join our school community. It's called Bubble Gods. And there's a link below for that. We do live Q&As and all of our training materials are organizing courses there. So great resource for you there as well. If you've liked the video, give it a thumbs up, subscribe to our channel. You don't know how happy that makes Tony and I. And, uh, thanks for watching and I will see you on the next video.