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.2
Released: October 7, 2022

Overview
What’s New in v1.2?
How to use
Implementation
UI Customization
Features
- Screen Share
- Participant List

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.

What’s new with iOS 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.
Annotation: User can now annotate on stream and remote users can view annotated streams live.
Participant List: Configuration options for Participant List.

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,
			embedUrl: "Low-Code Embed URL. Optional to import Settings"
			) 

//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 aalid Room Token"
	delegate:self 
	embedUrl:"Low-Code Embed URL. Optional to import Settings"]; 

//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])

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 pre-defined button-tags.
You can define maximum of 7 buttons for Top Bar.

Features

Works with Low-Code: A Low Code URL may be configured with UI Kit to import it’s settings as defined using VIsual Builder through Portal.
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
- File Share: Share with all or privately to specific user.
For Moderators only
- Record Session
- Mute Room
- Mute Participant-Audio
- Mute Participant-Video
- Drop Participant from room

Screen Share

This is to present device screen into Video Room and to receive and play on the other ends.

Start Screen Share

Method: public init(screenShare token:String, withAppGroupName:String, withUserKey:String, delegate:EnxScreenShareStateDelegate?

Parameters:

screenShare – EnableX Valid Token for Screen Share
withAppGroupName – Application’s Group name
userKey – Client ID
delegate – Set delegate to get callback from Screen Share client

Example: Objective-C

[[EnxShareClass alloc] initWithScreenShare:“token” withAppGroupName:"group.com.compantName.AppName" 
withUserKey:"ClientID" delegate:self];

Example: Swift

EnxShareClass(screenShare: “token”, 
	withAppGroupName: "group.com.compantName.AppName", 
	withUserKey: "ClientID",
	delegate: self
	)

After screen share gets started, process frame for share

Method: public func processFrame(buffer sampleBuffer:String, withTimeStamp timeStamp :Int64)

Parameters:

buffer –
withTimeStamp – Integer. Timestamp.

Example: Objective-C

[enxShare processFrameWithBuffer: outPixelBuffer withTimeStamp: time];

Example: Swift

enxShare.processFrame(buffer: outPixelBuffer!, withTimeStamp: time)

Callbacks for Screen Share:

broadCast(connected date : [Any]?) – When broadcast gets connected.
failedToConnect(withBroadCast reason: [Any]?) – When broadcast failed to connect
broadCastDisconnected() – When broadcast gets disconnected
disconnectedByOwner() – When broadcast owner gets disconnected
requestedTo(exitRoom : [Any]?) – When Moderator requests to exit screen share

Set Screen Share Options

Use the following method to set preferred options for your screen share:

Method: setOption(forScreenShare opt: [String : String])

Parameters:

opt – Optional Parameters for Screen Share .

Example: Objective-C

[[EnxSetting shared] setOptionForScreenShare:@{@"layout" :  @"presenter" }];

Example: Swift

EnxSetting.shared.setOption(forScreenShare: ["layout" : "presenter"]);

Get Screen Share Options

Use the following method to get configured options for your screen share:

Method: getOptionForScreenShare()

Example: Objective-C

NSDictionary *dict = [[EnxSetting shared] getOptionForScreenShare];

Example: Swift

let option  = EnxSetting.shared.getOptionForScreenShare()

Set App’s Group Name

Use the following method to set Group Name and Key:

Method: setAppGroupsName( groupname : String , withUserKey keyName : String)

Parameters:

groupname – App’s Grup Name, e.g. group.com.compantName.AppName
keyName - CLient ID

Example: Objective-C

[[EnxSetting shared] setAppGroupsNameWithGroupname:@“App Group name” withUserKey:@“”clientID];

Example: Swift

EnxSetting.shared.setAppGroupsName(groupname: "App Group name", withUserKey: "ClientID")

Stop Screen Share

Method: public func stopStreenShare()

Example: Objective-C

[enxShare stopStreenShare];

Example: Swift

enxShare.stopStreenShare()

Configure Participant’s List

Use the following method to configure Participant List

Method: configureParticipantList(to list : [ParticipantListOptions.RawValue])

Parameters:

list – List of Enumerated data

Example: Swift

EnxSetting.shared.configureParticipantList(
	to: [
		ParticipantListOptions.audio.rawValue, /* Audio Hard Mute */
		ParticipantListOptions.video.rawValue, /* Video Hard Mute */
		ParticipantListOptions.chat.rawValue,   /* Private Chat */
		ParticipantListOptions.disconnect.rawValue   /* Force disconnect */
	]
);

Table of Contents

Overview

What’s new with iOS UIKit v1.2?

How to use iOS Video UIKit?

Manual Installation Process

Setup through Pod

Implementation

Prerequisite

Code a little

UI Customization

Customize Bottom Bar

Customize Top Bar

Features

Screen Share

Start Screen Share

Set Screen Share Options

Get Screen Share Options

Set App’s Group Name

Stop Screen Share

Configure Participant’s List