Live Streaming in Flutter

Suraj Chauhan

14 May 2025

In this blog we will discuss about how to we use Live Streaming in flutter.

Introduction

Live streaming has become a crucial feature in many modern applications, from social media platforms to e-learning and fitness apps.

With Flutter’s growing ecosystem, developers can now build high-performance live streaming apps across Android and iOS with a single codebase.

What is Live Streaming?

Live streaming refers to transmitting audio and video content over the internet in real time. It enables users to broadcast or watch content without waiting for the whole video to download.

Why Do We Use Live Streaming?.

Live streaming is a great way for people and businesses to connect with others online. Here’s why it’s so useful:

1. Talk in Real-Time:

You can chat with people live while you stream. They can ask questions, leave comments, and you can respond right away.

2. Reach More People:

Anyone with internet can watch from anywhere in the world. You don’t have to be in the same place.

3. Feels More Real:

Live videos aren’t edited, so they feel more honest and natural. People trust what they see.

4. Great for Businesses:

Businesses use live streaming to:

Show new products
Show events

5. Good for Learning:

Live streaming has made learning easier and more flexible for both teachers and students. Here’s how it’s used in education:

Teach online classes.
Run workshops.
Listen to lessons in real-time.

Implementation

We are going to implement how to we use Live Streaming in flutter.

We are going to implement two types of live streaming in Flutter: HLS and RTMP. For implementation please follow below mention steps.

Using HLS (HTTP Live Streaming) and RTMP (Real-Time Messaging Protocol) Method

HLS (HTTP Live Streaming) :

HLS is a way to stream videos over the internet, created by Apple. Instead of sending one big video file, it breaks the video into many small parts (usually a few seconds each).

Why Use HLS:

Better performance on slow internet: The video can change quality based on your internet speed.

Smoother playback: If your internet gets slower, the video doesn’t stop—it just switches to a lower quality.

RTMP (Real-Time Messaging Protocol):

RTMP (Real-Time Messaging Protocol) is a streaming protocol developed by Macromedia for live video/audio/data transmission over the internet.

It is used primarily for live streaming.

Why Use RTMP:

RTMP is known for lower latency than HLS, which makes it ideal for interactive live broadcasts, such as (Webinars,Live events,Game streaming).

Unlike HLS, which uses segmented files, RTMP streams data in a continuous flow, allowing quicker reaction times.

Steps 1:

First, we need to create a new Flutter project and add the following dependency to the pubspec.yaml file.

1 2	dependencies: flutter_vlc_player: any

You need to add latest version of this package.

Step 2:

In this step you need to create a StatelessWidget and add below mention code in this screen.

late VlcPlayerController _controller;

/// Add HLS Url

final String _hlsUrl = "your hlsUrl";

/// Add RMTP Url.

final String _rtmpUrl = "your rtmpUrl";

VlcPlayerController is the main controller that drives the VLC player. Afterward, you need to add your _hlsUrl and _rtmpUrl.

@override

void initState() {

super.initState();

currentUrl = _hlsUrl;

_controller = VlcPlayerController.network(

currentUrl,

hwAcc: HwAcc.full,

autoPlay: true,

options: VlcPlayerOptions(),

);

}

After that you need to initialize the current stream controller in initState.

Step 3:

void _switchStream(String url) async {

setState(() {

currentUrl = url;

});

await _controller.setMediaFromNetwork(url);

_controller.play();

}

Allows dynamic switching between HLS and RTMP streams at runtime.

setMediaFromNetwork() updates the media URL of the controller.
play() restarts playback on the new stream.

Step 4:

Expanded(

child: VlcPlayer(

controller: _controller,

aspectRatio: 16 / 9,

placeholder: const Center(child: CircularProgressIndicator()),

Displays the video stream using VlcPlayer.
aspectRatio: 16/9 gives a standard widescreen layout.
A loading spinner is shown while the video buffers.

Step 5:

ElevatedButton(

onPressed: () => _switchStream(_hlsUrl),

child: const Text("Play HLS Video"),

ElevatedButton(

onPressed: () => _switchStream(_rtmpUrl),

child: const Text("Play RTMP video"),

This buttons for switching between HLS and RTMP sources dynamically.

Output

Live Streaming in Flutter

Live streaming has become a crucial feature in many modern applications, from social media platforms to e-learning and fitness apps.

With Flutter’s growing ecosystem, developers can now build high-performance live streaming apps across Android and iOS with a single codebase

Conclusion

In this blog, we have explored how to use Live Streaming in flutter.

Live streaming in Flutter using HLS and RTMP gives you the flexibility to build smooth and responsive video apps.

HLS is great for stable, high-quality streaming on all devices, while RTMP is perfect for low-latency, real-time interactions.

With tools like flutter_vlc_player, Flutter makes it easy to implement both. Choose the protocol that best fits your app’s needs and deliver a great live-streaming experience.

You can also check other blogs from here for more knowledge.