The EnableX UIKit stands out in the crowd when it comes to adding embedded calling on both Android and iOS devices. It\u2019s intelligently built on top of the native UIKit components. You get fully native components, such as UIView, UIButton, UILable, UITableView, UICollectionView, and so on.<\/p>\n
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.<\/p>\n
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:<\/p>\n
- \n
- They don\u2019t give the native look and feel.<\/li>\n
- They don\u2019t offer the desired flexibility to customise various components.<\/li>\n
- They clearly lack performance efficiency.<\/li>\n<\/ul>\n
EnableX has swept aside these issues by introducing its UIKit. You\u2019re no longer required to write thousands of lines of code. Just a few lines of code is enough. It sounds miraculous, but that\u2019s what it can do.<\/p>\n
Why EnableX Introduced EnableX UIKit <\/strong><\/h2>\n
There are many UIKits in the market, but they all come with the same problem \u2013 users must do a lot of coding. Since we constantly interact with developers, we quickly realized that users don\u2019t want a partial solution. They want a once-and-for-all plug-and-play solution to audio-video and overall UI handling.<\/p>\n
That\u2019s 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.<\/p>\n
To enable the audio-video feature in an app, we need to work on two distinct entities:<\/p>\n
- \n
- Core Server<\/strong>
\nIt handles the low-level media and network part of A\/V calling and presents a sample API for us to use.<\/li>\n- UIKit
\n<\/strong>It uses the APIs presented on the core server to enable an A\/V feature object.<\/li>\n<\/ul>\nFind out more about the EnableX UIKit <\/a><\/p>\n
The objects of the audio-video class and subclass, such as RTCCameraPreviewView and RTCMTLVideoView are both handled internally in our UIKit.<\/p>\n
Another big win for you is that the EnableX UIKit can be integrated seamlessly with Storyboards and SwiftUI. It\u2019s the industry\u2019s 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.<\/p>\n
How to Integrate EnableX UIKit into Your Mobile App<\/strong><\/h2>\n
Here\u2019s the code snippet:<\/p>\n
- \n
- Install UIkit through pod:
\npod ‘Enx_UIKit_iOS’<\/strong><\/li>\n<\/ol>\n- \n
- Initiate the video class:
\nvar<\/strong> videoView = EnxVideoViewClass(token: “A valid token to join room”, delegate: self<\/strong>)<\/li>\n<\/ol>\n- \n
- Add the following video class to view where you want to display it: addSubview(videoView)<\/li>\n
- Set the frame for video view based on your display size:
\nvideoView.frame = view.bounds<\/li>\n<\/ol>\n- \n
- Set the constraints for video view, so that once the device rotates, the UI auto-adjusts:
\nvideoView.autoresizingMask = [.flexibleHeight,.flexibleWidth]<\/li>\n<\/ol>\nCallbacks from EnableX\u2019s UIKit<\/strong><\/h2>\n
Users will receive the following notifications from the UIKit when they get disconnected or are unable to join the room:<\/p>\n
- \n
- func<\/strong> disconnect (response: [Any<\/strong>]?)<\/li>\n<\/ul>\n
End-users get the above notification when they get disconnected on their own, or by the moderator, or if the session expires.<\/p>\n
- \n
- func<\/strong> connectError(reason: [Any<\/strong>]?)<\/li>\n<\/ul>\n
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.<\/p>\n
Taking Customization to the Next Level<\/strong><\/h2>\n
1. <\/strong>Customize Bottom Bar<\/strong><\/h3>\n
With the EnableX UIKit, users can customize the UI based on their app\u2019s theme. For example, change the bottom option view background colour:<\/p>\n
EnxSetting.shared.updateBottomOptionView(withColor:UIColor)<\/p>\n
<\/p>\n
Customize Buttons Based on Function <\/strong><\/p>\n
- \n
- Define Audio-Mute Button:
\nlet audioBtn = UIButton(type: .custom)
\ntag = BottomOptions.audio.rawValue<\/li>\n - Define Video-Mute Button:
\nlet videoBtn = UIButton(type: .custom)
\ntag = BottomOptions.video.rawValue<\/li>\n - Define Camera Switch Button:
\nlet cameraBtn = UIButton(type: .custom)
\ntag = BottomOptions.cameraSwitch.rawValue<\/li>\n - Add Buttons:
\nEnxSetting.shared.configureBottomOptionList(withList: [audioBtn, videoBtn, cameraBtn])<\/li>\n<\/ul>\n2. Update Top Bar View<\/strong><\/h3>\n
<\/p>\n
For example, change the top option view background color:<\/p>\n
EnxSetting.shared.updateTopOptionView(withColor: UIColor)<\/p>\n
<\/p>\n
- \n
- Add Button on Top Bar View<\/strong><\/li>\n<\/ul>\n
EnxSetting.shared.configureTopOptionList(withList: [button-list])<\/p>\n
For Example:<\/p>\n
- \n
- Define Participant\u2019s Button:
\nlet participant = UIButton(type: .custom)
\ntag = TopOptions.userList.rawValue<\/li>\n - Define Menu Button:
\nlet menu = UIButton(type: .custom)
\ntag = TopOptions.menu.rawValue<\/li>\n<\/ul>\nAdd Buttons:
\nEnxSetting.shared.configureTopOptionList(withList: [participant, menu])<\/p>\nHey, your UI is now ready to use! That was quick, wasn\u2019t it?<\/p>\n
![\"Customize](\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/07\/1st-Set-of-Images-1024x494.png\")
<\/p>\nYou can customise and beautify your video call mobile app:<\/p>\n
![\"Beautify](\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/07\/2nd-Set-of-Images-1024x494.png\")
<\/p>\nTo Conclude<\/strong><\/h2>\n
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.<\/p>\n
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.<\/p>\n
To check out more examples and sample codes, visit our GitHub<\/a> repository.<\/p>\n
- Define Participant\u2019s Button:
- Add Button on Top Bar View<\/strong><\/li>\n<\/ul>\n
- Define Audio-Mute Button:
- func<\/strong> connectError(reason: [Any<\/strong>]?)<\/li>\n<\/ul>\n
- func<\/strong> disconnect (response: [Any<\/strong>]?)<\/li>\n<\/ul>\n
- Set the constraints for video view, so that once the device rotates, the UI auto-adjusts:
- Initiate the video class:
- UIKit
- Core Server<\/strong>