MediaSFU Flutter SDK #

Ship production-ready voice, video, and AI communication in minutes — not months.

MediaSFU gives you prebuilt, fully-featured event room components with real-time video/audio, screen sharing, recording, chat, polls, whiteboards, real-time translation, and more. Drop them into your Flutter app with a few lines of code and go live on all 6 platforms.

Why MediaSFU? #

🔥 What Makes MediaSFU Different #

⚠️ Important: Backend Server Required #

MediaSFU is a frontend SDK that requires a backend media server to function.

# Option 1: Use MediaSFU Cloud
# Sign up at https://www.mediasfu.com and get your API credentials

# Option 2: Self-host with MediaSFU Open
git clone https://github.com/MediaSFU/MediaSFUOpen
cd MediaSFUOpen
docker-compose up -d

📖 MediaSFU Cloud Documentation → 📖 MediaSFU Open Repository →

📖 Table of Contents #

• Quick Start
• Installation
• Platform Support
• Platform Features
• Prebuilt Event Rooms
• Modern UI Components
• Usage Examples
• Customization
• Self-Hosting / Community Edition
• Advanced Features
• SDKs for Every Framework
• Detailed Documentation

🚀 Quick Start #

Three steps. Under 5 minutes. First video call live.

1. Install

flutter pub add mediasfu_sdk

2. Import & Build

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MediasfuGeneric(
        options: MediasfuGenericOptions(
          credentials: Credentials(
            apiUserName: "yourUsername",
            apiKey: "yourAPIKey",
          ),
        ),
      ),
    );
  }
}

3. Run

flutter run

That's it. You have a fully-featured video conferencing room with screen sharing, chat, recording, and more — running on any platform Flutter supports.

Want to try without a server? Use demo mode:

MediasfuGeneric(
  options: MediasfuGenericOptions(
    useLocalUIMode: true,
    useSeed: true,
    seedData: SeedData(member: "DemoUser", eventType: EventType.conference),
  ),
)

📦 Installation #

flutter pub add mediasfu_sdk

Requirements #

• Flutter: 3.3.3 or higher
• Dart: 3.3.3 or higher

🌍 Platform Support #

One codebase. Six platforms. No compromises.

Each platform requires specific permissions and configurations. See the Platform Setup Guide for detailed instructions:

• Android Setup — Camera, microphone, internet permissions
• iOS Setup — Camera, microphone usage descriptions
• macOS Setup — Entitlements for camera, microphone, network
• Web Setup — HTTPS for production; browser permissions
• Windows / Linux Setup — Standard Flutter desktop setup

Optional Dependencies #

Some features require platform-specific dependencies. If installing from pub.dev, add these to your app's pubspec.yaml based on your target platforms:

# pubspec.yaml - Add as needed:

# Virtual Backgrounds (Android/iOS only)
google_mlkit_selfie_segmentation: ^0.8.0

# Web platform enhancements (Web only)
web: ^1.1.1
dart_webrtc: ^1.4.6

Note: If you clone from GitHub, all dependencies are already included. The pub.dev version excludes platform-specific deps so it shows support for all platforms.

✨ Platform Features #

Everything you need for enterprise-grade real-time communication — included at $0.10/1K min:

🎥 Video & Audio #

• Multi-party video conferencing with adaptive quality
• Screen sharing with real-time annotation
• Virtual backgrounds and video effects (Android/iOS)
• Audio-only participant support

🎤 Real-time Translation 🌍 #

• Speak in any language — The system auto-detects what language you're speaking
• Listen in any language — Hear others translated to your preferred language in real time
• Live transcription — See real-time transcripts during meetings
• 50+ languages supported — True borderless communication
• No interpreters. No delay. Works with voice, video, and chat.

🤖 AI-Powered Features #

• AI voice agents that answer, resolve, and escalate
• Multimodal AI with voice + vision capabilities
• AI-generated meeting summaries and transcription
• Intelligent call routing and warm handoffs
• Voice cloning options with custom TTS configurations

👥 Participant Management #

• Panelists Mode — Designate speakers in webinars with audience Q&A
• Individual Permissions — Granular per-participant control (video/audio/screen/chat)
• Group Permissions — Apply permission templates to participant groups
• Waiting room with manual admit
• Co-host delegation with configurable responsibilities
• Breakout rooms for focused discussions

📊 Engagement Tools #

• Live polls with real-time results
• In-meeting chat (direct & group)
• Collaborative whiteboards

🎬 Recording & Analytics #

• Cloud recording with track-based customization
• Watermarks, name tags, custom backgrounds
• Real-time call analytics

🔒 Security & Control #

• End-to-end encryption option
• Domain-locked API keys
• Managed events with time/capacity limits
• Abandoned participant handling

🏛️ Prebuilt Event Rooms #

Choose the room type that fits your use case — or use MediasfuGeneric for maximum flexibility:

All prebuilt components share the same options interface:

MediasfuGenericOptions(
  // Authentication
  credentials: Credentials(apiUserName: "user", apiKey: "key"),
  
  // Connection
  localLink: "",                    // Self-hosted server URL
  connectMediaSFU: true,            // Toggle auto-connection
  
  // Customization
  preJoinPageWidget: customPreJoin, // Custom pre-join page
  customVideoCard: customVideoCard, // Custom video display
  customAudioCard: customAudioCard, // Custom audio display
  customMiniCard: customMiniCard,   // Custom mini display
  
  // Advanced
  returnUI: true,                   // Set false for headless mode
  useLocalUIMode: false,            // Demo/local mode
  seedData: seedData,               // Pre-populate for demos
)

🎨 Modern UI Components #

ModernMediasfuGeneric is the premium, theme-aware variant featuring:

• Glassmorphism design with backdrop blur effects
• Dark/Light theme with automatic system detection
• Smooth animations and micro-interactions
• Premium color system with gradient support
• Responsive layouts for every screen size

import 'package:mediasfu_sdk/mediasfu_sdk.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ModernMediasfuGeneric(
      options: ModernMediasfuGenericOptions(
        credentials: Credentials(apiUserName: "user", apiKey: "key"),
        // Theme automatically adapts to system preference
      ),
    );
  }
}

Modern Components Available #

💡 Usage Examples #

Basic Conference Room #

import 'package:mediasfu_sdk/mediasfu_sdk.dart';

class ConferenceApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MediasfuConference(
      options: MediasfuConferenceOptions(
        credentials: Credentials(
          apiUserName: "yourUsername",
          apiKey: "yourAPIKey",
        ),
      ),
    );
  }
}

Headless Mode (Build Your Own UI) #

Use MediaSFU as a pure backend engine while rendering a completely custom UI:

import 'package:mediasfu_sdk/mediasfu_sdk.dart';

class CustomApp extends StatefulWidget {
  @override
  State<CustomApp> createState() => _CustomAppState();
}

class _CustomAppState extends State<CustomApp> {
  final ValueNotifier<MediasfuParameters?> _params = ValueNotifier(null);

  void _updateParams(MediasfuParameters? params) {
    _params.value = params;
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        MediasfuGeneric(
          options: MediasfuGenericOptions(
            credentials: Credentials(apiUserName: "user", apiKey: "key"),
            returnUI: false, // Headless mode — no default UI rendered
            updateSourceParameters: _updateParams,
          ),
        ),
        ValueListenableBuilder<MediasfuParameters?>(
          valueListenable: _params,
          builder: (context, params, _) {
            if (params == null) return CircularProgressIndicator();
            return MyCustomMeetingUI(parameters: params);
          },
        ),
      ],
    );
  }
}

Custom Video Cards #

VideoCardType myCustomVideoCard({
  required Participant participant,
  required Stream stream,
  required double width,
  required double height,
  // ... other parameters
}) {
  return Container(
    width: width,
    height: height,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(16),
      border: Border.all(color: Colors.purple, width: 2),
    ),
    child: ClipRRect(
      borderRadius: BorderRadius.circular(16),
      child: VideoCard(
        options: VideoCardOptions(
          participant: participant,
          videoStream: stream.stream,
        ),
      ),
    ),
  );
}

// Use it
MediasfuGeneric(
  options: MediasfuGenericOptions(
    credentials: credentials,
    customVideoCard: myCustomVideoCard,
  ),
)

🎨 Customization #

UI Overrides #

Override specific UI components while keeping the defaults for everything else:

final uiOverrides = MediasfuUICustomOverrides(
  mainContainer: ComponentOverride<MainContainerComponentOptions>(
    render: (context, options, defaultBuilder) {
      return Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(24),
          border: Border.all(color: Colors.purple, width: 3),
        ),
        child: defaultBuilder(context, options),
      );
    },
  ),
);

MediasfuGeneric(
  options: MediasfuGenericOptions(
    credentials: credentials,
    uiOverrides: uiOverrides,
  ),
)

Available Override Keys #

🏠 Self-Hosting / Community Edition #

For complete control over your infrastructure:

// Self-hosted only
MediasfuGeneric(
  options: MediasfuGenericOptions(
    localLink: "https://your-mediasfu-server.com",
    connectMediaSFU: false,
  ),
)

// Hybrid mode — local server + MediaSFU cloud features
MediasfuGeneric(
  options: MediasfuGenericOptions(
    localLink: "https://your-server.com",
    connectMediaSFU: true,
    credentials: Credentials(apiUserName: "user", apiKey: "key"),
  ),
)

🌐 Advanced Features #

sourceParameters — The Power API #

Access all MediaSFU functionality programmatically through sourceParameters:

// Get all video/audio streams
final videoStreams = params.allVideoStreams;
final audioStreams = params.allAudioStreams;

// Control media
params.clickVideo(ClickVideoOptions(parameters: params));
params.clickAudio(ClickAudioOptions(parameters: params));
params.clickScreenShare(ClickScreenShareOptions(parameters: params));

// Toggle modals
params.updateIsParticipantsModalVisible(true);
params.updateIsMessagesModalVisible(true);
params.updateIsRecordingModalVisible(true);

// Access room state
final participants = params.participants;
final roomName = params.roomName;
final isRecording = params.recordStarted;

Panelists Mode (Webinars) #

Designate specific participants as panelists who can speak, while others remain audience members:

final panelists = params.panelists;
final panelistsFocused = params.panelistsFocused;

// Events: panelistsUpdated, addedAsPanelist, removedFromPanelists, panelistFocusChanged
params.updateIsPanelistsModalVisible(true);

Individual & Group Permissions #

Fine-grained control over what each participant can do:

// Permission levels: "0" Standard, "1" Elevated (co-host), "2" Host (full control)
// Configurable per participant: video, audio, screen sharing, chat access
final permissionConfig = params.permissionConfig;
params.updateIsPermissionsModalVisible(true);

Real-time Translation 🌍 #

Participants speak in their native language and listen in any language — powered by live AI translation:

// Translation is configured via TranslationSettingsModal (ModernMediasfuGeneric)
// Events: translation:roomConfig, translation:languageSet, translation:subscribed,
//         translation:transcript, translation:speakerOutputChanged
final translationMeta = params.translationMeta;
final translationConfig = params.translationConfig;

• 50+ languages — real-time speech translation during live calls
• No interpreters, no delay — AI-powered, built into every call
• Voice cloning options — advanced TTS with custom voice configurations

Virtual Backgrounds (Android/iOS) #

# Add to your pubspec.yaml (Android/iOS only):
google_mlkit_selfie_segmentation: ^0.8.0

Virtual backgrounds are automatically available in MediaSettingsModal. Users can select blur or image backgrounds. See Platform Setup for ML Kit configuration.

Get Participant Media #

final videoStream = getParticipantMedia(
  options: GetParticipantMediaOptions(
    participantId: 'producer-123',
    mediaType: 'video',
    parameters: params,
  ),
);

🛠️ SDKs for Every Framework #

MediaSFU isn't just Flutter. The same communication platform is available across 7 frameworks — same API surface, same capabilities, same pricing:

Plus native apps for Windows, Linux, macOS, iOS, Android, and Web. Not Electron — real native apps.

📖 Detailed Documentation #

For comprehensive documentation including full API reference, 200+ methods, socket event handling, recording configuration, breakout rooms, whiteboard integration, troubleshooting, and more:

📄 See README_DETAILED.md

🔗 Links #

• Website: mediasfu.com
• Documentation: mediasfu.com/flutter
• API Documentation: mediasfu.com/developers
• MediaSFU Open: github.com/MediaSFU/MediaSFUOpen
• Sandbox: mediasfu.com/sandbox
• Community Forum: mediasfu.com/forums

📄 License #

MIT © MediaSFU

Built with ❤️ by MediaSFU
_{Voice · Video · AI · Translation · 6 Platforms · $0.10/1K min}