How to Customise And Beautify Your Video Call Mobile App With EnableX UIKit

Behind any app’s success story, UI or User Interface plays a critical role. But building that UI is an uphill task for developers. It involves countless lines of coding. That’s why UIKits are becoming popular. They do all the heavy lifting, making it simple and quick for developers to create and customise UI.

In this blog post, we’ll take a close look at how to customise and beautify your video call mobile app with EnableX UIKit, the problem that it solves for you, why it is superior to other UIKits in the market and how you can easily use it in your next mobile video call app project.

EnableX UIKit Framework: Why It Stands Out

The EnableX UIKit stands out in the crowd when it comes to adding embedded calling on both Android and iOS devices. It’s intelligently built on top of the native UIKit components. You get fully native components, such as UIView, UIButton, UILable, UITableView, UICollectionView, and so on.

Adding a live video call feature to a mobile app involves a lot of effort, time, and coding. Developers are swamped with tasks such as managing the UI complexity and the media streams, signalling and notification-related events, and much more.

The problem is that most UIKits available in the market are web-based; they lack native UI components. Shortcomings of commonly available web-based UIKits:

• They don’t give the native look and feel.
• They don’t offer the desired flexibility to customise various components.
• They clearly lack performance efficiency.

EnableX has swept aside these issues by introducing its UIKit. You’re no longer required to write thousands of lines of code. Just a few lines of code is enough. It sounds miraculous, but that’s what it can do.

Why EnableX Introduced EnableX UIKit

There are many UIKits in the market, but they all come with the same problem – users must do a lot of coding. Since we constantly interact with developers, we quickly realized that users don’t want a partial solution. They want a once-and-for-all plug-and-play solution to audio-video and overall UI handling.

That’s when we decided to launch the UIKit to enable developers to smoothly add the audio-video feature to create a purpose-built live video calling app.

To enable the audio-video feature in an app, we need to work on two distinct entities:

• Core Server
  It handles the low-level media and network part of A/V calling and presents a sample API for us to use.

• UIKit

  It uses the APIs presented on the core server to enable an A/V feature object.

Find out more about the EnableX UIKit.

The objects of the audio-video class and subclass, such as RTCCameraPreviewView and RTCMTLVideoView are both handled internally in our UIKit.

Another big win for you is that the EnableX UIKit can be integrated seamlessly with Storyboards and SwiftUI. It’s the industry’s first-ever CPaaS provider that supports both Storyboard and SwiftUI. While building the UIKit for you, it took special care of navigation and screen-friendliness of each and every component.

How to Integrate EnableX UIKit into Your Mobile App

Here’s the code snippet:

1. Install UIkit through pod:
   pod ‘Enx_UIKit_iOS’
2. Initiate the video class:
   var videoView = EnxVideoViewClass(token: “A valid token to join room”, delegate: self)
3. Add the following video class to view where you want to display it: addSubview(videoView)
4. Set the frame for video view based on your display size:
   videoView.frame = view.bounds
5. Set the constraints for video view, so that once the device rotates, the UI auto-adjusts:
   videoView.autoresizingMask = [.flexibleHeight,.flexibleWidth]

Callbacks from EnableX’s UIKit

Users will receive the following notifications from the UIKit when they get disconnected or are unable to join the room:

• func disconnect (response: [Any]?)

End-users get the above notification when they get disconnected on their own, or by the moderator, or if the session expires.

• func connectError(reason: [Any]?)

Participants receive the above notification when they face issues while connecting with the EnableX room because of a wrong token or the number of participants exceeds the room size, or for any other reason.

Taking Customization to the Next Level

1. Customize Bottom Bar

With the EnableX UIKit, users can customize the UI based on their app’s theme. For example, change the bottom option view background colour:

EnxSetting.shared.updateBottomOptionView(withColor:UIColor)

Customize Buttons Based On Function

• Define Audio-Mute Button:
  let audioBtn = UIButton(type: .custom)
  tag = BottomOptions.audio.rawValue
• Define Video-Mute Button:
  let videoBtn = UIButton(type: .custom)
  tag = BottomOptions.video.rawValue
• Define Camera Switch Button:
  let cameraBtn = UIButton(type: .custom)
  tag = BottomOptions.cameraSwitch.rawValue
• Add Buttons:
  EnxSetting.shared.configureBottomOptionList(withList: [audioBtn, videoBtn, cameraBtn])

2. Update Top Bar View

For example, change the top option view background color:

EnxSetting.shared.updateTopOptionView(withColor: UIColor)

Add Button on Top Bar View

EnxSetting.shared.configureTopOptionList(withList: [button-list])

For Example:

• Define Participant’s Button:
  let participant = UIButton(type: .custom)
  tag = TopOptions.userList.rawValue

• Define Menu Button:
  let menu = UIButton(type: .custom)
  tag = TopOptions.menu.rawValue

  Add Buttons:
  EnxSetting.shared.configureTopOptionList(withList: [participant, menu])

  Hey, your UI is now ready to use! That was quick, wasn’t it?

• You can customize and beautify your video call mobile app:

To Conclude

Customising and spicing up the look and feel of audio-video calls using the EnableX UIKit is now a cakewalk! The flexibility it offers is unthinkable with any other UIKits out there.

So, Let’s get cracking, upgrade your app with this awesome guide, and focus on achieving your business goals. Do share your thoughts with us on how it worked out.

To check out more examples and sample codes, visit our GitHub repository.

Also published here.