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.
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])
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
- 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
- For Moderators only
- Record Session
- Mute Room
- Mute Participant-Audio
- Mute Participant-Video
- Drop Participant from room