Comment on page
MuxBroadcast
Adding a live streaming or broadcast feature allows users to watch the event in real-time. Instead of building the live streaming from scratch, you can use the ready-made widget called MuxBroadcast, which is available right inside FlutterFlow. The MuxBroadcast widget allows you to build a broadcast feature in minutes, and you can focus more on your app's core features.
The MuxBroadcast uses Mux, an API-based video streaming service. Learn more about how video stream works.
On this page, you'll learn how to use the MuxBroadcast widget (by building an example app) and customize the MuxBroadcast widget.
MuxBroadcast widget
This section walks you through building an example app that allows users to create and watch the live stream. The home page shows the list of all streams. If any stream is live, users will see a broadcast icon. Tapping on a stream name will open a new page that shows a live or past stream, whereas tapping on a floating action button navigates to a new page, and users can start broadcasting the event.
The final app looks like this:
Streamer on the left, Viewer on the right
To build such an app, you need the following pages and a bottom sheet.
- 1.BroadcastListing: This shows a list of all broadcasts.
- 2.BroadcastName: A bottom sheet that allows you to set a broadcast name.
- 3.StartBroadcast: This allows you to start a broadcast.
- 4.ViewBroadcast: This allows you to watch a live or past broadcast.
The following flow illustrates how these pages will work together:
App flow
Building a broadcast app, as shown above, comprises the following steps:
- 2.
- 4.
- 8.
- 11.
- 12.
If you haven't already, you must set up the Firebase for your project and enable the billing. This is required to deploy the cloud functions (to your Firebase project) that will create the live stream on the Mux server.
Setting up Mux includes enabling Mux Livestream, adding keys, and deploying it. To set up Mux, follow the instructions here.
To display the broadcast list, you must store the records of created streams on your backend server. For simplification, we will use the Firestore collection. The collection called broadcasts will store the stream information, and it looks like this:
Creating Firestore collection
The steps to create a collection are as follows:
- 1.
- 2.Create a Collection and provision at least four fields that store broadcast information such as is_live, name, url, and time (this will be used to filter the list by latest stream first).
Now, it's time to start building the UI. Here, we will build the UI for all the pages and the bottom sheet. Let's see how to do that:
On this page:
- 1.
- 2.
After adding, it should look similar to this:
BroadcastListing Page
This will be used to get the stream name from users.
Create a new component called BroadcastName which will be used as a Bottom sheet. Inside the component, add a TextField and a Button.
It should look like this:
BroadcastName (BottomSheet Component)
This page hosts the MuxBroadcast widget that is responsible for starting and stopping the live broadcast.
To add the MuxBroadcast widget, drag the MuxBroadcast widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
Here's how it looks:
StartBroadcast Page
This page hosts the VideoPlayer widget showing the live or past stream.
On this page, add the VideoPlayer widget and remove its height and width (This will make it fullscreen).
ViewBroadcast Page
Once the UI is ready, you can retrieve and display the broadcast listing from the Firestore collection into ListView. Here you will display the list by the latest stream first and show/hide the broadcast icon based on whether the stream is live.
To do so:
- 1.
- 2.
- 3.Add the conditional visibility on an icon (that indicates if the stream is live) based on the is_live field.
Retrieve broadcast list
When you click the FloatingActionButton, you won't navigate straight to the StartBroadcast page. Instead, you will first open the bottom sheet that will accept the broadcast name, and when a button (inside the bottom sheet) is pressed, you'll navigate to the StartBroadcast page with a broadcast name as a parameter.
To do so:
- 1.
Action to open bottom sheet
- 2.Now, on click of a button (inside the bottom sheet,) add an action to navigate to the StartBroadcast page.
- 1.Inside this action, click on the Define button. This will open the StartBroadcast page, where you can define a parameter that will accept the stream name.
- 2.After defining the parameter, open this action again and pass its value From Variable > Widget State > [TextField name].
- 3.Add one more action to dismiss the bottom sheet.
Navigating StartBroadcast page
On the StartBroadcast page, you have the MuxBroadcast widget (already added in step 4.3). You can use this widget to add the following broadcast actions:
- On Broadcast Start: Triggers when you click on the start the broadcast button.
- On Broadcast Stop: Triggers when you click on the stop broadcast button.
We will use the On Broadcast Start to create a new document inside the broadcast collection and On Broadcast Stop to update the same document to indicate the broadcast is ended.
To create a new document when the broadcast is started:
- 1.Select the MuxBroadcast widget from the widget tree or canvas area.
- 2.Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
- 3.Under the On Broadcast Start:
- 1.
- 2.Set the collection to broadcasts.
- 3.Click on the + Add Fields button and set the value of the field as per the following:
- 1.is_live > Specific Value > True.
- 2.name > From Variable > broadcastName (page parameter name).
- 3.url > From Variable > Widget State > Mux Playback URL (This holds the URL of the Livestream and is available when you add the MuxBroadcast widget).
- 4.times > Global Properties > Current Time.
- 4.Enter the Action Output Variable Name as broadcastOutput (This will be used to update this document in the next step).
Creating a document when a broadcast is started
When the broadcast is stopped, you must update the same document for the is_live field with False. To do so:
- 1.Select the MuxBroadcast widget from the widget tree or canvas area.
- 2.Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
- 3.Under the On Broadcast Stop:
- 1.
- 2.Set the reference to Action Outputs > broadcastOutput (action output variable name set in previous step) > Reference.
- 3.Click on the + Add Fields button and set the is_live > Specific Value > False.
- 4.Also, add one more action to Navigate Back.
Updating a document when a broadcast is stopped
If the broadcast is live, you can navigate straight to the ViewBroadcast page with the playback URL and watch the live stream, but if the broadcast is ended, you can't use the same URL. Hence, you must retrieve the URL of the ended stream.
To do that, first, you need to retrieve the live stream Id based on its current playback Id and then use it to get the playback Id of the ended stream.
Here's the flow to retrieve playback Id of an ended stream:
Flow to retrieve playback of an ended stream
You can achieve this by adding the following two APIs to your project:
Here's how both the APIs should look:
getLiveStreamId
getPastLiveStream
And here is the JSON path you can use to extract the required value.
- 1.To retrieve live stream Id from getLiveStreamId API result, Use
$.data.object.id - 2.To retrieve past Id from getPastLiveStream API result, Use
$.data[0].playback_ids[0].id
JSON paths
You can get the Authorization token by performing base64 encoding on your 'MUX_TOKEN_ID:MUX_TOKEN_SECRET'. You can also use this online tool to do just that.
The typical live stream URL looks like this:
https://stream.mux.com/{PLAYBACK_ID}.m3u8
When you call the APIs created in the previous step, you will need to extract the playback Id from the URL and create the URL back from the playback Id.
- 1.getPlaybackIdFromUrl
- 2.createUrlFromPlaybackId
getPlaybackIdFromUrl
createUrlFromPlaybackId
We will see how to use these functions in the next step.
On tapping the broadcast name card (inside the ListView), you will navigate to the ViewBroadcast page and pass the URL of the broadcast. The URL you will pass depends on whether the broadcast is live.
To navigate to the ViewBroadcast page and pass the URL of the live or past stream:
- 1.Select the Card widget from the widget tree or canvas area.
- 2.Open the action flow editor and click on the + Add Conditional Action.
- 3.Select the broadcasts Document > is_live.
- 4.Under the TRUE section:
- 1.Add an action to navigate to the ViewBroadcast page. Note: While doing so, define the parameter url on the ViewBroadcast page. This will be used to pass the playback URL of the video.
- 5.Under the FALSE section:
- 1.First, add the getLiveStreamId API call, use the getPlaybackIdFromUrl custom function to pass the current playback Id of the stream, and save the response by providing the Action Output Variable Name.
- 2.Next, add the getPastLiveStream API call and pass the live stream Id from the action output variable of a previous API call.
- 3.Finally, add an action to navigate to the ViewBroadcast page. Note: While doing so, use the createUrlFromPlaybackId custom function to pass the URL created using the playback Id (retrieved in the previous API call). Also, ensure you have defined the parameter url on the ViewBroadcast page.
Navigate to the ViewBroadcast page
To play the video on the ViewBroadcast widget, Select the VideoPlayer widget, set the Path from a variable, and use the page parameter.
Playing video
Mux Livestream can not be tested in Run Mode. Instead, you will need to test it on real device devices.
You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
In the UI builder, when you add this widget, it shows the 'Before streaming' view (i.e. flip camera and a start streaming button). To see how it will look when the stream is started, you can turn on this option from the properties panel.
Show streaming view
This option allows you to decide the type of audio recording while you broadcast. You can choose between Mono and Stereo. By default, it is set to stereo which can provide a better listening experience.
Choosing a broadcast audio channel
By default, this widget occupies all the available space (i.e. fullscreen). To change its size, you can use the Height and Width property.
To create a rounded border around this widget, use this property. Toggle the lock icon (
) to edit all values together or individually.
Changing border-radius
To customize a button that allows you to start a stream:
- 1.Select the MuxBroadcast widget and move to the properties panel.
- 2.To change the button's appearance such as size, color, elevation, and border, use the properties under the Start Button Style section.
- 3.To change the button's text, open the Start Button Text section and set the Text. You can also customize the text if needed.
- 4.To change the button's icon, open the Start Button Icon section and select the new icon. You can also change its Size and Color.
Customizing start button
To customize a button that allows you to stop a stream:
- 1.Select the MuxBroadcast widget and move to the properties panel.
- 2.
- 3.Find the Stop Button section. From here, you can change the icon, size, and color.
- 4.By default, the background color of the stop button is set to red. To change, use the Background Color property.
Customizing stop button
The flip camera button allows you to toggle the front and back camera of your device before you start broadcasting.
To customize this button's appearance, open the Flip Camera Button section and use the property such as Icon, Icon size, Icon Color, and Background Color.
Customizing the flip camera button
The live indicator appears as soon as you start live streaming (at the top left side of the screen).
To customize the live indicator:
- 1.Select the MuxBroadcast widget and move to the properties panel.
- 2.
- 3.To change its text (i.e. from LIVE to something else), open the Live Text Style section and set the Text. You can also customize the text if needed.
- 4.To change the indicator appearance, open the Live Container & Icon section and use the property such as Icon, Icon size, Icon Color, Background Color, and Border Radius.
Customizing live indicator
The duration indicator appears as soon as you start live streaming (at the top right side of the screen).
To customize the duration indicator:
- 1.Select the MuxBroadcast widget and move to the properties panel.
- 2.
- 3.
- 4.To change the indicator appearance, open the Duration Container section and use the property such as Background Color and Border Radius.
Customizing duration indicator
Last modified 4mo ago