Android Video UIKit

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

Table of Contents

• Overview
• What’s New with v1.2?
• How to use
• Implementation
• Features

Overview

EnableX introduces Android Video UIKit to help integrating EnableX Video quickly into your Android Native App. Android Video UIKit is a wonderful Framework for Video Application Development for Android Platform (Phone, Tab etc.) 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.

UIKit freamwork is a 100% native layout and devices specific layout. It has auto adjustment of UI based on device and its orientation.

What’s new with Android UIKit v1.2?

• Works with Low Code: Android UI Kit now works with your Low Code settings configured using Visual Builder through Portal. EnxVideoView() 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.
• Annotation: User can now annotate on stream and remote users can view annotated streams live.
• Participant List: Configuration options for Participant List.
• Screen Share: Users can now start screen share and view shared screens by others.
• Canvas Streaming: Canvas Object Streaming features is also available now.

How to use Android Video UIKit?

Follow these steps:

• Step#1: Download latest Android SDK (Android Archive Library)
• Step#2: Download latest Android UIKit (Android Archive Library)
• Step#3: Add downloaded AAR files to the lib folder.
• Step#4: Go to your Project’s root directory and edit build.gradle by placing the following code in the allprojects.repositories section:

allprojects{ 
repositories { 
		flatDir { 
			dirs 'libs' 
		} 
	} 
}

• Step#5: Go to your application level build.gradle file and add the following code in the dependencies section:

implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'], exclude: []) 
implementation('io.socket:socket.io-client:1.0.1') { 
	exclude group: 'org.json', module: 'json' 
} 
implementation 'org.webrtc:google-webrtc:1.0.32006' 

Define Device Permissions

Define permissions in AndroidMainfest.xml as shown below:

<uses-permission android:name="android.permission.CAMERA" /> 
<uses-permission android:name="android.permission.RECORD_AUDIO" /> 
<uses-permission android:name="android.permission.INTERNET" /> 
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> 
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
<uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30"/> 
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" android:maxSdkVersion="30"/> 
<uses-permission android:name="android.permission.WAKE_LOCK" /> 
<uses-permission android:name="android.permission.BLUETOOTH_SCAN"android:usesPermissionFlags="neverForLocation"/> 
<uses-permission android:name="android.permission.BLUETOOTH_ADVERTISE" /> 
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" /> 

Implementation

Prerequisite

To use the Enx_UIKit_Android 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 Activity and import the packages shown below:

import com.enablex.enxuikit_android.observer.EnxVideoStateObserver 
import com.enablex.enxuikit_android.view.EnxVideoView 

• Step#2: Initialize the EnxVideoView class and then add the reference of EnxVideoView to your layout as shown below:

// You need to get Token to get connected
// Refer:https://www.enablex.io/developer/video-api/server-api/rooms-route/#create-token

// Initialize EnxVideoView
enxVideoView = EnxVideoView(this,token,this, "Low Code Embed URL")
// Low Code Embed URL is optional, in case you want to import settings.

// Set Layout Parameters
val rlp = RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT)

// Add VideoView to your Layout
this.addContentView(enxVideoView, rlp) 

• Step#3: Handle Orientation

To handle Orientation please follow below 2 steps:

• Add the property given below to your activity inside AndroidMainfest.xml file:

android:configChanges="orientation|screenSize|keyboardHidden"

• Overide onConfigurationchanged function and call below function

enxVideoView?.configurationChanged(newConfig)

override fun onConfigurationChanged(newConfig: Configuration) { 
    super.onConfigurationChanged(newConfig) 
    enxVideoView?.configurationChanged(newConfig) 
} 

• Step#4: Handle Back Button

To handle the back button please follow step:

• Overide onBackPressed function and call below function    

override fun onBackPressed() {
    enxVideoView?.backPressed() 
}

• Step#5: Customize Bottom Bar

You can design the Bottom Bar according to you needs and you can set the desired sequence by passing a list of EnxButton to configureBottomOptionList function. While creating your own button use the setImage function and pass two images (first image for normal state and second image for selected state) except the disconnect button as it takes a single parameter for the image. For more detail, please refer to below code snippet:

val setting = EnxSetting.getInstance(this) 

// Enumerated values to use for BottomOption are
// AUDIO, VIDEO, SWITCH_CAMERA, SWITCH_AUDIO, GROUP_CHAT, DISCONNECT 

val audioButton = EnxButton(this,EnxSetting.BottomOption.AUDIO.tag) 
audioButton.setImage(R.drawable.audio_on,R.drawable.audio_off) 

val chatButton = EnxButton(this,EnxSetting.BottomOption.GROUP_CHAT.tag) 
chatButton.setImage(R.drawable.group_chat,R.drawable.group_chat_noti) 

val disconnectButton = EnxButton(this,EnxSetting.BottomOption.DISCONNECT.tag) 
disconnectButton.setImage(R.drawable.end_call_new) 
 
setting.configureBottomOptionList(listOf<EnxButton>(videoButton, cameraSwitch, chatButton, audioButton, disconnectButton)) 

• Steps#6 Customize Top Bar

You can design the Top Bar according to your needs and they can set the desired sequence by passing a list of EnxButton to configureTopOptionList function. For example, while creating your own button for REQUEST_FLOOR use the setImage function and pass two images (first image for normal state and second image for selected state). But for USER_LIST and MENU setImage function takes a single parameter. For details, please follow the below code snippet:

val setting = EnxSetting.getInstance(this)

// Enumerated values to use for TopOption are
// USER_LIST, MENU, REQUEST_FLOOR 

val userList = EnxButton(this,EnxSetting.TopOption.USER_LIST.tag) 
userList.setImage(R.drawable.participant_icon) 

val webinarButton = EnxButton(this,EnxSetting.TopOption.REQUEST_FLOOR.tag) 
webinarButton?.setImage(R.drawable.notification_icon, R.drawable.notification_icon_selected) 

val menu = EnxButton(this,EnxSetting.TopOption.MENU.tag) 
menu.setImage(R.drawable.ic_more_vert)  

 
setting.configureTopOptionList(listOf<EnxButton>(menu,userList, webinarButton)) 

• Steps#7 Set Background Color of Bottom Bar

You can update the background color of Bottom Bar by passing resource id of the color to updateBottomOptionView function.

val setting = EnxSetting.getInstance(this) 
setting.updateBottomOptionView(R.color.white) 

• Steps#8 Set Background Color of Top Bar

You can update the background color of Top Bar by passing resource id of the color to updateTopOptionView function.

val setting = EnxSetting.getInstance(this) 
setting.updateTopOptionView(R.color.white) 

• Steps#9 Customize Participant List Options

You can add additional action against each participant in the participant list.

val setting = EnxSetting.getInstance(this) 

val audioButton = EnxButton(this,EnxSetting.PartcipantList.AUDIO.tag) 
audioButton.setImage(R.drawable.audio_on,R.drawable.audio_off) 
 
val videoButton = EnxButton(this,EnxSetting.PartcipantList.VIDEO.tag) 
videoButton.setImage(R.drawable.video_on,R.drawable.video_off) 
 
val chatButton = EnxButton(this,EnxSetting.PartcipantList.CHAT.tag) 
chatButton.setImage(R.drawable.chat_icon) 
 
val dissButton = EnxButton(this,EnxSetting.PartcipantList.DISCONNECT.tag) 
dissButton.setImage(R.drawable.end_call_new) 

 setting.configureParticipantList(listOf<EnxButton>(audioButton,videoButton,chatButton, dissButton)) 

// Following Enumerated data may also be used to creation action buttons
// in Participatn list, viz. AUDIO, VIDEO, CHAT, DISCONNECT 

• Steps#10 Handle Disconnection and Correction Error

Here you need to create an instance of EnxVideoView class which is the subclass of RelativeLayout. You also need to pass a reference of Activity, a valid Token, and Observer to receive callback. 

There are 2 callbacks for you to clear instance or for any other UI/UX implementation. You need to override these functions below:

• For Disconnection: You get notified when the user gets disconnected from the Video Room. The JSON you receive shows reason for disconnection.

override fun disconnect(jsonObject: JSONObject?) 

• For Connection Error: You get notified if the user doesn’t get connected to the Video Room. The JSON you receive shows related error.

override fun connectError(jsonObject: JSONObject?) 

Features

Features for group mode

• 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
  • Raise Hand to Join the Floor (only for webinar mode)
• For Moderators only
  • Record Session
  • Mute Room
  • Mute Participant-Audio
  • Mute Participant-Video
  • Drop Participant from room
  • Allow/deny Participant’s Raised Hand Request (only for webinar mode)
  • Revoke Allowed Raised Hand Request (only for webinar mode)