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 in Flutter?
1. Get an EnableX account to make your video calling app in Flutter.
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:
- 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.
- 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 - 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 the GitHub repository.
