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:
- Select the Flutter: New Project command in View > Command. Enter the project name and press .
- 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
- 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:
- 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.
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 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
- Run the following command in the root folder to install dependencies.
flutter packages get
- 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.
The post How To Build Video Calling App Using Flutter and EnableX appeared first on EnableX Insights.
The solution is available for trial. Sign up here
Top comments (2)
thank for sharing
Welcome!