How to create a live streaming app with Bubble, Daily and Mux

Do not index

Welcome to Part 1 of building a live-streaming app using Bubble and the Video, audio & live bundle. This guide walks you through setting up your app, installing the bundle, and configuring privacy rules to get started with live streaming.

Let’s get started! If you’re familiar with Bubble basics, jump to the plugin setup section or begin from the top.

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.

Prerequisites

To get started, you’ll need:

A paid Bubble account (premium plugins can only be installed on paid plans).

A Daily account with a credit card on file (live streaming is pay-as-you-go).

A Mux account

1. Create a new Bubble app

Go to Bubble.io, log in, and select Create an app. Name your app (e.g., “YouStreamly”), select a blank template, and click Get started.

⚠️

Note: You can skip the Application Assistant to keep the setup simple.

2. Install the Video, Audio & Live bundle

In your Bubble app, open the Plugins tab and then select Add plugins

Search for Video, Audio & Live bundle and click Install. This plugin will power our live-streaming functionality.

Next, grab your API keys.

First, go to your Daily dashboard’s developer tab, copy your API key,

Then in the Access tokens tab of your Mux settings select “Generate a new token”

Then create a new token for the purposes of this tutorial, create a development token and ensure it has Mux video permissions

Save the Access token ID and Secret key

Paste the Daily API key into the plugin’s “API key “slot with Bearer (capital B) prefixed to it

Place the Access Token ID in the “Mux Token ID” slot and the Secret Key in the “Mux Token Secret” slot

⚠️

Note: Keep your API key secure, as it grants access to your Mux and Daily accounts.

3. Set up a stream data type

The stream data type will hold information about your streams.

Open the Data tab and create a new data type called stream.

Add the following fields to Stream:

description (text)

name (text)

owner token (text)

room id (text)

room name (text)

room URL (text)

rtmp URL (text)

stream key (text)

user (User)

4. Define privacy rules

Since you’ll store sensitive streaming details, it’s important to protect this information with privacy rules.

Go to the Privacy tab and create a rule called “stream privacy.”

Set rules so that only the stream’s creator can view all fields. For other users, limit access to only the name, room url, and Slug.

Keep in mind, that anyone with access to your Bubble app’s database can view the stream key. If your app requires stricter security, consider encrypting this data to protect it further.

Wrap-Up

Nice work! 🎉 You’ve set up your Bubble app, added the Video, audio & live bundle, and configured your data structure—key steps to kick off your live-streaming app.

Next up, we’ll dive into Part 2: Designing Your Home Page and Stream Workflows, where you’ll start bringing your app’s interface and core streaming features to life.

How to create a live streaming app with Bubble, Daily and Mux – Part 1