iOS Video UIKit – EnableX Developer Centre

iOS Video UIKit helps you develop a Video UI quickly without having to read through vast iOS 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.

Download iOS UIKit v1.1
Released: Mar 25, 2022

Overview
How to use
Implementation
UI Customization
Features

Overview

EnableX introduces iOS Video UIKit to help integrating EnableX Video quickly into your iOS Native App. iOS Video UIKit is a wonderful framework for Video Application Development for iOS Platforms (iPhone, iPad 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 iOS Video UIKit?

Manual Installation Process

The Enx_UIKit_iOS Framework is dependent on EnableX iOS SDK and socket library. Therefore, if you are adding Enx_UIKit_iOS Framework manually, download the iOS UIKit using the download option and add project->target->framework/library. You also need to add EnableX iOS SDK and socket.io through POD. The EnableX UIKit iOS SDK is supported in iOS 12+.

Follow these steps:

Step#1: Open terminal
Step#2: Go to your project directory
Step #3: Call “pod init”
Step #4: Once your podfile is created, add EnableX Video iOS SDK and socket.io

pod 'EnxRTCiOS'
pod 'Socket.IO-Client-Swift', '~> 15.0.0'

Step#5: Install Pod – “pod install“
Step#6: Open your project and go to Target -> Framework/Library. Add the Enx_UIKit_iOS here.

You are now done with manual installation process.

Setup through Pod

Follow these steps:

Step#1: Open terminal
Step#2: Go to your project directory
Step#3: Call “pod init”
Step#4: Open podfile and add Enx_UIKit_iOS

 pod 'Enx_UIKit_iOS'

Step#5: Install Pod – “pod install“. It will install all dependency itself.

Note: While installing Enablex iOS UIKit library through the pod, it is not required to add EnableX iOS SDK and socket.io frameworks separately.

Once installation process is complete, move to implementation process.

Implementation

Prerequisite

To use the Enx_UIKit_iOS Framework user must have the following:

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

How to get Camera and mic permission in iOS?

private func getPrivacyAccess(){ 
	let vStatus = AVCaptureDevice.authorizationStatus(for: .video) 
	if(vStatus == AVAuthorizationStatus.notDetermined){ 
		AVCaptureDevice.requestAccess(for: .video, completionHandler: { (granted: Bool) in 
		}) 
	} 

        let aStatus = AVCaptureDevice.authorizationStatus(for: .audio) 
	if(aStatus == AVAuthorizationStatus.notDetermined){ 
		AVCaptureDevice.requestAccess(for: .audio, completionHandler: { (granted: Bool) in 
		}) 
        } 
}

Add NSCameraUsageDescription and NSMicrophoneUsageDescription in your app-> info.plist

Code a little

Step#1: Go to your class and import the Enx_UIKit_iOS

Example: Swift

import Enx_UIKit_iOS

Example: Objective-C

@import Enx_UIKit_iOS; 
@class Enx_UIKit_iOS; 
@interface yourmainclass: UIViewController

Step#2: Use the UIKit class

Example: Swift

//Initiate the EnxVideoViewClass 
let enxViewer = EnxVideoViewClass(token: "a valid room token", delegate: self) 

//Add it to your view 
view.addSubview(enxViewer) 

//Set the frame 
enxViewer.frame = self.view.bounds 

//Set the constraint to auto manage UI if orientation change 
enxViewer.autoresizingMask = [.flexibleWidth, .flexibleHeight]

Example: Objective-C -After import done, go to .m class

//Initiate the EnxVideoViewClass 
EnxVideoViewClass *videoView = [[EnxVideoViewClass alloc] initWithToken:@"a valid room token" delegate:self]; 

//Add it to your view 
[self.view addSubview:videoView]; 

//Set the frame 
videoView.frame = self.view.bounds; 

//Set the constraint to auto manage UI if orientation change 
videoView.autoresizingMask = (UIViewAutoresizingFlexibleWidth |UIViewAutoresizingFlexibleHeight);

Here you need to create an instance of EnxVideoView which is the subclass of UIView. You need to pass a valid Token and use Delegate to receive callback.

Step#3: Handle Callbacks

There are 2 callbacks for you to clear instance or for any other UI/UX implementation. They are:

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

func disconnect(response: [Any]?)

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

func connectError(reason: [Any]?)

UI Customization

Customize Bottom Bar

You can add own buttons, customize view background color, resolution for Bottom Bar.

To update Bottom Bar View:

EnxSetting.shared.updateBottomOptionView(withColor:UIColor)

EnxSetting.shared.updateBottomOptionView(withColor: .red.withAlphaComponent(1.0))

To add button on Bottom Bar View:

EnxSetting.shared.configureBottomOptionList(withList: [button-list])

// Define Audio-Mute Button
let audioBtn = UIButton(type: .custom) 
audioBtn.tag = BottomOptions.audio.rawValue 

// Define Video-Mute Button
let videoBtn = UIButton(type: .custom) 
videoBtn.tag = BottomOptions.video.rawValue 

// Define Camera Switch Button
let cameraBtn = UIButton(type: .custom) 
cameraBtn.tag = BottomOptions.cameraSwitch.rawValue

// Add Buttons
EnxSetting.shared.configureBottomOptionList(withList: [audioBtn, videoBtn, cameraBtn])

Note:

To add own custom button, you need not add pre-defined button-tags, but add targets for your own button. And, you handle their actions/events yourself. UIKit will automatically generate action for the buttons which has pre-defined button-tags. Refer to the above code snippet.
You can define maximum of 7 buttons for Bottom Bar.

Customize Top Bar

You can add own buttons, customize view background color, resolution for Top Bar.

To update Top Bar View:

EnxSetting.shared.updateTopOptionView(withColor: UIColor)

EnxSetting.shared.updateTopOptionView(withColor: .red.withAlphaComponent(1.0))

To add button on Top Bar View:

EnxSetting.shared.configureTopOptionList(withList: [button-list])

// Define Participants Button
let participant = UIButton(type: .custom) 
participant.tag = TopOptions.userList.rawValue 

// Define Menu Button
let menu = UIButton(type: .custom) 
menu.tag = TopOptions.menu.rawValue 

// Add Buttons
EnxSetting.shared.configureTopOptionList(withList: [participant, menu])