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
• What’s New
  • Release v1.3
  • Release v1.2
• How to use
• Implementation
• UI Customization
• Features
  • Participant List

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.

What’s new with Fluter UIKit v1.3

Flutter UIKit v1.3 is compatible with all versions of Flutter SDK. Therefore, its’ adaptable with any Flutter Application.

What’s new with Fluter UIKit v1.2

• Works with Low Code: iOS UI Kit now works with your Low Code settings configured using Visual Builder through Portal. EnxVideoViewClass() is modified to accept extra key for Low Code URL.
• File Share: Users can now share files among everyone or private with other specific users in-session.
• Participant List: Configuration options for Participant List.

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.

// embedUrl is optional, used to import settings of Low Code
EnxVideoView(token: token,  embedUrl: "Low Code Host URL”,
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) {
		//Here is the reason,  will carry information about cause of disconnection
		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);

To customize Participant List: Use configureParticipantList() method to add different options against each participants in Participant List. Refer example below:

var setting = EnxSetting.instance; 

// Show disconnect option against each participant
setting.configureParticipantList(ParticipantListOption.disconnect); 

// Show private chat option against each participant
setting.configureParticipantList(ParticipantListOption.chat); 

To create extra Button: Use createExtraButton() method to create a list of buttons to use with your own style.

var setting = EnxSetting.instance; 
setting.createExtraButton([ 
	CustomMaterialButton( 
		onPressed: () async {
		}, 
		
		child: Container( 
			padding: const EdgeInsets.all(1.0), 
			decoration: const BoxDecoration(
				shape: BoxShape.circle, 
				color: Colors.blue), 
			child: const Icon( 
				Icons.visibility, 
				color: Colors.white, 
				size: 20)
		), 
	) 
]);

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