How To Build Video Calling App Using Flutter and EnableX

TechTalks

How To Build Video Calling App Using Flutter

How To Make A Video Calling App Using Flutter and EnableX

To make a video calling app can be simple if you build it on a secure and robust communication platform such as EnableX . In this tutorial, you’ll learn how to add group calling function to your video calling Flutter app.

Prerequisites

Before we start on how to make a video calling flutter app, let’s make sure we have the following in your development environment:

For iOS

  • Flutter 2.0.0 or later
  • macOS
  • Xcode (Latest version recommended)

Note: You need an iOS device

For Android

  • Flutter 2.0.0 or later
  • macOS or Windows
  • Android Studio (Latest version recommended)

Note : You can either use an Android simulator or an Android device

Cautions Please run flutter doctor to check if the development environment and the deployment environment are correct.  

Also read: How To Build A Video Streaming App Using Flutter

 

How can I make Video Calling App on Flutter?  

This can easily be done by creating a free developer account with EnableX. Follow the steps given below:  
1. Get an EnableX account to make video calling app. 
2. Create a Flutter project. 
3. Add dependencies. 
4. Generate access token. 
5. Get device permission. 
6. Start video calling.  
7. Run the project. 
8. It’s done, you can go live now. 

Get an EnableX Account To Make A Video Calling App in Flutter

Please sign up for an account with us. It’s absolutely free! Once done, create a project and get the necessary credentials and you are ready to start!

  • Sign up an Account here
  • Create a project
  • Get App ID and App Key. Please refer here on how to get the ID and Key

In order not to get you confused, you might be interested to know some of the common acronyms we used.

EnxRTC-This Class features a versatile method for developers to connect to a room and successfully publish a stream into it. To start using EnableX, an Object must be created using EnxRtc Constructor.

EnxRoom-The EnxRoom is a derived Class from EnxRtc. It handles all room related functions to communicate with EnableX, e.g. Connection of End-Points to EnableX Room, publishing & subscribing of streams etc.

EnxStream -The EnxStream is a derived Class from EnxRtc. It handles all Media Stream related functions to initiate, configure and to transport streams to EnableX Media Servers. It is also used for receiving stream end-points to be played.

EnxPlayerView:  It use to display the video stream on a EnxPlayerview.

Let’s Get Started

Create a Flutter Project

Now that we have all things set up, you are ready to build a group video calling app. First, you need to start creating a new Flutter project You may use Visual Studio Code to create a Flutter project. Do install the Flutter plugin in Visual Studio Code. See Set up an editor. Once done, please follow the steps below:

  1. Select the Flutter: New Project command in View > Command. Enter the project name and press .
  2. Select the location of the project in the pop-up window. Visual Studio Code automatically generates a simple project.

Alternatively, you may also use Android Studio to create a Flutter project. Do install the Flutter plugin in Android Studio. See Set up an editor. Once done, please follow the step below

  1. Click on file Select the New -> New Flutter Project ->Flutter Application

Add Dependencies

Now, pls add the following dependencies in pubspec.yaml based on the following steps:

    1. Add the enx_flutter_plugin dependency to integrate EnableX Flutter SDK. See https://pub.dev/packages/enx_flutter_plugin for the latest version of enx_flutter_plugin.
    2. Add the permission_handler dependency to add the permission handling function.
      
          environment:
          sdk: >=2.7.0<3.0.0 dependencies:
          flutter:
          sdk: flutter# The following adds the Cupertino Icons font to your application.
          # Use with the CupertinoIcons class for iOS style icons.
          cupertino_icons: ^0.1.3
          # Please use the latest version of enx_flutter_plugin
          enx_flutter_plugin: ^1.8.0
          permission_handler: ^3.0.0
      
    3. Install it – You can install packages from the command line:

with Flutter: $ flutter pub get Alternatively, your editor might support flutter pub get. Check the docs from your editor to learn more.

Generate Access Token 

Every user is required to use an Access Token, uniquely to them, to connect to a room. This step is usually done by Rest API’s Call. Do use the following link to create token and roomId https://openapi.enablex.io/video/v1/api-docs/#/Rooms 

Get Device Permission

EnableX Video SDK requires camera and microphone permission to start a video call. Simply follow the following steps to create device permission. Android  Open the AndroidManifest.xml file and add the required device permissions to the file.


<uses-permission android:name="android.permission.READ_PHONE_STATE"/> 
<uses-permission android:name="android.permission.INTERNET" /> 
<uses-permission android:name="android.permission.RECORD_AUDIO" /> 
<uses-permission android:name="android.permission.CAMERA" /> 
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> 
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
 

iOS Open the info.plist and add: Privacy – Microphone Usage Description, and a note in the Value column. Privacy – Camera Usage Description, and a note in the Value column. Note Your application will be able to have a voice call if the Background Mode is enabled. To enable Background Mode, simply following the following steps: Select the app target in Xcode, Click the Capabilities tab to enable Background Modes, and check on Audio, AirPlay, and Picture in Picture.

Handle Errors

iOS black screen Our SDK use PlatformView, you should set io.flutter.embedded_views_preview to YES in your info.plist  

Start Video Calling

We are almost there! Now that we have all the setup and permission handling done, let’s declare some variables needed to manage the state of the call Import packages


import 'package:enx_flutter_plugin/enx_flutter_plugin.dart';
import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';

Define VideoConferenceScreen Class


class VideoConferenceScreen extends StatefulWidget {
@override
_VideoConferenceScreenState createState() => _VideoConferenceScreenState();
}

Define App States

class _VideoConferenceScreenState extends State { static String token = ""; @override void initState() { super.initState(); initPlatformState(); initEnxRtc(); } // Initialize the permission handler Future initPlatformState() async { // Get microphone permission await PermissionHandler().requestPermissions( [PermissionGroup.microphone, PermissionGroup.camera,],], ); }

//initialize ENXRTC

Future initEnxRtc() async {
Map<String, dynamic> map1 = {
'audio': true,
'video': true,
'data': true,
'framerate': 30,
'maxVideoBW': 1500,
'minVideoBW': 150,
'audioMuted': false,
'videoMuted': false,
'name': 'flutter',
'videoSize': map2
};
await EnxRtc.joinRoom(widget.token, map1, null, null);
}

//Add ENXRC handler callbacks


 void _addEnxrtcEventHandlers() {
 EnxRtc.onRoomConnected = (Map<dynamic, dynamic> map) {
 setState(() {
 print('onRoomConnectedFlutter' + jsonEncode(map));
 });
 EnxRtc.publish();
 };

 EnxRtc.onPublishedStream = (Map<dynamic, dynamic> map) {
 setState(() {
 print('onPublishedStream' + jsonEncode(map));
 EnxRtc.setupVideo(0, 0, true, 300, 200);
 });
 };

EnxRtc.onStreamAdded = (Map<dynamic, dynamic> map) {
print('onStreamAdded' + jsonEncode(map));
print('onStreamAdded Id' + map['streamId']);

String streamId;
setState(() {
streamId = map['streamId'];
});
EnxRtc.subscribe(streamId);
};
EnxRtc.onActiveTalkerList = (Map<dynamic, dynamic> map) {
print('onActiveTalkerList ' + map.toString());

final items = (map['activeList'] as List)
.map((i) => new ActiveListModel.fromJson(i));
if(_remoteUsers.length>0){
for(int i=0;i<_remoteUsers.length;i++){ setState(() { _remoteUsers.removeAt(i); }); } } if (items.length > 0) {
for (final item in items) {
if(!_remoteUsers.contains(item.streamId)){
print('_remoteUsers ' + map.toString());
setState(() {
_remoteUsers.add(item.streamId);
});
}
}
print('_remoteUsersascashjc');
print(_remoteUsers);

}
};

EnxRtc.onUserConnected = (Map<dynamic, dynamic> map) {
setState(() {
print('onUserConnected' + jsonEncode(map));
});
};
}

 

Run the project

Finally, let’s run the project J

  1. Run the following command in the root folder to install dependencies.
    flutter packages get
  2. Run the project
    flutter run

Hurray! Now you have a one-to-one video calling. With this app, you users can connect to a room to publish their stream and subscribe to remote streams. In case, you want to find out more, visit EnableX Developer Hub or the GitHub repository.

 

Are you looking for feature-rich APIs to build exciting solutions?

Sign up for free to begin!
Signup Cpaas API