iOS Video UIKit

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.

Table of Contents

• Overview
• What’s New?
  • v2.1.8 – March 20, 2025
  • v2.1.3
  • v2.1.1
  • v1.2.2
  • v1.2
• How to use
• Implementation
• UI Customization
• Features
  • Screen Share
  • Participant List

Overview

iOS Video UIKit has been introduced to streamline the integration of video functionality into your iOS native app. This framework offers extensive customization options, making it an excellent choice for developing video applications on iOS platforms such as iPhone and iPad.

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?

This section provides information about new features and improvements to existing features shipped in the iOS UI Kit releases.

What’s New in iOS UI Kit v2.1.8?

The UI Kit framework has been moved from .freamwork to .xcfreamwork, with added support dSYMs file.

What’s New in iOS UI Kit v2.1.3?

iOS UI Kit v2.1.3 is released with a bouquette of new features:

Collaboration & Engagement

• Annotation
• Screen Share
• Room Setting: Switch Room, Screen Share Control, Canvas Control
• Polling
• Q&A
• Switch Role

Webinar Feature

• Request Floor Access

Reach

• Live Streaming

Utilities

• Switch Layout between Video Grid & List View
• Audio Only UI

What’s New in iOS UI Kit v2.1.1?

The iOS UI Kit v2.1.1 introduces additional configuration option like Joining Button name, Default Camera to initiate, Showing Camera Preview before joining, joining with Camera or Microphone muted, joining with RTMP Streaming endpoints etc.

What’s New in iOS UIKit v1.2.2?

iOS UIKit v1.2.2 comes with a confirmation screen before joining the room. In this screen, user chooses if he wants to go ahead with a Video Call or with a Audio-Only call. For Video Call, use chooses if he wishes to enter with Microphone or Camera muted.

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 SFmeet_UIKit_iOS Framework is dependent on iOS SDK and socket library. Therefore, if you are adding SFmeet_UIKit_iOS Framework manually, download the iOS UIKit using the download option and add project->target->framework/library. You also need to add iOS SDK and socket.io through POD. The UIKit iOS SDK is supported in iOS 13+.

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 the Video iOS SDK and socket.io

pod 'SFmeetRTCiOS'
pod 'Socket.IO-Client-Swift', '~> 16.1.1'

• Step#5: Install Pod – “pod install“
• Step#6: Open your project and go to Target -> Framework/Library. Add the SFmeet_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 SFmeet_UIKit_iOS 

 pod 'SFmeet_UIKit_iOS'

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

Note: While installing the iOS UIKit library through the pod, it is not required to add 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 SFmeet_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 – 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 */
	]
);