Flutter Video UIKit

Flutter Video UIKit helps you develop a Video UI quickly without having to read through vast Flutter SDK Documentation and handling all complexities that comes along the development process. It provides easy way to get started with a Video UI for Hybrid Apps.

Table of Contents

• Overview
• How to use
• Implementation
• UI Customization
• Features

Overview

EnableX introduces Flutter Video UIKit to help integrating EnableX Video quickly into your Hybrid App. Flutter Video UIKit is a wonderful Framework for Video Application Development for Flutter Framework with many customization options to meet your requirement.

You code less, only 3 lines of Code does all the magic of getting a video communication done. Thus, using UIKit helps you get a seamless Video UI with all Device Support in almost 99% reduced effort and time.

How to use Flutter Video UIKit?

In your Flutter application, add the enx_uikit_flutter as a dependency inside your pubspec.yaml file. 

enx_uikit_flutter: ^1.0.0

Note: Add below line in for Android frameworks:

Go to project level build.gradle within all project section

Define Device Permissions

enx_uikit_flutter requires camera and microphone permission to start video call.

For 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> 

For iOS: Open info.plist and add:

• Privacy: Microphone Usage Description, and add a note in the Value column.
• Privacy: Camera Usage Description, and add a note in the Value column.

How to get Camera and mic permission in Flutter?

Create common method for permission: 

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(),
          ),
        ],
      );
    },
  );
}

Call above method as per your requirements after creating token:

bool isPermissionGranted = await handlePermissionsForCall(context);

Follow next steps if Device Permission is granted.

Implementation

Prerequisite

To use the Enx_UIKit_Flutter Framework user must have the following:

• A valid Token to join the room.
• Camera Permission
• Mic Permission

Code a little

• Step#1: Go to your class and import the enx_uikit_flutter 

import 'package:enx_uikit_flutter/enx_uikit_flutter.dart'; 

• Step#2: Initiate EnxVideoView Class: You are to pass a valid Token and handle callback.

EnxVideoView(token: token, 
connectError: (Map<dynamic, dynamic> map) {
Here is the reason,  will carry information about cause of error

  print('connectError' + jsonEncode(map));

},
  disconnect: (Map<dynamic, dynamic> map) {
  print('disconnect' + jsonEncode(map));

UI Customization

To Customize Bottom Option:

var setting = EnxSetting.instance;
 setting.createBottomOption(BottomOption.audio);
 setting.createBottomOption(BottomOption.video);
 setting.createBottomOption(BottomOption.groupChat);
 setting.createBottomOption(BottomOption.disconnect);
 setting.createBottomOption(BottomOption.cameraSwitch);

To Customize Top Option:

var setting = EnxSetting.instance;
 setting.createTopOption(TopOption.userList);
 setting.createTopOption(TopOption.requestFloor);
 setting.createTopOption(TopOption.menu);

Features

• For Participants and Moderators
  • Mute Self-Audio
  • Mute Self-Video
  • Switch Camera
  • Switch Audio Device
  • Group and Private Chat
  • Participant List
  • Switch Layout
  • Disconnect Call
• For Moderators only
  • Record Session
  • Mute Room
  • Mute Participant-Audio
  • Mute Participant-Video
  • Drop Participant from room