DEV Community

Cover image for How To Build A Video Streaming App Using Flutter
Jason Wills for EnableX

Posted on • Updated on • Originally published at


How To Build A Video Streaming App Using Flutter

The live streaming industry is expected to be valued at $184.3 billion by 202, as per Grand View Research. Enterprises are using live-streaming to launch products and offerings.

In this post, you’ll learn to build a working Flutter video streaming mobile app using EnableX Low Code Video Embed.

Understanding Low Code
Low-code platforms employ visual, declarative techniques instead of traditional lines of programming. Both developers and non-developers can use these products and they require little coding. Common features include reusable components and process modeling. It allows individuals or small teams can experiment, prototype, and deliver apps quickly using.

To gain understanding about the Low Code Video Embed, readout this blog: EnableX Low Code Video Embed.

Prerequisites for building a Video Streaming App using Flutter
Before you start working on this project, having a thorough idea of development and deployment environment is necessary:

A. Development Environment

  • Development environment for iOS

Requirements for iOS platform:

  • Flutter 2.0.0 or later
  • macOS
  • Xcode (latest version is highly recommended)

  • Development environment for Android
    Here are the requirements for an Android platform:

  • Flutter 2.0.0 or later

  • macOS or Windows

  • Android Studio (the latest version is highly recommended)

B. Deployment environment

  • For an iOS platform, iOS device is required.
  • For an Android platform, you will need an Android simulator or a real Android device.

It is important to run Flutter Doctor to check whether the development and deployment environment are correct.

Getting Started With Project Setup

1. Learn the basic EnableX Low Code Setup
Before starting out, visit Enablex-Low-Code-Video-Embed.

2. Create a Video Embed Project
Go to for signup and create a Video Embed project in the EnableX portal. Here is you can do it:

  • Log in to the EnableX portal. If you do not have an account, Signup here.
  • Now, move to “Create Projects”, enter relevant information.
  • Once you’re done with project creation, “APP ID” and “APP Key” are generated. You will need these credentials to gain access in the EnableX Meeting Room. Therefore, save this for further use (see: Embed the Meeting URL).

3. Create a Flutter Project
In this post, we have used Visual Studio Code to create a Flutter project. Before you begin, you need to install the Flutter plugin in Visual Studio Code. See Set up an editor.

A. Launch Visual Studio Code
Select the Flutter: New Project command in View > Command. Then enter the project name and press . Next, select the location of the project in the pop-up window. Visual Studio Code automatically generates a simple project.
This post uses Android Studio to create a Flutter project. Before you begin, you need to install the Flutter plugin in Android Studio. See Set up an editor.

B. Launch Android Studio
Click on file -> New Flutter Project ->Flutter Application.

*It is recommended using the flutter_inappwebview and permission_handler modules to manage media permissions in the webview. Therefore, update the Settings in your iOS and Android projects to match the requirements. Also, take care of a known issue to show the keyboard in Android webviews.

C. Add Dependencies
Add the following dependencies in pubspec.yaml:

Image description

D. Install Packages
Install packages from the command line with Flutter:

“$ flutter pub get”

Or, your editor might support flutter pub get. Check the docs for your editor to learn more.Is.

E. Need Device Permission
EnableX Video SDK requires camera and microphone permission to start video call.

For Android
Open the AndroidManifest.xml file and add the required device permissions to the file.

Image description

  • For iOS
    Open the info.plist and add:

  • Privacy – Microphone Usage Description, and add a note in the Value column.
    *If you want your application to remain active in the background too, enable the Background Mode. Here is how it can be done:

  • Open your application in xcode. (Runner.xcworkspace)

  • Select your app target.

  • Click the Capabilities tab.

  • Enable Background Mode, and check in Audio, AirPlay, and Picture in Picture.

*If you see an iOS black screen that means you have not done any of the above steps correctly. Our SDK use PlatformView, you should set io.flutter.embedded_views_preview to YES in your info.plist.

Start the Project
The project setup is over. Now start the project by following the steps given below:

Add the WebView component to your code
Setup the properties
Fill the room URL and parameters
Here is a short example:

Image description

Hey! You’re Done. Now, run this project on real-device and you are ready to start multiparty video calling on Flutter.

Image description

I’m sure, you have enjoyed the process.

To try it out, simply sign up here for free

Top comments (0)

An Animated Guide to Node.js Event Loop

>> Check out this classic DEV post <<