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
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?
What’s New in iOS UIKit v1.2.3?
iOS UIKit v1.2.3 comes with many enhancement on the Video UI Elements. No new feature has been introduced.
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 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'
pod 'Socket.IO-Client-Swift', '~> 15.0.0'
- 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 SharewithAppGroupName
– Application’s Group nameuserKey
– Client IDdelegate
– 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 connectbroadCastDisconnected()
– When broadcast gets disconnecteddisconnectedByOwner()
– When broadcast owner gets disconnectedrequestedTo(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 */ ] );