Introduction

In this tutorial, you will learn the steps to build video calls into iOS apps using SwiftUI. We will use Xcode as the Development environment and MirrorFly Video Chat SDKs for implementing video calls.

Prerequisites

1. Get the MirrorFly Video SDK License Key

Follow the below steps to get your license key:

Step 1 : Go to the MirrorFly console. Create an Account. If you already have an account with MirrorFly, go to step 3.

Step 2 : Follow the account creation instructions in the console page. Once you've created the account, validate your account using the verification link sent to your email ID.

Step 3 : Login to your account here

Step 4 : In the Overview page, under Application Info section - copy the license key

2. Create an iOS Application

Step 1 : Open Xcode

#

Step 2 : Go to File > New > Project

Step 3 : Create a New Project

Step 4 : Set up the app as belows

  • Platform: iOS
  • Template: App
  • Interface: SwiftUI
  • Life Cycle: SwiftUI App
  • Language: Swift

Now, a project to develop the iOS app is created. The next step is to set up your UI kit.

3. UI Kit Installation

Step 1 : Download the UI kit

Step 2 : Import the xcframeworks from the downloaded package

Step 3 : Next, download the MirrorFly SDKs

Step 4 : Import them into your iOS project

     
                              Goto Project ->  Target -> General -> Frameworks,libraries and Embedded Content -> 
Select Embed & Sign for all the Chat SDK's xcframeworks
#

4. Disable Bitcodes

Step 1 : Go to Project

Step 2 : Select Build Settings

Step 3 : Search ‘Bitcode’

Step 4 : Against ‘Bitcode’, choose ‘No’ from the dropdown menu

  
                                Goto Project -> Build Settings -> Filter the term `Bitcode` -> and select No from the dropdown
                           
#

5. Initialize the Pods

Step 1 : If you do not have any pods initiated before for your project, initiate one.

Step 2 : Choose the necessary pods required for the SDK.

Step 3 : Initialize them.

  
                                  pod 'Alamofire' 
                                 pod 'XMPPFramework/Swift' 
                                 pod 'Toaster' 
                                 pod 'Firebase/Auth' 
                                 pod 'Firebase/Crashlytics' 
                                 pod 'Firebase/Analytics' 
                                 pod 'Firebase/Messaging' 
                                 pod 'SDWebImage' 
                                 pod "BSImagePicker", "~> 3.1" 
                                 pod 'libPhoneNumber-iOS' 
                                 pod 'NicoProgress' 
                                 pod 'SocketRocket' 
                                 pod 'Socket.IO-Client-Swift', '~> 15.2.0' 
                                 pod 'GoogleWebRTC' # WebRTC for Calls 
                                 pod 'RealmSwift', '10.20.1' 
                            

Step 4 : At the end of the pod file, add the below pod hook file

Step 5 : Install the pods

  
                         post_install do |installer| 
                             installer.pods_project.targets.each do |target| 
                                 target.build_configurations.each do |config| 
                                 config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.1' 
                                 config.build_settings['ENABLE_BITCODE'] = 'NO' 
                                 config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No' 
                                 config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES' 
                                 end 
                             end 
                             end 

                        

6. Enable Project Capabilities

Step 1 : Go to Project

Step 2 : Select Target

Step 3 : Click on Signing & Capabilities

Step 4 : Click on the + symbol at the top left corner of the page

Step 5 : Under Capabilities, find App Groups and Background Modes

I. App Group Capabilities

In App Groups, enable group.mirrorfly.quickstart

#

II. Background Modes

Next, below Background modes, you need to enable the below capabilities:

  • Audio,Airplay, and Picture in Picture
  • Background fetch
  • Voice over IP
  • Remote notifications
#

II. Microphone Privacy

In your project plist, you need to set up the Microphone Privacy as below:

#

III. Camera Privacy

Next, you need to set up the camera privacy as mentioned below:

#

IV. Ringtone and Reconnection Tone

Add the caller tone and reconnection tune in the mp3 format, to your iOS project

#

V. Photo Library Usage Description

In your info.plist, add the Photo library usage description

#

7. Initialize using License Key

Through your view controller, intialize the MirrorFlyUI instance using the func intialize () as mentioned below:

 
                     import UIKit 
                         import FlyUIKit 
                         class ViewController: UIViewController {  
                             override func viewDidLoad() {  
                                 super.viewDidLoad()  
                                 self.initialize() 
                         } 
                          
                         func initialize () { 
                                     FlyUIKitSDK.shared.initialization (userID: userId, licenseKey: licenseKey) {(isSuccess, error) in  
                                          
                                     if isSuccess {  
                                         self.getRecentChat() 
                                     }  
                                     else { 
                                         print (error) 
                                     } 
                                 } 
                             } 
                         } 
                    
 
                         func initialize () { 
                                      
                                 FlyUIKitSDK.shared.initialization(userID: userId, licenseKey: licenseKey) {(isSuccess, error) in 
                                     if isSuccess{ 
                                         self.getRecentChat() 
                                     } else { 
                                         print(error) 
                                     } 
                                 } 
                             } 
                    

8. Set Up Audio Call Screen

Follow the below steps to implement the Screen display during an Audio call

#

II. Audio Module Components

To create and display call screen view, you need to use the MFUICallScreenModule and its components in the MFUICallScreenViewController class.

 
                        ChatManager.shared.messageEventsDelegate = self                         
                

The module consists of five components:

headerComponent

  • Back Button
  • Call Status Label
  • Name Label of Caller/Receiver
  • Image View of Caller/Receiver
  • Time Label of Connected calls

retryFooterComponent

  • Cancel button
  • Call again button

hangupFooterComponent

  • Mute Button
  • Hangup Button
  • Speaker Button

callOverlayComponent

  • Caller imageview button

muteViewComponent

  • mute imageview
  • mute description label

9. Set Up Video Call Screen

Follow the below steps to set up the screen of an ongoing video call:

#

Video Module Components

To create and display call screen view during a video chat, you need to use the MFUICallScreenModule and its components.

Step 1 : The components of the Video Call Modules include:

RemoteVideoView

  • Video mute imageview
  • Video mute description

RemoteVideoView

  • Video mute imageview
  • Video mute description

LocalVideoView

  •  Shows local video

headerComponent

  • Call status Label
  • Back Button
  • Caller/Receiver Name Label
  • Connected call Time Label

headerComponent

  • Mute button
  • Speaker button
  • Hangup button

LocalVideoView

  • Shows local video

Step 2 : In the MirrorFly UIKit's view life cycle, add the module components to the setupView() method by calling the loadView() method of the view controller.

10. Start Making Video Calls

Once you've completed the above steps,

  • Run your app on a simulator or a plugged-in device

To send a message,

  • Tap the icon in the top-rigt corner
  • Select the chat type: single or group. The app lands in the Contacts page with all the registered users.
  • Select the user you need to video chat with. A chat room gets created.
  • Make your first video call!

Congratulations! you've created a video chat app with instant messaging capability!

Its a Wrap!

In this tutorial, you’ve learned how to build a iOS video chat app using SwiftUI and how to use MirrorFly UIkit to build your video chat app interfaces.

What’s Next?

Want to add interesting features and functionalities to your app? Here are our resources you might find useful to make your video call app stand out as the best!

Coming to the end, I appreciate that you're interested to learn with me and hope this guide helped you in building your iOS app. If you'd like me to write any other video chat app guides, leave a quck comment below. I'd be more than happy to meet you soon with another interesting article. Until then, I wish you the best of everything you do!

Launch your Own iOS Chat App with Swift!

Get Started with MirrorFly SDK's and Improve your overall in-app conversion, engagement, and retention.

  • Average API response 3s
  • 100ms worldwide latency
  • 1 Billion+ Conversations
Try it free
#
Ready to Get Started with Our FREE Chat APIs?

Create immersive chat, video & voice calling experiences that skyrocket engagement and increase your app stickiness with our APIs & SDKs.

  • Dedicated Cloud Server
  • API Response 3 Seconds
  • 99.999% Uptime SLA
Try it free *No Credit Card Required Contact Sales