Try Live Demo

Ant Media’s Flutter WebRTC SDK helps you with building your Flutter application that can publish and play WebRTC broadcasts with just a few lines of code. It is very easy to use and integrate. Moreover, Ant Media does not charge extra for Flutter WebRTC SDK and other SDKs. If there’s anything else we can do for our developer friends, please let us know.

This blog post explains how to configure Flutter WebRTC SDK and run the sample applications.

Pre-requisite for Flutter WebRTC app development

Software requirements

  • Android Studio (For Android)
  • XCode (For iOS)

Please note, you can also run the projects through the terminal or command-line, however, for better debugging, consider using Android Studio or XCode. This document considers the use of Android Studio for building and running applications.

How to set up your first application on Flutter

  1. Install Flutter, please follow the installation steps mentioned here Install Flutter.
  2. Install the Android Studio, please follow the installation steps mentioned here Install Android Studio.
  3. Add the Dart language plugins and Flutter extensions to Android Studio. Please follow the below operating system-specific installation instructions.
    1. For macOS, use the following instructions:
      1. Start Android Studio
      2. Open plugin preferences (Preferences > Plugins as of v3.6.3.0 or later)
      3. Select the Flutter plugin and click Install
      4. Click Yes when prompted to install the Dart plugin
      5. Click Restart when prompted
    2. For Linux or Windows, use the following instructions:
      1. Start Android Studio
      2. Open plugin preferences (File > Settings > Plugins)
      3. Select Marketplace, select the Flutter plugin and click Install
      4. Click Yes when prompted to install the Dart plugin
      5. Click Restart when prompted
  4. To verify the Flutter installation, please create and sample an app and build it by following the instructions provided here Create a Flutter project.

Download and run the WebRTC sample projects

Download the sample Flutter WebRTC projects

Configuration of the sample project

Open SDK in Android studio, and make sure you have installed the Flutter and Dart plugins.

Make sure that the paths of Flutter and Dart SDK are correctly configured in Android Studio.

File > Settings > Languages & Frameworks

Prerequisite for Flutter development

If these plugins have been installed and the locations of Flutter and Dart SDK are configured correctly, then the options to run the samples will appear automatically after source code indexing. Please refer to the below screenshot.

 Flutter WebRTC development

Install dependencies and run sample project

In the project navigator, you will find two folders named samples and examples. In the example folder, there is an example project which uses the ant_media_flutter dependency with all options (Publish, Play, P2P and Conference) to test.

In the samples folder, there are 4 separate projects to test publish, play, peer and conference individually.

All projects use Ant Media Flutter dependency which is added in pubspec.yaml file.

ant_media_flutter: ^0.0.2

Click on the pub get button to install the dependency in the project. Pub get button appears only when pubspec.yaml file is opened in the editor.

Run the sample Flutter WebRTC apps

To run the sample apps on Android, you need to connect the Android device with your workstation. For that, make sure you have enabled the developer options and USB debugging on your device. On Android 4.1 and lower, the Developer options screen is available by default. To get the developer options screen on Android 4.2 and higher, follow the below steps:

  • Open the Settings app
  • Select System
  • Select About phone
  • Scroll to the build number and tap it 7 times
  • Return to the previous screen to find Developer options near the bottom
  • Scroll down and enable USB debugging

If USB debugging is enabled on your device, then your device name will automatically be available in the list of devices.

Just select the device and select the sample project from the target list and click on the run button. The Gradle task will start and wait for some time until the app builds. After the building is complete, a confirmation popup will come to your device for installation.

p6us2BbRBh1Qq4PbqM6 GQ4HblTx3DOBI4Kgp9ssLrdEBNBGJbuegyqvr PfbcLrI3xB1wbxYqVbsc4q78adKO hQxLgrAchh0MVoHmlvH d ZYy15kjBhUuJkhWHI PlYabSnXqts2D7Lau2Q

Please follow the below instructions for running specific sample apps

Running Publish Sample App

Select the Publish app from the target list and click the Run button. Once the app is running, enter the server IP address. For entering the IP address please follow the below steps.

  • Tap on the Setting icon in the top right corner of the application.
  • Enter the Server IP as ws://ant_media_server_address:ip/WebRTCAppEE/websocket
  • Tap the ‘Set Server Ip’ button.

Running Publish Sample App

Select Publish list item.

Running Publish Sample Flutter WebRTC App

Enter the stream Id which you want to publish.

ant media server example

Choose the publishing source. Please note, for the iOS app screen recording option, records the app’s UI only, while the Android app records the whole complete device screen.

choosing the publishing source

To verify whether the stream is published successfully or not,  please open the web panel of Ant Media Server (e.g http://server_ip:5080) and check for the newly created stream. You can also quickly play the stream via web player https://your_domain:5443/WebRTCAppEE/player.html

Running Play Sample App

Select the Play app from the target list and click the Run button. Once the app is running, enter the server IP address. For entering the IP address please follow the below steps.

  • Tap on the Setting icon in the top right corner of the application.
  • Enter the Server IP as ws://ant_media_server_address:ip/WebRTCAppEE/websocket
  • Tap the ‘Set Server Ip’ button.

Running Play Sample App

Before playing, make sure that there is a stream that is already publishing to the server with the same stream id in your streamId parameter (You can quickly publish to the Ant Media Server via https://your_domain:5443/WebRTCAppEE).

Select Play from the list item.

Running Play Sample flutter webrtc AppEnter the stream Id which you want to play.

Running Ant Media Server Sample App

Running Peer Sample App

Select the Peer app from the target list and click the Run button. Once the app is running, enter the server IP address. For entering the IP address please follow the below steps.

  • Tap on the Setting icon in the top right corner of the application.
  • Enter the Server IP as ws://ant_media_server_address:ip/WebRTCAppEE/websocket
  • Tap the ‘Set Server Ip’ button.

Running Peer Sample App

Select P2P from the list item.

Running Peer to peer Sample App

Enter the stream Id which you want to join in p2p.

Running Peer Sample App stream ıd

When there is another peer connected to the same stream ID via Android, iOS, or the web, P2P communication will be established and you can talk to each other. You can quickly connect to the same stream id via https://your_domain:5443/WebRTCAppEE/peer.html

Running Conference Sample App

Select the Conference app from the target list and click the Run button. Once the app is running, enter the server IP address. For entering the IP address please follow the below steps.

  • Tap on the Setting icon in the top right corner of the application.
  • Enter the Server IP as ws://ant_media_server_address:ip/WebRTCAppEE/websocket
  • Tap the ‘Set Server Ip’ button.

Running Conference Sample App

Select Conference from list item.

Ant Media Server WebRTC flutter conference sample app

Enter the stream Id and room id which you want to join for the conference.

WebRTC flutter stream and room id.

Now, you can quickly connect to the same stream id via https://your_domain:5443/WebRTCAppEE/conference.html

Using WebRTC Flutter SDK

Before moving forward with using WebRTC Flutter SDK, we highly recommend using the sample projects to get started with your application. It’s good to know the dependencies and how it works in general.

Install ant_media_flutter package from pub.dev

ant_media_flutter: ^*.*.*   # latest version

Initialise imports and request permission from Flutter-SDK

import 'package:ant_media_flutter/ant_media_flutter.dart';
AntMediaFlutter.requestPermissions();
  
if (Platform.isAndroid) {
    AntMediaFlutter.startForegroundService();
  }

Set stream Id and server URL

The method below is used to publish a stream.

 // Replace your own domain name  and port number with this domain name and port. 
String serverUrl = “wss://domain:port/WebRTCAppEE/websocket”;

// Set stream id 
String _streamId = 'testStream';

How to publish a stream

The method below is used to publish a stream.

AntMediaFlutter.publishWith( _streamId, false, serverUrl, context);

How to play a stream

The method below is used to play a stream.

AntMediaFlutter.playWith(_streamId, serverUrl, false, context);

 How to use P2P

The method below is used to join a room.

AntMediaFlutter.starPeerConnectionwithStreamId( _streamId, settedIP, false, context);

How to use conference

The method below is used for conference calls.

AntMediaFlutter.startConferenceWithStreamId(_streamId, _roomId, settedIP, false, context);

That’s how easy it is to build your own Flutter app using Ant Media’s Flutter WebRTC SDK. If you encounter problems while developing your own streaming app using the Flutter WebRTC SDK, you can contact us immediately. We would be happy to help you.

Use Ant Media Server for free for 100 hours every month

You don’t need to pay anything in advance. Just get started and only pay what you use. Ant Media provides 100 hours of free usage every month and you’ll have Ant Media Server Flutter WebRTC SDK, and everything by signing up with zero upfront cost. So you can start building your own Flutter streaming app now.

You can get started now.


Hamit Demir

As a B2B tech marketer, Hamit Demir works as a solution expert at Ant Media. He has experience in SEO, Demand Generation, Paid Search & Paid Social, and Content Marketing. He spends his free time learning new things. He loves to talk about streaming and especially WebRTC.