Customize iOS UI Kit
You can customize different parts of the video UI by referring to the following examples:
Customize the Bottom Bar
You can add your own buttons, and customize the view background color, and resolution for Bottom Bar.
To update Bottom Bar View:
EnxSetting.shared.updateBottomOptionView(withColor:UIColor)
EnxSetting.shared.updateBottomOptionView(withColor: .red.withAlphaComponent(1.0))
Note:
- add your 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. UI Kit will automatically generate action for the buttons which has pre-defined button-tags. Refer to the above code snippet.
- You can define a maximum of 7 buttons for the Bottom Bar.
- Set the background color of the bottom bar: Pass the resource id of the color to the
EnxSetting.shared.updateBottomOptionView(withColor:UIColor)
function.
EnxSetting.shared.updateBottomOptionView(withColor: .red.withAlphaComponent(1.0))
Screen Sharing
Start screen sharing
Use this method to start screen sharing:
Method
public init(screenShare token:String, withAppGroupName:String, withUserKey:String, delegate:EnxScreenShareStateDelegate?...)
Parameters
Parameter | Description |
---|---|
screenShare | EnableX's valid token for screen sharing. |
withAppGroupName | Specify the group name of the application. |
userKey | Specify the Client ID. |
Delegate | Set the delegate to receive callback from the 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)
Process the frame for sharing
Use the public func processFrame(buffer sampleBuffer:String, withTimeStamp timeStamp :Int64)
method to process the frame for screen sharing.
Parameter | Description |
---|---|
Buffer | Buffer frame of your image |
withTimeStamp | Integer. Timestamp. |
Example: Objective-C
[enxShare processFrameWithBuffer: outPixelBuffer withTimeStamp: time];
Example: Swift
enxShare.processFrame(buffer: outPixelBuffer!, withTimeStamp: time)
Set the options for screen sharing
Use the setOption(forScreenShare opt: [String : String])
method to set your preferred options for screen sharing:
Parameter | Description |
---|---|
Opt | Specify optional parameters for screen sharing. |
Example: Objective-C
[[EnxSetting shared] setOptionForScreenShare:@{@"layout" : @"presenter" }];
Example: Swift
EnxSetting.shared.setOption(forScreenShare: ["layout" : "presenter"]);
Get configured screen sharing options
Use the getOptionForScreenShare()
method to get the configured options for screen sharing.
Example: Objective-C
NSDictionary *dict = [[EnxSetting shared] getOptionForScreenShare];
Example: Swift
let option = EnxSetting.shared.getOptionForScreenShare()
Set group name for the app
Use the setAppGroupsName( groupname : String , withUserKey keyName : String)
method to set Group Name and Key for the app.
Parameter | Description |
---|---|
Groupname | Specify the group name for the app. For example, group.com.companyName.AppName. |
keyName | Specify the 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 sharing
Use the public func stopStreenShare()
method to stop screen sharing.
Example: Objective-C
[enxShare stopStreenShare];
Example: Swift
enxShare.stopStreenShare()
Configure Participant List
The participant list is used for customizing the content of the panel on which the participant list is shown. Typically, the display of all action buttons against each participant name is configured using the participant list. For example, you can add a button named Disconnect to disconnect a specific participant or add a Chat button to initiate a private chat with a specific participant.
Depending on the user's role, (the user who sees the participant list), all or some of the added buttons are displayed. For example, the Disconnect button is displayed only for a moderator because only the moderator can forcibly remove a participant from a session.
Use the configureParticipantList(to list : [ParticipantListOptions.RawValue])
method to add different options for each participant in the participant list.
Parameter | Description |
---|---|
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 */]);
Configure Participant List Options
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 */]);
Handle Callbacks
Handle disconnection and connection errors
Create an instance of the EnxVideoView
class, which is a subclass of UIView
.
Note: You need to pass a valid token and use delegate to receive callback.
There are 2 callbacks for you to clear the instance or for any other UI/UX implementation. They are:
- For Disconnection: Receive a notification when a participant is disconnected from a video room. The JSON response contains details about the reason for disconnection.
func disconnect(response: [Any]?)
- For Connection Error: Receive a notification if a participant is not connected to a video room. The JSON response contains the related error.
func connectError(reason: [Any]?)
- Callbacks for screen sharing.
You need the following callbacks for screen sharing:
Callback | Description |
---|---|
broadCast(connected date : [Any]?) | When the broadcast is connected. |
failedToConnect(withBroadCast reason: [Any]?) | When the broadcast failed to connect. |
broadCastDisconnected() | When the broadcast is disconnected. |
disconnectedByOwner() | When the broadcast owner is disconnected. |
requestedTo(exitRoom : [Any]?) | When the moderator requests the participants to exit screen sharing. |
Customise Features
Setup conferencing features via APIs
Enhance your video conferencing application by deciding which features are required. The provided APIs allow you to specify and customize essential video conferencing features like audio, video, and camera controls. EnableX provides powerful APIs to customize the required features in your iOS UI kit:
Passing a list of required events as a tag argument
Method
public func configureRequiredEventList( withList : [EnxRequiredEventsOption.RawValue])
Syntex
EnxSetting.shared.configureRequiredEventList(withList: [EnxRequiredEventsOption.audio.rawValue , EnxRequiredEventsOption.video.rawValue,EnxRequiredEventsOption.cameraSwitch.rawValue])
Specify Required Features
Pass the EnableX customized tag value for each required feature.
audio,video,cameraSwitch .. ETC
Passing a list of Required Events as a model as argument
Method
public func configureRequiredEventsOptionList(withList : [EnxRequiredEventsOptionModel])
Syntex
EnxSetting.shared.configureRequiredEventsOptionList(withList: [requiredAudio, requiredVideo, requiredCamera])
Create configurations for individual features
Each feature can be further customized in terms of behaviour and appearance.
Audio
let requiredAudio = EnxRequiredEventsOptionModel(name: "Audio",isSelected: false,optionTag: .audio,isSwith: false,eventImageNormal: UIImage(contentsOfFile: bundle.path(forResource: "audio-on", ofType: "png")!),eventImageSelected: UIImage(contentsOfFile: bundle.path(forResource: "audio-off", ofType: "png")!))
Video
let requiredVideo = EnxRequiredEventsOptionModel(name: "Video",isSelected: false,optionTag: .video,isSwith: false,eventImageNormal: UIImage(contentsOfFile: bundle.path(forResource: "video-on", ofType: "png")!),eventImageSelected: UIImage(contentsOfFile: bundle.path(forResource: "video-off", ofType: "png")!))
Camera Switch
let requiredCamera = EnxRequiredEventsOptionModel(name: "Camera Switch",isSelected: false,optionTag: .cameraSwitch,isSwith: false,eventImageNormal: UIImage(contentsOfFile: bundle.path(forResource: "camera-rotaion", ofType: "png")!),eventImageSelected: UIImage(contentsOfFile: bundle.path(forResource: "camera-rotaion", ofType: "png")!))
Manage Send User Data over Session via APIs
Interactions in video conferencing go beyond just video and audio. With the chat page management features, you can control how users interact via chat, providing a seamless communication experience.
Observer: To manage features such as polling, QnA, or any other customised events, instantiate an Observer. This observer monitors the opening and closing of pages, allowing it to handle subsequent
override fun onUserDataReceived(jsonObject: JSONObject)
This function listens for any data sent by users in the session using the APIs sendUserData(), ensuring all participants receive the shared information.
- Close Chat Page
Call close chat page API to close the chat page. For more detail, please refer to below code snippet:
IOS - EnxSetting.shared.closeChatPage()
- Observe Page Slides
func didPageSlide(_ pageName : EnxPageSlideEventName , isShow : Bool)
Parameters
Parameter | Description |
---|---|
EnxPageSlideEventName | this is the enum for Events name like, EnxChat, EnxPolling, EnxQnA, EnxScreenShare |
IsShow | It is the flag true for open and false for closed. |
- Send User Data
Interactive elements like polls or Q&As enhance user engagement. Use these APIs to send custom data, creating a more interactive and engaging environment for your users.
public func sendUserData(_ userData : EnxSendUserDataModel)EnxSetting.shared.sendUserData(enxSendUserData)
Room and User Information APIs
Keeping track of room information and user-specific details is crucial for maintaining a controlled and productive conferencing environment. These APIs give you insight into the room's mode, user roles, and other essential details, ensuring you always have control.
- Receive User data
func didUserDataReceived(_ userData : [String : Any])
- Get participants list
Retrieve the list of individuals currently in the room.
EnxSetting.getParticipantList()
- Get current room mode (group/lecture)
Identify if the room is in group mode or lecture mode.
func getRoomMode()
- Get user role (moderator/participant)
Identify if a user is acting as a moderator or a participant.
func getCurrentRole()
- Get self-client ID
Fetch the unique ID associated with the client.
public func getClientID()
- Get the room instance
Retrieve the current room's instance.
func getRoom()
- Check if the room has the Knock feature enabled
Verify if the Knock feature is enabled in the room.
public func getiSKnockRoom()
- Check if the user is waiting
Check if a user is currently waiting for access.
public func getisUserAwaited()
- Check if the user requested the floor
Check if a user has made a request for the floor.
public func getisUserInFloorReq()