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
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.
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 theallprojects.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 ofEnxVideoView
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) // 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 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)