How To Build Video Calling App Using Flutter and EnableX

TechTalks

Build Video App in 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 Flutter app.

Prerequisites

Before we start on how to make a video calling 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 Android simulator or an Android device

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

Get an EnableX Account To Make A Video Calling App

Please sign up for an account with us. Its 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 GitHub repository.

Avatar

Know more