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
- Distribution
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.
Getting started
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 .gitignore
.)
Now, let’s dive into the main part, integrating the Mux API with a Flutter app.
App overview
We will build a simple Flutter app containing just two pages:
HomePage
PreviewPage
Plugins
First of all, let’s add the plugins that we need for building this app to the pubspec.yaml
file.
- dio — for making HTTP POST and GET requests
- video_player — for previewing the video to be streamed
- intl — to format
DateTime
objects
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 GET
and 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 you can just run it on your local machine using:
node main.js
This will run the server on port 3000
, and you can access it from the client app using the URL:
http://localhost:3000
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
Mux client
We will start building the client class by initializing the Dio
. Create a MUXClient
class inside a new file called mux_client.dart
.
Now, create a Dio
object:
Add a method initializeDio()
:
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.
Create a string.dart
file containing some constants that we require afterwards:
The 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 AssetData
object.
You may be wondering what the VideoData
and AssetData
classes are - they are just model classes for easily parsing the JSON data returned by the Mux API calls.
Model class
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:
The VideoData
class:
The AssetData
class:
Both of them have three common sub-classes ( Data
, PlaybackId
and Track
).
The Data
class looks like this:
PlaybackId
is given below:
The Track
class is as follows:
HomePage
The 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.
The HomePage
will be a StatefulWidget
. First, we will call the initializeDio()
method and initialize a TextEditingController
and a FocusNode
inside the initState()
method.
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 Column
:
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.
PreviewPage
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:
The InfoTile
widget is used for creating the UI of each item in the Column
:
Congratulations, you have created a Flutter app for streaming videos 🥳
Testing
Verifying whether you are getting the 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.
You can use the plugin http_mock_adapter, which is created with a combination of dio and mockito. It is very effective when used alongside the dio plugin.
We will not go deep into the tests in this article. First of all, create a new file inside the test
folder called mux_api_test.dart
.
Let’s define three tests here:
You can run all the tests by using the command:
flutter test
Running on Codemagic
To maintain a productive developer 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.
Conclusion
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.
References
Originally published on Codemagic Blog.
GitHub repo of the sample app is available at the following link:
Check out my other articles
If you want to support me and want me to continue writing Flutter articles and building some interesting Flutter projects, please contribute to my Patreon page below:
You can follow me on Twitter and find some of my projects on GitHub. Also, don’t forget to checkout my Website. Thank you for reading, if you enjoyed the article make sure to show me some love by hitting that clap (👏) button!
Happy coding…
Souvik Biswas
Follow Flutter Community on Twitter: https://www.twitter.com/FlutterComm