diff --git a/docs/ff-concepts/file-handling/file-handling.md b/docs/ff-concepts/file-handling/file-handling.md index 86aaa671..8b6e7995 100644 --- a/docs/ff-concepts/file-handling/file-handling.md +++ b/docs/ff-concepts/file-handling/file-handling.md @@ -19,7 +19,7 @@ FlutterFlow makes it easy to manage, upload, download, and display files within :::info[Also see] -- **Stream Media with Mux**: [**Integrate Mux's broadcasting**](../../ff-integrations/streaming/mux/initial-setup.md) services in FlutterFlow by using the MuxBroadcast widget for live streaming. +- **Stream Media with Mux**: [**Integrate Mux's broadcasting**](../../ff-integrations/streaming/integrate-mux.md) services in FlutterFlow by using the MuxBroadcast widget for live streaming. - **Request Permissions**: [**Request user permissions**](../../resources/projects/settings/project-setup.md#request-permission-action) when implementing custom widgets or actions that access personal information, such as capturing photos or selecting images, especially if no built-in permission mechanism is available. ::: \ No newline at end of file diff --git a/docs/ff-integrations/streaming/imgs/get-past-stream-id.avif b/docs/ff-integrations/streaming/imgs/get-past-stream-id.avif new file mode 100644 index 00000000..34823dcc Binary files /dev/null and b/docs/ff-integrations/streaming/imgs/get-past-stream-id.avif differ diff --git a/docs/ff-integrations/streaming/imgs/muxbroadcast-widget.avif b/docs/ff-integrations/streaming/imgs/muxbroadcast-widget.avif new file mode 100644 index 00000000..c9d33b38 Binary files /dev/null and b/docs/ff-integrations/streaming/imgs/muxbroadcast-widget.avif differ diff --git a/docs/ff-integrations/streaming/imgs/on-broadcast-start.avif b/docs/ff-integrations/streaming/imgs/on-broadcast-start.avif new file mode 100644 index 00000000..946cea89 Binary files /dev/null and b/docs/ff-integrations/streaming/imgs/on-broadcast-start.avif differ diff --git a/docs/ff-integrations/streaming/imgs/on-broadcast-stop.avif b/docs/ff-integrations/streaming/imgs/on-broadcast-stop.avif new file mode 100644 index 00000000..1ef6894a Binary files /dev/null and b/docs/ff-integrations/streaming/imgs/on-broadcast-stop.avif differ diff --git a/docs/ff-integrations/streaming/imgs/streaming-action-triggers.avif b/docs/ff-integrations/streaming/imgs/streaming-action-triggers.avif new file mode 100644 index 00000000..45025062 Binary files /dev/null and b/docs/ff-integrations/streaming/imgs/streaming-action-triggers.avif differ diff --git a/docs/ff-integrations/streaming/integrate-mux.md b/docs/ff-integrations/streaming/integrate-mux.md new file mode 100644 index 00000000..66070882 --- /dev/null +++ b/docs/ff-integrations/streaming/integrate-mux.md @@ -0,0 +1,155 @@ +--- +slug: /integrations/mux +title: Mux Livestream +description: Learn how to get started with MuxBroadcast in your FlutterFlow app for live video broadcasting. +tags: [MuxBroadcast, Integration, Setup] +sidebar_position: 2 +keywords: [FlutterFlow, MuxBroadcast, Integration, Setup, Mux, LiveStream] +--- + +# Mux Livestream + +Mux Livestream allows you to integrate live video streaming capabilities directly into your FlutterFlow app. It leverages Mux’s powerful streaming API, providing real-time broadcasting features. For a deeper understanding, check out [how live streaming works](https://blog.flutterflow.io/flutter-mux-live-streaming/#how-does-live-streaming-work). + +:::tip[Possible use cases] + +- **Live Events**: Stream conferences, workshops, or meetups. +- **Educational Apps**: Conduct live classes, webinars, or tutorials. +- **Social Platforms**: Allow users to broadcast and share real-time video content. +- **Customer Support**: Provide interactive support sessions via live video streaming. + +::: + +## Setting Up Mux Integration + +To get started, go to **Settings and Integrations > Integrations > Mux Livestream** in FlutterFlow and enable **Mux Broadcast**. + +Then, create a Mux account and go to **Settings > API Access Tokens**. Click **Generate new token**, choose an environment (Development or Production), check **Mux Video** with **Write** access, name the token, and generate it. Copy the **Access Token ID** and **Secret Key**, paste them into FlutterFlow, and click **Deploy**. + + +
+ +
+

+ +## Adding MuxBroadcast Widget + +To create a live stream, start by adding the **MuxBroadcast** widget to your page. Navigate to the page where you want the livestream to appear, then drag and drop the widget onto the canvas. After placing it, configure its properties using the options available in the right-side panel. + +The MuxBroadcast widget comes with three key properties to control the live stream: + +- **Show Streaming View**: By default, this option is disabled, meaning the widget only displays the starting interface (camera preview and "Start Stream" button). Enabling this option shows the live streaming UI on the canvas during design time, which helps with layout and styling previews. +- **Broadcast Latency**: Choose between **Standard**, **Reduced**, and **Low** latency modes. Lower latency provides faster interaction but may reduce video quality or reliability depending on the network. +- **Broadcast Audio Channel**: Select **Stereo** or **Mono** audio. Stereo provides richer sound with left and right audio separation, while Mono offers broader device compatibility and lower bandwidth usage. + +![muxbroadcast-widget.avif](imgs/muxbroadcast-widget.avif) + +You can also customize the **MuxBroadcast** widget to match your app's design using various styling properties. These include: + +- **Start Button Style, Text, and Icon:** Adjust the appearance, label, and icon of the broadcast start button. +- **Stop Button:** Customize how the stop button looks. +- **Flip Camera Button:** Modify the button used to switch between front and rear cameras. +- **Live Text Style:** Change the appearance of the "LIVE" text. +- **Live Container & Icon:** Style the container and icon shown during live broadcast. +- **Duration Text Style:** Customize how the elapsed time is displayed. +- **Duration Container:** Style the container holding the duration display. + +## Start and Stop Livestream + +You can manage livestreaming using the built-in action triggers available on the **MuxBroadcast** widget: **On Broadcast Start** and **On Broadcast Stop**. These allow you to trigger workflows when a stream begins or ends. + +![streaming-action-triggers.avif](imgs/streaming-action-triggers.avif) + +### On Broadcast Start [Action Trigger] + +The actions under this trigger execute when the user clicks the **Start Stream** button. From here, you can access the livestream URL via **Widget State → Mux Playback URL** and perform tasks such as creating a new database record to indicate the livestream has started. + +![on-broadcast-start.avif](imgs/on-broadcast-start.avif) + +### On Broadcast Stop [Action Trigger] + +The actions under this trigger execute when the user stops the stream. You can use this trigger to update your database, such as setting a livestream's `is_live` status to `false`, saving the end time, or navigating away from the stream page. + +![on-broadcast-stop.avif](imgs/on-broadcast-stop.avif) + +## View Livestream + +When a livestream is active, you can access the broadcast instantly via the **Mux Playback URL** provided by the **MuxBroadcast** widget. If the livestream has already ended, additional steps are required to retrieve the archived playback URL and enable playback of the recorded session. + +### Viewing Active Livestream + +Once your livestream is active, viewers can watch it in real-time using the **Mux Playback URL**. This URL can be passed to a dedicated page (for example, **ViewBroadcast**) to stream the live session. + +To display the livestream: + +1. Navigate to your desired list or overview page where livestreams are listed. +2. When a viewer taps on a live broadcast card (e.g., from a `ListView`), navigate to the **ViewBroadcast** page and pass the **Mux Playback URL** as a page parameter. +3. Inside the **ViewBroadcast** page, the **Mux Playback URL** can then be used in a [**VideoPlayer**](../../ff-concepts/file-handling/displaying-media.md#videoplayer) widget to stream the live video. + + +
+ +
+

+ +### Viewing Past Livestream + +When a livestream ends, its original **Mux Playback URL** becomes invalid. To replay an ended session, you need to fetch the archived asset's playback URL that was automatically created during the livestream. + +To achieve this, you will need to retrieve the live stream ID from its playback ID, then get the associated asset's playback ID from the livestream's recent assets. + +:::tip +You'll need to write a [**custom code expression**](../../resources/control-flow/functions/utility-functions.md#custom-code-expression) or [**custom function**](../../ff-concepts/adding-customization/custom-functions.md) to extract the playback ID from the current Mux Playback URL (e.g., from `https://stream.mux.com/iSHXmiVyFshIPgeZf2F78OrvOGnEQd02Api00ipWRwWaQ.m3u8` extract `iSHXmiVyFshIPgeZf2F78OrvOGnEQd02Api00ipWRwWaQ`, which is a playback ID of a livestream) and then reconstruct the new playback URL using the asset's playback ID in the same format. +::: + +![get-past-stream-id.avif](imgs/get-past-stream-id.avif) + +The flow involves using three Mux APIs in sequence: + +- [**GET /video/v1/playback-ids/`{PLAYBACK_ID}`**](https://www.mux.com/docs/api-reference/video/playback-id/get-asset-or-livestream-id): Gives the livestream ID from the livestream playback ID. +- [**GET /video/v1/live-streams/`{LIVE_STREAM_ID}`**](https://www.mux.com/docs/api-reference/video/live-streams/get-live-stream): Retrieves the livestream details including `recent_asset_ids` array. Extract the Asset ID from this api response. +- [**GET /video/v1/assets/`{ASSET_ID}`**](https://www.mux.com/docs/api-reference/video/assets/get-asset): Fetches the asset details to get its playback ID from the `playback_ids` array. + +Now, use conditional logic to check the livestream status and pass the appropriate playback URL. For example, if the broadcast is live, use the current livestream playback URL directly. If the livestream has ended, call the APIs in sequence to get the asset's playback ID and construct the archived stream's playback URL. \ No newline at end of file diff --git a/docs/ff-integrations/streaming/mux/_category_.json b/docs/ff-integrations/streaming/mux/_category_.json deleted file mode 100644 index 12dbc019..00000000 --- a/docs/ff-integrations/streaming/mux/_category_.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "label": "Mux Broadcast" -} \ No newline at end of file diff --git a/docs/ff-integrations/streaming/mux/img.png b/docs/ff-integrations/streaming/mux/img.png deleted file mode 100644 index fff5b72f..00000000 Binary files a/docs/ff-integrations/streaming/mux/img.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_1.png b/docs/ff-integrations/streaming/mux/img_1.png deleted file mode 100644 index a40361a1..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_1.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_10.png b/docs/ff-integrations/streaming/mux/img_10.png deleted file mode 100644 index 90848cb5..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_10.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_11.png b/docs/ff-integrations/streaming/mux/img_11.png deleted file mode 100644 index 36b6bf37..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_11.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_12.png b/docs/ff-integrations/streaming/mux/img_12.png deleted file mode 100644 index 6cba8dd7..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_12.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_13.png b/docs/ff-integrations/streaming/mux/img_13.png deleted file mode 100644 index 1f8ba64c..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_13.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_14.png b/docs/ff-integrations/streaming/mux/img_14.png deleted file mode 100644 index fd67bd01..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_14.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_15.png b/docs/ff-integrations/streaming/mux/img_15.png deleted file mode 100644 index 5f02df5f..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_15.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_16.png b/docs/ff-integrations/streaming/mux/img_16.png deleted file mode 100644 index 42e4ca9f..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_16.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_2.png b/docs/ff-integrations/streaming/mux/img_2.png deleted file mode 100644 index 89eb66c5..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_2.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_3.png b/docs/ff-integrations/streaming/mux/img_3.png deleted file mode 100644 index b472a9e2..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_3.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_4.png b/docs/ff-integrations/streaming/mux/img_4.png deleted file mode 100644 index 88cfc1f5..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_4.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_5.png b/docs/ff-integrations/streaming/mux/img_5.png deleted file mode 100644 index a447aa0c..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_5.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_6.png b/docs/ff-integrations/streaming/mux/img_6.png deleted file mode 100644 index 766c533e..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_6.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_7.png b/docs/ff-integrations/streaming/mux/img_7.png deleted file mode 100644 index 7ddcf603..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_7.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_8.png b/docs/ff-integrations/streaming/mux/img_8.png deleted file mode 100644 index a3a663cb..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_8.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/img_9.png b/docs/ff-integrations/streaming/mux/img_9.png deleted file mode 100644 index da59aede..00000000 Binary files a/docs/ff-integrations/streaming/mux/img_9.png and /dev/null differ diff --git a/docs/ff-integrations/streaming/mux/initial-setup.md b/docs/ff-integrations/streaming/mux/initial-setup.md deleted file mode 100644 index d78f3dd5..00000000 --- a/docs/ff-integrations/streaming/mux/initial-setup.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -slug: /integrations/mux/initial-setup -title: Initial Setup -description: Learn how to set up Mux LiveStream in your FlutterFlow app for live video streaming. -tags: [Mux, LiveStream, Integration, Setup] -sidebar_position: 1 -keywords: [FlutterFlow, Mux, LiveStream, Integration, Setup] ---- - -# Mux LiveStream - -![img_1.png](img_1.png) - -## Initial Setup - -To send the live stream from your device to the Mux server, you must enable the live stream here, obtain the keys and deploy it. - -Here is how you can set up the Mux Livestream: - -1. Navigate to **Settings and Integrations** > **Integrations** > **Mux Livestream** and enable - the Mux Broadcast. - -2. Now to get the access tokens, create a Mux account [here](https://dashboard.mux.com/signup). - -3. Click on **Settings > API Access Tokens** (left side menu) and select **Generate new token. - -4. Set the Environment to **Development** or **Production**. - -5. Checkmark the **Mux Video**. Make sure the **Write** checkbox is also selected. This gives you access to sending the live stream to the mux server. - -6. Provide the **Access token name** and click **Generate Token**. - -7. Copy the **Access Token ID** and **Secret key**, return to FlutterFlow and paste both keys. Finally, hit the **Deploy** button. - -
- -
Setup Mux Livestream
-
-Before releasing your app to production, create new keys (with Environment set to Production) and deploy them again. - -:::info -Visit the complete guide on [**how to add a live stream feature**](integrate-mux.md)to your app. -::: \ No newline at end of file diff --git a/docs/ff-integrations/streaming/mux/integrate-mux.md b/docs/ff-integrations/streaming/mux/integrate-mux.md deleted file mode 100644 index 6c1d9870..00000000 --- a/docs/ff-integrations/streaming/mux/integrate-mux.md +++ /dev/null @@ -1,513 +0,0 @@ ---- -slug: /integrations/mux/getting-started -title: Integrate Mux Livestream -description: Learn how to get started with MuxBroadcast in your FlutterFlow app for live video broadcasting. -tags: [MuxBroadcast, Integration, Setup] -sidebar_position: 2 -keywords: [FlutterFlow, MuxBroadcast, Integration, Setup] ---- - -# 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 built-in widget called -**MuxBroadcast**, which is provided by 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](https://www.mux.com/), an API-based video streaming service. Learn more -about [how video stream works](https://blog.flutterflow.io/flutter-mux-live-streaming/#how-does-live-streaming-work). - -On this page, you'll learn how to use the MuxBroadcast widget ( -by [building an example app](#building-broadcast-live-stream-app)) -and [customize the MuxBroadcast](#customizing-muxbroadcast) widget. - -
- ![img.png](img.png) -
MuxBroadcast widget
-
- -## Building broadcast (live stream) app - -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. - -* **BroadcastListing**: This shows a list of all broadcasts. -* **BroadcastName**: A bottom sheet that allows you to set a broadcast name. -* **StartBroadcast**: This allows you to start a broadcast. -* **ViewBroadcast**: This allows you to watch a live or past broadcast. - -The following flow illustrates how these pages will work together: - -
- ![img_2.png](img_2.png) -
App Flow
-
- -:::note[Prerequisites] - -- [**Set up Firebase**](../../firebase/connect-to-firebase-setup.md) for your project and [**Enable Billing**](https://firebase.google.com/pricing). This is required to deploy - the cloud functions (to your Firebase project) that will create the live - stream on the Mux server. - -- Get API keys and follow the **[initial setup](initial-setup.md)** - ::: - -## Adding MuxBroadcast Widget - -### 1. Creating Firestore collection - -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: - -The steps to create a collection are as follows: - -- Be familiar with [**Structuring the Firebase Database**](../../database/cloud-firestore/getting-started.md#structuring-the-database). -- Create a [**Collection**](../../database/cloud-firestore/creating-collections.md) 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). - ![img_3.png](img_3.png) - -### 2. Building UI - -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: - -#### 2.1 BroadcastListing Page - -On this page: - -1. Add the **ListView** to show all broadcasts. - - * Inside the ListView, add - the **Card** > **Row** > **Text** (to show stream name) and Icon (to indicate if the stream is live). - -2. Add the **FloatingActionButton** - to open a bottom sheet. - -After adding, it should look similar to this: - -
- ![img_4.png](img_4.png) -
BroadcastListing Page
-
- -#### 2.2 BroadcastName (BottomSheet Component) - -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: - -
- ![img_5.png](img_5.png) -
BroadcastName (BottomSheet Component)
-
- -#### 2.3 StartBroadcast Page - -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: - -
- ![img_6.png](img_6.png) -
StartBroadcast Page
-
- -#### 2.4 ViewBroadcast 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). - -
- ![img_7.png](img_7.png) -
ViewBroadcast Page
-
- -### 3. Retrieve broadcast list - -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. [Query a collection](../../../resources/control-flow/backend-logic/backend-query/query-collection.md) - called *broadcasts* on a ListView. -2. Order the collection by *time* field. -3. [Add the conditional visibility](../../../resources/ui/widgets/widget-commonalities.md#visibility) - on an icon (that indicates if the stream is live) based on the *is_live* field. - -> - -### 4. Navigate to the StartBroadcast page - -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. Select the FloatingActionButton and add - an action to open the bottom sheet (createdin [4.2]) - -
- ![img_8.png](img_8.png) -
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. - - * 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. - * 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
-
- -### 5. Adding broadcast action (start and stop) - -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:** - - - Add the Create Document action. - - Set the collection to *broadcasts*. - - Click on the **+ Add Fields** button and set the value of the field as per the following: - - **is_live** > Specific Value > True. - - **name** > From Variable > broadcastName (page parameter name). - - **url** > From Variable > Widget State > Mux Playback URL (This holds the URL of the - Livestream and is available when you add the MuxBroadcast widget). - - **times** > Global Properties > Current Time. - - 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:** - - - Add - the [Update Document](../../database/cloud-firestore/firestore-actions.md#update-document-action) - action. - - Set the reference to Action Outputs > broadcastOutput (action output variable name set in - previous step) > Reference. - - 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
-
- -### 6. Adding Mux APIs - -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: - -
- ![img_9.png](img_9.png) -
Flow to retrieve playback of an ended stream
-
- -You can achieve this by adding the following two APIs to your project: - -* [**getLiveStreamId**](https://docs.mux.com/api-reference/video#operation/get-asset-or-livestream-id): Returns live - stream Id based on the current playback Id. -* [**getPastLiveStream**](https://docs.mux.com/api-reference/video#operation/list-assets): Returns - playback id of ended stream based on the live stream Id. - -:::info - -* Learn more about adding [**APIs**](../../../resources/control-flow/backend-logic/api/rest-api.md) to your project. -* These APIs will be used in [**step 8**](#8-navigate-to-the-viewbroadcast-page). - ::: - -Here's how both the APIs should look: - -
- ![img_10.png](img_10.png) -
getLiveStreamId
-
- -
- ![img_11.png](img_11.png) -
getPastLiveStream
-
- -And here is the JSON path you can use to extract the required value. - -* To retrieve live stream Id from **getLiveStreamId** API result,Use `$.data.object.id` -* To retrieve past Id from **getPastLiveStream** API result**,** Use `$.data[0].playback_ids[0].id` - -![img_12.png](img_12.png) - -You can get the Authorization token by performing base64 encoding on your 'MUX_TOKEN_ID: -MUX_TOKEN_SECRET'. You can also use [this](https://www.base64encode.org/) online tool to do just -that. - -![img_13.png](img_13.png) - -### 7. Adding Custom Functions - -The typical live stream URL looks like this: - -Copy - -``` -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. - -To achieve this, you -can [create two custom functions](../../../ff-concepts/adding-customization/custom-functions.md) that look -like the below: - -1. getPlaybackIdFromUrl - -
- ![img_14.png](img_14.png) -
getPlaybackIdFromUrl
-
- -2. createUrlFromPlaybackId - -
- ![img_15.png](img_15.png) -
createUrlFromPlaybackId
-
- -We will see how to use these functions in the next step. - -### 8. Navigate to the ViewBroadcast page - -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: - - * 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: - - - 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**. - - Next, add the **getPastLiveStream** API call and pass the live stream Id from the action - output variable of a previous API call. - - 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. - -:::info[CLONABLE APP] -Get the clonable version of this app [**here -**](https://app.flutterflow.io/project/my-live-stream-u7blmw). -::: - -## Run & Test - -To play the video on the ViewBroadcast widget, Select the VideoPlayer widget, set the Path from a -variable, and use the page parameter. - -Now you can run the app and test your widget. - -:::info -Mux Livestream can not be tested in Run Mode. Instead, you will need -to **test it on real device devices**. -::: - -## Customizing MuxBroadcast - -You can customize the appearance and behavior of this widget using the various properties available -under the [Properties Panel](../../../intro/ff-ui/builder.md#properties-panel). - -### Show streaming view - -On the canvas, 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](../../../intro/ff-ui/builder.md#properties-panel). - -
- -
Show streaming view
-
- -### Broadcast audio channel - -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. - -![img_16.png](img_16.png) - -### Changing size - -By default, this widget occupies all the available space (i.e. fullscreen). To change its size, you -can use the **Height** and **Width** property. - -### Border Radius - -To create a rounded border around this widget, use this property. Toggle the lock icon () to edit -all values together or individually. - -
- -
Border Radius
-
- -### Customizing start button - -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](../../../resources/ui/widgets/basic-widgets/text.md#common-text-styling-properties) 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
-
- -### Customizing stop button - -To customize a button that allows you to stop a stream: - -1. Find the **Stop Button** section. From here, you can change the icon, size, and color. - -2. By default, the background color of the stop button is set to red. To change, use the * - *Background Color** property. - -
- -
Customizing stop button
-
- -### Customizing the flip camera 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
-
- -### Customizing live indicator - -The live indicator appears as soon as you start live streaming (at the top left side of the screen). - -To customize the live indicator: - -* 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](../../../resources/ui/widgets/basic-widgets/text.md#common-text-styling-properties) if - needed. -* 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
-
- -### Customizing duration 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. Open the **Duration Text Style** section - and [change its text style](../../../resources/ui/widgets/basic-widgets/text.md#common-text-styling-properties). -2. To change the indicator appearance, open the **Duration Container** section and use the property - such as **Background Color** and **Border Radius**. - -
- -
Customizing duration indicator
-
- -Additionally, you can also add padding, alignment, show/hide this widget from the Properties Panel. diff --git a/firebase.json b/firebase.json index 0675e103..9c7140f0 100644 --- a/firebase.json +++ b/firebase.json @@ -2412,6 +2412,16 @@ "source": "/resources/functions/utility/#code-expressions", "destination": "/resources/functions/utility/#inline-function", "type": 301 + }, + { + "source": "/integrations/mux/initial-setup", + "destination": "/integrations/mux", + "type": 301 + }, + { + "source": "/integrations/mux/getting-started", + "destination": "/integrations/mux", + "type": 301 } ] }