Install Flutter UI Kit

The Flutter Video UI kit contains methods that you can use to develop and integrate the video apps for hybrid apps. Before starting with the app development, download the required files and meet all other prerequisites.

To install the UI kit, open your Flutter application and add enx_uikit_flutter as a dependency in the pubspec.yaml file located at the top of the project tree.

enx_uikit_flutter: ^1.0.0

Note: On Android, add the below line under build.gradle within the project section of the pubspec.yaml file.

allprojects {
    repositories {
        goodle()
        jcenter()
        flatDir {
            dirs 'src/main/libs'
            dirs project(':enx_flutter_plugin').file('libs)
        }    } }

Define Permissions

1. Make sure that the app has camera and microphone permissions for enx_uikit_flutter to start a video call.

   • On Android: Open the AndroidManifest.xml file and add the required device permissions to the file:

   <manifest> 
   ... 
   <uses-permission android:name="android.permission.CAMERA" /> 
   <uses-permission android:name="android.permission.INTERNET"/> 
   <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" /> 
   <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> 
   <uses-permission android:name="android.permission.RECORD_AUDIO" /> 
   <uses-permission android:name="android.permission.BLUETOOTH" /> 
   <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" /> 
   <uses-permission android:name="android.permission.WAKE_LOCK" /> 
   ... 
   </manifest>

   • On iOS: Open your project's info.plist to add two new entries with the following keys:

   Key	Type	Value
   Privacy - Camera Usage Description	String	"EnableX needs camera access to work"
   Privacy - Microphone Usage Description	String	"EnableX needs microphone access to work"

2. Obtain the mic and camera permission in Flutter. To fetch these permissions, create a common method for both permissions.

Future<bool> handlePermissionsForCall(BuildContext context) async {
  Map<Permission, PermissionStatus> statuses = await [
    Permission.camera,
    Permission.microphone,
  ].request();
  if (statuses[Permission.camera]!.isPermanentlyDenied) {
    showCustomDialog(context, "Permission Required",
        "Camera Permission Required for Video Call", () {
          Navigator.pop(context);
          openAppSettings();
        });
    return false;
  } else if (statuses[Permission.microphone]!.isPermanentlyDenied) {
    showCustomDialog(context, "Permission Required",
        "Microphone Permission Required for Video Call", () {
          Navigator.pop(context);
          openAppSettings();
        });
    return false;
  }
  if (statuses[Permission.camera]!.isDenied) {
    return false;
  } else if (statuses[Permission.microphone]!.isDenied) {
    return false;
  }
  return true;}
void showCustomDialog(BuildContext context, String title, String message,
    Function okPressed) async {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      // return object of type Dialog
      return AlertDialog(
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0))),
        title: Text(
          title
        ),
        content:  Text(
          message
          
      ),
        actions: <Widget>[
          FlatButton(
            child:
            const Text("OK"),
            onPressed: okPressed(),
          ),        ],      );    },  );}

3. Obtain a token to join an RTC session on the EnableX platform.

   You need to create a token for a video room. This token has an assigned role for the user such as participant, moderator, viewer etc. For more information, see Create a Token.

4. Call the method specified in Step 2 to allow the participants to join the video room.

bool isPermissionGranted = await handlePermissionsForCall(context);