Integrating video streaming with Flutter using Mux
Video streaming is an important aspect of various kinds of applications, ranging from social media apps like TikTok and Instagram (Reels), which engage users with short video clips, to proprietary video-sharing applications similar to YouTube, which allow users to share medium-length to long videos.
Though a video streaming platform of some kind is an awesome addition to some apps and a spotlight feature in a few apps, managing the infrastructure and handling all the aspects of streaming is a really cumbersome job.
Some of the main steps involved in video streaming are:
- Encoding and decoding the video
- Managing video database storage
- Support for multiple video formats
In this article, you will see how Mux helps to handle all the complex steps of the video streaming process and how to integrate it with Flutter.
Mux is an API-based video streaming service that handles the encoding and decoding of a video, distributing it to users. On top of that, it also provides a lot of additional features, like subtitles, thumbnails, GIFs, watermarking, etc. It has a data tracking API, which helps to monitor the video streaming performance as well.
Though Mux helps in streaming the video, it doesn't provide any storage. So, you have to provide the URL where you have stored the video.
To get started using Mux, create an account here.
When you log in to Mux, it will take you to the Dashboard.
You can try adding a video by going to the
Add a video file section and running the
POST request with the URL of the video file.
The videos are stored in the Assets section of Mux.
In order to use the Mux API, you will need to generate an API Access Token from here.
Fill in the details properly, and click on Generate Token.
This will generate a Token ID and Token Secret for API authentication.
Copy these files and store them in a private folder. (Don't commit these keys to the version control system – add them to
Now, let's dive into the main part, integrating the Mux API with a Flutter app.
We will build a simple Flutter app containing just two pages:
First of all, let's add the plugins that we need for building this app to the
- dio – for making HTTP POST and GET requests
- video_player – for previewing the video to be streamed
- intl – to format
Building the backend
It's always better to design the backend of an app first and then structure the UI based on the backend.
We need to build a simple API server to send the API requests to MUX. Though sending
POST requests directly from the client (mobile device) to the MUX server is convenient, it leaves massive security hole which may expose your MUX credentials to anyone who uses the app.
You can get a basic API server code written in
node.js containing some functions that we require for our implementation here.
Now, inside the root folder you have to create a file called
.env with the following content:
Store your Token ID and Token Secret in this file and add it to
.gitignore. The API server will automatically pick up the credentials from here.
For testing your can just run it on your local machine using:
This will run the server on port
3000, and you can access it from the client app using the URL:
The backend of this app will deal with the API calls (i.e., GET and POST requests), so this will mainly consist of two parts:
- Mux client
- Model classes
We will start building the client class by initializing the
Dio. Create a
MUXClient class inside a new file called
Now, create a
Add a method
Here, we will configure the
Dio but we don't need to perform any kind of authorization from the client as it is already being done from our API server.
string.dart file containing some constants that we require afterwards:
initializeDio() method will look like this:
Next, we need a method for storing the video to Mux by sending a
POST request to the endpoint
/assets. For this, create a method called
storeVideo(), and pass the video URL to it as a parameter. This method will return the
VideoData after processing on Mux is complete.
Here, I have used the
checkPostStatus() method to track the status of the video that is being processed until it is ready. A
GET request is sent to the endpoint
/asset with the video ID as the query parameter to get a
VideoData object containing the status information.
We will define one more method,
getAssetList(), for retrieving a list of all the videos that are stored on Mux by sending a
GET request to the endpoint
/assets. It will return an
You may be wondering what the
AssetData classes are – they are just model classes for easily parsing the JSON data returned by the Mux API calls.
There are two main model classes that we need:
- VideoData: parses the data returned for each video file
- AssetData: parses the data returned for the list of assets (or videos)
You can define the model classes in this structure:
Both of them have three common sub-classes (
Data class looks like this:
PlaybackId is given below:
Track class is as follows:
HomePage will contain a
TextField for taking the video URL as input and a button for uploading it to Mux. It also displays the list of all video assets present on Mux.
HomePage will be a
StatefulWidget. First, we will call the
initializeDio() method and initialize a
TextEditingController and a
FocusNode inside the
Let's add a
TextField and a
RaisedButton for storing the video on Mux. The button will be replaced by a
Text widget and a
CircularProgressIndicator while the storage is in progress.
For displaying the list of all videos, you can add a
ListView widget to the
Here, we have parsed and formatted the
DateTime object to display as a proper
String. The thumbnail URL is created by using the playback ID and specifying the image type and size. The
VideoTile widget is used for generating the UI for each list item. The class looks like this:
Each of the tiles is wrapped in an
InkWell widget that has an
onTap method for navigating to the
PreviewPage, passing the asset data present at that index.
This page will be used for viewing the video using the stream URL and for showing some information related to the video file.
There will be a video player at the top of the page, followed by a list of
Text widgets for displaying all of the information.
We have to create a
VideoPlayerController and initialize it inside the
initState() of this class.
I have used the Mux stream URL for loading and initializing the video controller. Also,
_controller.play() is used to start playing the video as soon as it is initialized.
The video player is created inside the
Column using the following:
For displaying the information, we can add this to the
Column after the video player widget:
InfoTile widget is used for creating the UI of each item in the
Congratulations, you have created a Flutter app for streaming videos.
Verifying whether you are getting a correct response from an API call while using a third-party service is very important. We will create some tests to mock the API responses and verify whether they are being correctly parsed.
We will not go deep into the tests in this article. First of all, create a new file inside the
test folder called
Let's define three tests here:
You can run all the tests by using the command:
Running on Codemagic
To maintain a productive development workflow, you should always run tests on a CI/CD service. You can set up and run tests on Codemagic in just a few minutes. To get started with Codemagic CI/CD, check out the blog post here.
This article covers all the aspects related to integrating Mux with Flutter and using it to stream videos, but while implementing it, you will also need a place to store the videos. Firebase Storage is a good option for this, and it works seamlessly with Mux by simply passing the URL of the video file. Don't forget to explore the Mux API, as it provides many more customizations that you can apply while streaming a video.