How to Add Live Streaming to a Bubble App

Mux is recommended for Bubble integration — it provides simple APIs for stream creation and an embeddable HLS player. Sign up at mux.com, create a project, and get your API access token and secret. Store these in the API Connector as private parameters. Alternative: use YouTube Live API for free streaming with existing YouTube infrastructure.

In the API Connector, set up a POST call to Mux's live stream creation endpoint (https://api.mux.com/video/v1/live-streams). Set authentication to HTTP Basic Auth with your Mux access token and secret. The request body specifies stream settings like playback policy and whether to record. Initialize the call. This returns a stream key (for the broadcaster) and a playback ID (for viewers).

1{
2  "playback_policy": ["public"],
3  "new_asset_settings": {
4    "playback_policy": ["public"]
5  },
6  "reduced_latency": true
7}

Create a 'go-live' page for broadcasters. Display the stream key and RTMP URL (rtmp://global-live.mux.com/app) that the broadcaster enters into OBS, Streamyard, or similar streaming software. Create a 'watch' page for viewers with an HTML element containing the Mux Player embed. Use the playback ID from the stream record to construct the player URL. The Mux Player web component handles all playback controls.

1<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script>
2<mux-player
3  stream-type="live"
4  playback-id="PLAYBACK_ID_HERE"
5  metadata-video-title="Live Stream"
6  style="width:100%;aspect-ratio:16/9;"
7></mux-player>

Next to the video player, add a chat section using the chat system pattern: a Repeating Group of Messages filtered by stream ID, sorted by timestamp ascending, with a text input and Send button below. Use Bubble's live data for real-time message display. Add the sender's name and a timestamp to each message. Optionally add moderation controls for the stream host to delete messages.

When creating the Mux stream, set 'new_asset_settings' to enable recording. After the stream ends, Mux automatically creates a video asset with its own playback ID. Store this asset ID in your Stream Data Type. On a 'replays' page, list completed streams with their recording available. Use the same Mux Player embed but with the asset's playback ID instead of the live stream's.

Create a 'StreamSession' Data Type to track active viewers. When a user opens the watch page, create a StreamSession record. When they leave, delete it. Display the count of active sessions as the viewer count. For stream status, use Mux webhooks (video.live_stream.active and video.live_stream.idle) via a backend API endpoint to update the stream's status in your database.