To make a video calling<\/a> app can be simple if you build it on a secure and robust communication platform such as EnableX . In this tutorial, you\u2019ll learn how to add group calling function to your video calling Flutter app.<\/p>\r\n Before we start on how to make a video calling flutter app, let\u2019s make sure we have the following in your development environment:<\/p>\r\n Note<\/u>: You need an iOS device<\/p>\r\n Note<\/u> : You can either use an Android simulator or an Android device<\/p>\r\n Cautions<\/strong> Please run flutter doctor to check if the development environment and the deployment environment are correct. \u00a0<\/p>\r\n Also read<\/strong>: How To Build A Video Streaming App Using Flutter<\/a><\/p>\r\n 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!<\/p>\r\n In order not to get you confused, you might be interested to know some of the common acronyms we used.<\/p>\r\n EnxRTC<\/strong>-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.<\/p>\r\n EnxRoom<\/strong>-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.<\/p>\r\n EnxStream<\/strong> -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.<\/p>\r\n EnxPlayerView<\/strong>:\u202f\u202fIt use\u202fto display the video stream on a\u202fEnxPlayerview.<\/p>\r\n 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<\/a>. Once done, please follow the steps below:<\/p>\r\n Alternatively, you may also use Android Studio<\/strong> to create a Flutter project. Do install the Flutter plugin in Android Studio. See Set up an editor<\/a>. Once done, please follow the step below<\/p>\r\n Now, pls add the following dependencies in pubspec.yaml based on the following steps:<\/p>\r\n with Flutter: $ flutter pub get Alternatively, your editor might support\u202fflutter pub get. Check the docs from your editor to learn more.<\/p>\r\n Every user is required to use an Access Token, uniquely to them, to connect to a room. This step is usually done\u202fby\u202fRest API\u2019s Call<\/a>. Do use the following link to create token\u202fand\u202froomId https:\/\/openapi.enablex.io\/video\/v1\/api-docs\/#\/Rooms\u202f<\/a><\/p>\r\n EnableX Video SDK<\/a> requires camera and microphone permission to start a video call. Simply follow the following steps to create device permission. Android\u202f<\/strong> Open the\u202fAndroidManifest.xml\u202ffile and add the required device permissions to the file.<\/p>\r\n iOS<\/strong> Open the\u202finfo.plist\u202fand add: Privacy – Microphone Usage Description, and a note in the Value column. Privacy – Camera Usage Description, and a note in the Value column. Note<\/strong> 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\u202fCapabilities\u202ftab to enable\u202fBackground Modes, and check\u202fon Audio, AirPlay, and Picture in Picture.<\/p>\r\n iOS black screen<\/strong> Our SDK use\u202fPlatformView, you should set\u202fio.flutter.embedded_views_preview\u202fto\u202fYES\u202fin your\u202finfo.plist \u00a0<\/p>\r\n We are almost there! Now that we have all the setup and permission handling done, let\u2019s declare some variables needed to manage the state of the call Import packages<\/strong><\/p>\r\n Define VideoConferenceScreen Class<\/strong><\/p>\r\n Define App States<\/strong><\/p>\r\n \/\/Add ENXRC handler callbacks<\/strong><\/p>\r\n <\/p>\r\n Finally, let\u2019s run the project J<\/p>\r\n Hurray! Now you have a one-to-one video calling. With this app, you users can connect to a\u202froom\u202fto publish their stream\u202fand subscribe to remote streams. In case, you want to find out more, visit EnableX Developer<\/a><\/strong> Hub or the GitHub<\/a><\/strong> repository.<\/p>\r\n \u00a0<\/p>","protected":false},"excerpt":{"rendered":" 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\u2019ll learn how to add group calling function to your video calling Flutter app. Prerequisites Before we …<\/p>\n","protected":false},"author":26,"featured_media":1807,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[134,122,23,133,93],"tags":[189,195],"acf":[],"yoast_head":"\nPrerequisites<\/h2>\r\n
For iOS<\/strong><\/h3>\r\n
\r\n
For Android<\/strong><\/h3>\r\n
\r\n
\u00a0<\/h2>\r\n\r\n
How can I make Video Calling App in Flutter? <\/strong>\u00a0<\/h3>\r\n
1. Get an EnableX account<\/a> to make your video calling app in Flutter.
2. Create a Flutter project.\u00a0
3. Add dependencies.\u00a0
4. Generate access token.\u00a0
5. Get device permission.\u00a0
6. Start video calling.\u00a0\u00a0
7. Run the project.\u00a0
8. It\u2019s done, you can go live now.\u00a0<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\nGet an EnableX Account To Make A Video Calling App in Flutter<\/h2>\r\n
\r\n
Let\u2019s Get Started<\/h2>\r\n
Create a Flutter Project<\/strong><\/h3>\r\n
\r\n
\r\n
Add Dependencies <\/strong><\/h3>\r\n
\r\n
\r\n
\r\n environment:\r\n sdk: >=2.7.0<3.0.0 dependencies:\r\n flutter:\r\n sdk: flutter# The following adds the Cupertino Icons font to your application.\r\n # Use with the CupertinoIcons class for iOS style icons.\r\n cupertino_icons: ^0.1.3\r\n # Please use the latest version of enx_flutter_plugin\r\n enx_flutter_plugin: ^1.8.0\r\n permission_handler: ^3.0.0\r\n<\/code><\/pre>\r\n<\/li>\r\nGenerate Access Token\u202f<\/strong><\/h3>\r\n
Get Device Permission<\/strong><\/h3>\r\n
\r\n<uses-permission\u00a0<\/span><\/span>android:<\/span><\/span>name<\/span><\/span>=<\/span><\/span>\"<\/span><\/span>android.permission.READ_PHONE_STATE<\/span><\/span>\"<\/span><\/span>\/><\/span><\/span>\u00a0<\/span>
<\/span><uses-permission\u00a0<\/span><\/span>android:<\/span><\/span>name<\/span><\/span>=<\/span><\/span>\"<\/span><\/span>android.permission.INTERNET<\/span><\/span>\"<\/span><\/span>\u00a0\/><\/span><\/span>\u00a0<\/span>
<\/span><uses-permission\u00a0<\/span><\/span>android:<\/span><\/span>name<\/span><\/span>=<\/span><\/span>\"<\/span><\/span>android.permission.RECORD_AUDIO<\/span><\/span>\"<\/span><\/span>\u00a0\/><\/span><\/span>\u00a0<\/span>
<\/span><uses-permission\u00a0<\/span><\/span>android:<\/span><\/span>name<\/span><\/span>=<\/span><\/span>\"<\/span><\/span>android.permission.CAMERA<\/span><\/span>\"<\/span><\/span>\u00a0\/><\/span><\/span>\u00a0<\/span>
<\/span><uses-permission\u00a0<\/span><\/span>android:<\/span><\/span>name<\/span><\/span>=<\/span><\/span>\"<\/span><\/span>android.permission.MODIFY_AUDIO_SETTINGS<\/span><\/span>\"<\/span><\/span>\u00a0\/><\/span><\/span>\u00a0<\/span>
<\/span><uses-permission\u00a0<\/span><\/span>android:<\/span><\/span>name<\/span><\/span>=<\/span><\/span>\"<\/span><\/span>android.permission.ACCESS_NETWORK_STATE<\/span><\/span>\"<\/span><\/span>\u00a0\/><\/span><\/span>\u00a0<\/span>
<\/span>\u00a0<\/code><\/pre>\r\nHandle Errors<\/strong><\/h3>\r\n
Start Video Calling<\/strong><\/h3>\r\n
\r\nimport 'package:enx_flutter_plugin\/enx_flutter_plugin.dart';\r\nimport 'package:flutter\/material.dart';\r\nimport 'package:permission_handler\/permission_handler.dart';\r\n<\/code><\/pre>\r\n\r\nclass VideoConferenceScreen extends StatefulWidget {\r\n@override\r\n_VideoConferenceScreenState createState() => _VideoConferenceScreenState();\r\n}\r\n<\/code><\/pre>\r\nclass _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,],], ); }\r\n\r\n\/\/initialize ENXRTC\r\n\r\nFuture initEnxRtc() async {\r\nMap<String, dynamic> map1 = {\r\n'audio': true,\r\n'video': true,\r\n'data': true,\r\n'framerate': 30,\r\n'maxVideoBW': 1500,\r\n'minVideoBW': 150,\r\n'audioMuted': false,\r\n'videoMuted': false,\r\n'name': 'flutter',\r\n'videoSize': map2\r\n};\r\nawait EnxRtc.joinRoom(widget.token, map1, null, null);\r\n}\r\n<\/code><\/pre>\r\n\r\n void _addEnxrtcEventHandlers() {\r\n EnxRtc.onRoomConnected = (Map<dynamic, dynamic> map) {\r\n setState(() {\r\n print('onRoomConnectedFlutter' + jsonEncode(map));\r\n });\r\n EnxRtc.publish();\r\n };\r\n\r\n EnxRtc.onPublishedStream = (Map<dynamic, dynamic> map) {\r\n setState(() {\r\n print('onPublishedStream' + jsonEncode(map));\r\n EnxRtc.setupVideo(0, 0, true, 300, 200);\r\n });\r\n };\r\n\r\nEnxRtc.onStreamAdded = (Map<dynamic, dynamic> map) {\r\nprint('onStreamAdded' + jsonEncode(map));\r\nprint('onStreamAdded Id' + map['streamId']);\r\n\r\nString streamId;\r\nsetState(() {\r\nstreamId = map['streamId'];\r\n});\r\nEnxRtc.subscribe(streamId);\r\n};\r\nEnxRtc.onActiveTalkerList = (Map<dynamic, dynamic> map) {\r\nprint('onActiveTalkerList ' + map.toString());\r\n\r\nfinal items = (map['activeList'] as List)\r\n.map((i) => new ActiveListModel.fromJson(i));\r\nif(_remoteUsers.length>0){\r\nfor(int i=0;i<_remoteUsers.length;i++){ setState(() { _remoteUsers.removeAt(i); }); } } if (items.length > 0) {\r\nfor (final item in items) {\r\nif(!_remoteUsers.contains(item.streamId)){\r\nprint('_remoteUsers ' + map.toString());\r\nsetState(() {\r\n_remoteUsers.add(item.streamId);\r\n});\r\n}\r\n}\r\nprint('_remoteUsersascashjc');\r\nprint(_remoteUsers);\r\n\r\n}\r\n};\r\n\r\nEnxRtc.onUserConnected = (Map<dynamic, dynamic> map) {\r\nsetState(() {\r\nprint('onUserConnected' + jsonEncode(map));\r\n});\r\n};\r\n}\r\n<\/code><\/pre>\r\nRun the project<\/strong><\/h3>\r\n
\r\n
flutter packages get<\/code><\/pre>\r\n<\/li>\r\nflutter run<\/code><\/pre>\r\n<\/li>\r\n<\/ol>\r\n