Customize iOS UI Kit

You can customize different parts of the video UI by referring to the following examples:

Initiation Process

Joining Button Label

You can customize the label of joining button by using setJoinText function. It' optional, use it to overwrite default label.

EnxSetting.shared.setJoinText("Go Live")

Switching Camera before joining

You can switch Camera to join with the finally selected camera by using setCameraPosition function. Set it to true for camera and false for rear camera. User can override the flag from confirmation screen too.

EnxSetting.shared.setCameraPosition(true)	// Setting front camera
EnxSetting.shared.setCameraPosition(false)	// Setting back camera

Preview Camera before joining

You can preview a selected Camera feed before joinining by using isPreScreening function. Set it to true to show preview and false to hide preview.

EnxSetting.shared.isPreScreening(true) 	// Preview
EnxSetting.shared.isPreScreening(true) 	// Hide Preview

Go for Audio Only Call

You can intiate an Audio Only call without any Video Option, you can do so by using isAudioOnlyCall function. Set it to true for Audio Only call and false for Audio+Video call.

This is an optional function. Use if in case you want to get into an Audio Only call. Audio & Video support comes by default, based on Subscription.

EnxSetting.shared.isAudioOnlyCall(true)		// Audio only
EnxSetting.shared.isAudioOnlyCall(false)	// Audio & Video

Join with Video muted

You can join a call with Video muted by using joinAsVideoMute function. Set it to true for Video-muted entry.

This is an optional function. Use if in case you want to join with video-muted. Audio & Video support comes by default given related device permission.

EnxSetting.shared.joinAsVideoMute(true)		// Video Muted entry
EnxSetting.shared.joinAsVideoMute(false)	// Entry with Audio & Video

Join with Audio muted

You can join a call with Audio muted by using joinAsAudioMute function. Set it to true for Audio-muted entry.

This is an optional function. Use if in case you want to join with audio-muted. Audio & Video support comes by default given related device permission.

EnxSetting.shared.joinAsAudioMute(true)		// Video Muted entry
EnxSetting.shared.joinAsAudioMute(false)	// Entry with Audio & Video

Join to start RTMP Live Streaming

You can initiate RTMP Live Streaming just after joining automatically by using startLiveStreaming function. Set it to true for start RTMP Live Streaming on joining.

This is an optional function. Use if in case you want to start live streaming automatically on joining. This also requires that you pass RTMP Streaming Endpoint and Access Key; and optionally pass any Custom-built UI View for the Stream.

EnxSetting.shared.startLiveStreaming(true)	// Start Streaming on joining 
EnxSetting.shared.startLiveStreaming(false)	// Not to start streaming on joining

// Pass RTMP Streaming Infomration
EnxSetting.shared.liveStreaming(	["rtmpDetails":[ "rtmpUrl" : "rtmpURL"],"urlDetails" : ["url" : "URL"]])

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.

2. 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

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.

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:

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.

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.

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

2. Callbacks for screen sharing.

You need the following callbacks for 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

• 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()

Start/Stop RTMP Live Streaming

By using following methods, you can start/stop RTMP Live Streaming within a session anytime you want. The startStreaming needs RTMP Streaming information like RTMP Endpoint, Access Key and any Customer UI to use as View for the Stream.

// Start Streaming
EnxSetting.shared.startStreaming(information : ["rtmpDetails" :[ "rtmpUrl" : "rtmpURL"],"urlDetails" : ["url" : "URL"]])

// Stop Streaming
EnxSetting.shared.stopStreaming()

You can also start live streaming without passing any Stream information to it. In this case, it will use Stream Information passed while joining the session.

// Start Streaming
EnxSetting.shared.startStreaming(information: [:])  // One way to use [:]
EnxSetting.shared.startStreaming(information: nil)  // Another way to use nil

// Stop Streaming
EnxSetting.shared.stopStreaming()

Show Live Indicator

By using following methods, you can enable/disable "Live" indicataor showing on Video UI when Streaming starts.

EnxSetting.shared.isShow(GoLiveIndicator: true)   // Show Live Indicator
EnxSetting.shared.isShow(GoLiveIndicator: false)   // Hide Live Indicator