# How would you approach setting up live streaming capabilities in Bubble.io: Step

- Tool: Bubble
- Difficulty: Beginner
- Time required: 30-35 min
- Compatibility: Growth plan+ (streaming APIs require server-side calls)
- Last updated: March 2026

## TL;DR

Add live streaming to your Bubble app by integrating Mux or Amazon IVS via the API Connector. This tutorial covers creating live streams through API calls, embedding the video player in an HTML element, handling stream start and stop events via webhooks, and tracking viewer counts in real-time for a complete streaming experience.

## Overview: Setting Up Live Streaming in Bubble

Bubble does not process video natively, so live streaming requires an external video service. This tutorial integrates Mux with Bubble via the API Connector to create streams, embed players, and track viewers. Whether building a webinar platform, live shopping feature, or community broadcasts, this guide provides the foundation.

## Before you start

- A Bubble account on the Growth plan or higher
- A Mux account (mux.com) with API credentials
- Basic understanding of Bubble's API Connector
- Familiarity with HTML elements for embedding content

## Step-by-step guide

### 1. Set up your Mux account and get API credentials

Sign up at mux.com and go to Settings → API Access Tokens. Create a new token with Mux Video permissions. Copy the Token ID and Token Secret — these are your API credentials for Bubble. Mux offers a free tier for development.

**Expected result:** A Mux account with API credentials ready for Bubble integration.

### 2. Configure the API Connector for Mux

In Bubble, go to Plugins → API Connector → Add another API named Mux. Set Authentication to HTTP Basic Auth with Token ID as username and Token Secret as password. Create an API call named Create Live Stream: POST to https://api.mux.com/video/v1/live-streams. Set the body to JSON with playback_policy set to public. Initialize the call. The response includes a stream_key and playback_ids.

```
POST https://api.mux.com/video/v1/live-streams

Body:
{
  "playback_policy": ["public"],
  "new_asset_settings": {"playback_policy": ["public"]}
}

Response includes:
  stream_key: "live_xxx..."
  playback_ids: [{"id": "xxx", "policy": "public"}]
```

**Expected result:** The API Connector creates live streams on Mux with proper authentication.

### 3. Embed the video player on your page

Create a Data Type called LiveStream with fields: Mux_ID (text), Stream_Key (text), Playback_ID (text), Status (text), Host (User), and Viewer_Count (number). On your viewing page, add an HTML element with the Mux Player web component. Load the player script in Settings → SEO → header scripts. Set the playback-id attribute dynamically using the LiveStream record's Playback_ID.

```
<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script>
<mux-player
  stream-type="live"
  playback-id="PLAYBACK_ID_HERE"
  autoplay
  muted
></mux-player>
```

**Expected result:** A video player displays on the page and plays the live stream when active.

### 4. Handle stream state changes via webhooks

In Mux dashboard → Webhooks, add an endpoint pointing to your Bubble backend workflow URL. In Bubble, create a backend workflow called mux-webhook. Handle events: video.live_stream.active sets Status to active and records Started_At, video.live_stream.idle sets Status to idle. Update the LiveStream record based on the Mux stream ID in the webhook payload.

**Expected result:** Stream state changes update automatically in your database via Mux webhooks.

### 5. Track viewer count and add stream controls

Create a Get Live Stream API call (GET /video/v1/live-streams/{id}) to fetch current viewer count. Schedule a backend workflow that polls every 30 seconds while the stream is active. Display Viewer_Count on the stream page. Add a Go Live button for hosts that creates a new LiveStream and shows the stream key for OBS. Add an End Stream button that calls the Mux disable endpoint. For advanced streaming with chat, donations, and multi-camera, RapidDev can help architect a complete platform.

**Expected result:** Viewer counts update in near-real-time and hosts can start and end streams from the app.

## Complete code example

File: `Workflow summary`

```text
LIVE STREAMING — WORKFLOW SUMMARY
==================================

DATA TYPE: LiveStream
  Mux_ID, Stream_Key, Playback_ID, Status, Host (User),
  Viewer_Count (number), Started_At (date)

API CALLS:
  Create Live Stream: POST /video/v1/live-streams
  Get Live Stream: GET /video/v1/live-streams/{id}

WORKFLOW: Go Live clicked
  1. Call Create Live Stream
  2. Create LiveStream record with response data
  3. Show Stream_Key to host (for OBS)

BACKEND: mux-webhook
  video.live_stream.active → Status = active
  video.live_stream.idle → Status = idle

BACKEND: poll-viewer-count (every 30s while active)
  Call Get Live Stream → Update Viewer_Count

PAGE: watch
  HTML element: <mux-player> with dynamic Playback_ID
  Viewer count display + status indicator
```

## Common mistakes

- **Exposing the stream key to viewers** — The stream key allows anyone to broadcast to your stream channel. Fix: Use Privacy Rules to restrict Stream_Key field to only the Host user.
- **Not handling stream end events** — Viewers see a frozen player when the stream ends without status update. Fix: Handle Mux webhook idle events and show a Stream ended message.
- **Polling viewer counts too frequently** — Calling the API every 5 seconds wastes quota and WUs. Fix: Poll every 30-60 seconds — sufficient for most viewer count displays.

## Best practices

- Use Mux webhooks for state changes instead of polling
- Restrict stream keys to host users via Privacy Rules
- Use the Mux Player web component for best playback experience
- Show loading states while the stream connects
- Store recordings for replay functionality
- Rate-limit polling to 30-60 second intervals

## Frequently asked questions

### How much does Mux cost?

Mux charges per minute of video ingested and delivered. Free tier covers development. Production costs roughly $0.01-0.02 per viewer per minute.

### What streaming software does the host need?

OBS Studio (free), Streamlabs, or any RTMP-compatible tool. Enter the Mux ingest URL and stream key.

### Can I add live chat alongside the stream?

Yes. Build chat with a Messages Data Type and Repeating Group. Bubble's real-time updates work well for this.

### What is the latency?

Standard Mux streams have 10-20 second latency. Low-latency mode reduces to 3-5 seconds.

### Can I record streams for replay?

Yes. Mux automatically creates recordings when streams end. Display them on a recordings page.

### Can RapidDev build a streaming platform?

Yes. RapidDev can architect streaming platforms with chat, donations, viewer analytics, and recording management.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/setting-live-streaming-capabilities-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/setting-live-streaming-capabilities-bubble