DEV Community

loading...
Cover image for How To Build Video Calling App Using Flutter and EnableX
EnableX

How To Build Video Calling App Using Flutter and EnableX

jasonwills343 profile image Jason Wills Originally published at enablex.io ・5 min read

Building an engaging 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, 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

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.
  2. See https://pub.dev/packages/enx_flutter_plugin for the latest version of enx_flutter_plugin.

    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" /> 
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

Define VideoConferenceScreen Class

class VideoConferenceScreen extends StatefulWidget {
@override
_VideoConferenceScreenState createState() => _VideoConferenceScreenState();
}
Enter fullscreen mode Exit fullscreen mode

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,],], ); }
Enter fullscreen mode Exit fullscreen mode

//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);
}
Enter fullscreen mode Exit fullscreen mode

//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));
});
};
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  1. Run the project
flutter run
Enter fullscreen mode Exit fullscreen mode

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.

The post How To Build Video Calling App Using Flutter and EnableX appeared first on EnableX Insights.

Discussion (2)

pic
Editor guide
Collapse
songhue profile image
Songhue Try

thank for sharing

Collapse
jasonwills343 profile image