How to create a live streaming app with Bubble, Daily, and Mux – Part 3
Part 3 in the series on how to build a live streaming app in Bubble using the Video, Audio, and Live Bundle with Mux integration, enabling users to set up, broadcast, and view streams directly within your app.
Welcome to the final installment of building a live-streaming app with Bubble and the Video, audio & live bundle! If you haven’t completed Part 1 and Part 2, start there first.
In this part, you’ll design the backstage page where users can join and start their YouTube stream, and set up workflows for broadcasting live.
While the guide walks you through each step, you can also explore a finished version in the sample editor. Please note that, for security, sign-ups are disabled and API keys have been removed.
1. Design the backstage page
Let’s start by setting up the backstage page, where users will join the stream. In the backstage page settings, change the layout to Column.
Add a Marketing Component to the page. Remove any images and buttons, and modify the text fields as follows:
Main Text: Backstage for [insert dynamic data: Current stream’s name]
Subtext: Step into the spotlight! 🌟 You’re on camera, and your conversation will stream live. Here’s how to get started:
Update the text of the three cards within the component.
Card 1: 🎬 Join the Room
Once you join your conversation will be broadcast on the stream page in real time.
Card 2: 🔗 Share the Link
Share this link with anyone you want to invite. Link: [insert dynamic data: Current page URL]
Card 3:📺 Watch the Stream
Your conversation will be broadcast directly back into Bubble. Use the link below to watch the stream and share it with others:
Link: [insert dynamic data] Website home URLstream/Current page's stream's unique ID
Go to Settings, select Expose HTML Element ID, and check this option. Enabling this option will later enable you to place the video call in a custom element anywhere on the page.
Back in the Design tab, add a Group to your page. Name it Group Video and set the ID Attribute to “video.”
In the Layout tab, adjust the settings:
Check Collapse when hidden.
Uncheck Make this element fixed-width.
Set Min Width to 274px and Max Width to 960px.
Uncheck Fit width to content and Fit height to content.
Set Min Height to 750px and leave Max Height blank.
Add the Events Element to the page to listen for events when the user joins the room.
Add the header to the top of the page
2. Set Up Backstage Workflows
Page Load Workflow: Add a workflow to join the room upon page load.
Use BundleDaily - join room action.
Set URL to Current page’s stream’s room URL.
For Room Style, use Custom Position.
Set Meeting Token to Current page’s stream’s owner token.
Enter “video” as the Element ID.
Add an action to start listening to events.
Add an event A events joined-meeting
Add a condition so that the event triggers when “Curren user is Current page’s stream’s user”
When the condition is met, add the action BundleDaily - Start Live Stream to begin streaming.
Set the RTMP URL to rtmp://global-live.mux.com:5222/app/Current’s page’s stream’s stream key
Then add a redirect to the index page when the page is loaded and the current page’s stream is empty. This will prevent the page from loading when there isn’t a stream
3. Create the stream page
Create a new page titled stream and clone from the backstage page
Remove the cards and change the title and subtitle text to Current page’s stream name and Current page’s stream description respectively and change the text alignment to center
Inside group video add the video player that comes with the bundle, change the media type to hls and make the dynamic link current page’s stream’s stream url
Then in layout tab update the minimum width to 273 px max with to 960 px and min height 0 px and max height 500 px
3. Create the Stream Page
Create a new page: Name the page stream and clone it from the backstage page.
Update the title and subtitle:
Remove the cards from the page.
Change the title text to display Current Page’s Stream Name.
Change the subtitle text to display Current Page’s Stream Description.
Align both the title and subtitle text to the center.
Add the video player:
Inside the Group Video section, add the video player component from the bundle.
Set the media type to HLS.
Use the dynamic link: Current Page’s Stream’s Stream URL.
Adjust the layout:
In the layout tab, update the dimensions as follows:
Minimum Width: 273 px
Maximum Width: 960 px
Minimum Height: 0 px
Maximum Height: 500 px
Now you’re ready to try it out!
Wrap-Up
Fantastic work! 🎉 You’ve completed the final steps to building a YouTube live-streaming app in Bubble. Your app is now set to let hosts and guests join, manage, and broadcast live events directly to their audience.
That’s a wrap—your live-streaming app is ready to go live!
Lola is the founder of Lunch Pail Labs. She enjoys discussing product, SaaS integrations, and running a business. Feel free to connect with her on Twitter or LinkedIn.
.png?table=block&id=9ba33ac6-8e12-48f6-b980-4333b612ec56&cache=v2)
