📸 Live MJPEG Streaming in Flutter: A Complete Guide

3 min readFeb 14, 2025

🚀 Introduction

Are you looking to integrate real-time MJPEG video streaming into your Flutter app? Whether you’re working with security cameras, IoT devices, or live monitoring applications, MJPEG streaming is a powerful and efficient way to handle video feeds. In this tutorial, we’ll explore how to use the mjpeg_stream package to display real-time video in Flutter effortlessly. 🎥📡

🔥 Why MJPEG Streaming?

✅ Easy Integration — Works seamlessly with IP cameras & MJPEG sources. ✅ Customizable UI — Add overlays, watermarks, and blur sensitive content. ✅ Cross-Platform — Works on Android, iOS, and Web.
✅ Low Latency — Ensures near-instant live streaming
✅ Lightweight & Efficient — No need for heavy video codecs like H.264 or WebRTC.

📦 Getting Started

🔹 Step 1: Install the Package

To add mjpeg_stream to your Flutter project, run:

flutter pub add mjpeg_stream

🔹 Step 2: Import the Package

import 'package:mjpeg_stream/mjpeg_stream.dart';

🔹 Step 3: Implement MJPEG Streaming

import 'package:flutter/material.dart';
import 'package:mjpeg_stream/mjpeg_stream.dart';

void main() {
  runApp(MyApp());
}class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("MJPEG Stream Example")),
        body: Center(
          child: MJPEGStreamScreen(
            streamUrl: "http://your-ip-camera-url/video.mjpg",
            width: 300.0,
            height: 200.0,
            fit: BoxFit.cover,
            showLiveIcon: true,
            showWatermark: true,
            watermarkText: "My Stream",
            blurSensitiveContent: false,
          ),
        ),
      ),
    );
  }
}

🎨 Customization Options

Property Type Default Description streamUrl String Required MJPEG stream URL. width double double.infinity Stream display width. height double 300.0 Stream display height. fit BoxFit BoxFit.cover Controls how the image fits. showLiveIcon bool false Displays a "LIVE" badge. showWatermark bool false Adds a watermark overlay. watermarkText String "MJPEG Stream" Custom watermark text. blurSensitiveContent bool false Blurs sensitive content.

🚀 Advanced Features

🎭 Blur Sensitive Content

blurSensitiveContent: true,

🏷️ Adding a Watermark

showWatermark: true,
watermarkText: "Protected Stream",

🎬 Showing a Live Indicator

showLiveIcon: true,

🛠 Troubleshooting

🔴 Stream Not Loading? Ensure your MJPEG source is accessible. ⚡ Slow Performance? Try a lower resolution stream. 💥 App Crashing? Implement better error handling.

🌍 Use Cases

🎥 IP Camera Streaming
🚨 Security & Surveillance
📡 Remote Monitoring & IoT
📺 Live Dashboard Displays

🔗 Resources

📦 Pub.dev: MJPEG Stream Package
🔗 GitHub: MJPEG Stream Repo
🎥 Demo Video: MJPEG Stream in Action

💰 Support My Work

If you found this tutorial useful, consider supporting my work:

☕ Buy Me a Coffee: Support Here