Integrate Video Chat Into Your iOS App Using Swift

Introduction

This tutorial will walk you through the complete process of integrating MirrorFly’s SDKs into iOS video chat apps using Swift

MirrorFly Video Calling Features - An Overview

Using MirrorFly’s Messaging SDKs, the below list of video calling features can be integrated into apps in the iOS platform

Pre-requisite for building a Video Chat App for iOS:

To prepare for the video app building, it is important to check on the list of basic essentials required for the development process.

• Make/ Receive Video Calls
• Add Group Calling Functionality
• Add Call Participants
• Disconnect the ongoing call
• Handling the video track events
• Mute video in call
• Switching between camera in video call
• Switch audio call to video call
• Handling audio call to video call switch requests
• Getting call logs from the sdk
• Getting missed call count
• Check Video mute status of the UserId

Explore more features from MirrorFly here

I. Creating MirrorFly Account

To gain access to MirrorFly’s video calling features, you will need a MirrorFly Account

Step 1 : Navigate to the Registration Page

Step 2 : Fill in the required details

Step 3 : Click on the Signup button

Step 4 : On completing the sign up process, you will be taken to your Account’s Overview page

Step 5 : You will find the License Key under the Application Info Section

Step 6 : Below the License Key, you will find the SDKs available for download

Step 7 : Click on the Download SDK adjacent to iOS

Step 8 : A ZIP folder containing the AAR files will be downloaded

Step 9 : At the end of this step, you will have a MirrorFly Account with the SDK and License Key needed for the integration.

Getting Started with Xcode

Preparing the iOS Video Call App:

Basic Requirements

• 1 . Xcode 13 or later
• 2 . iOS 12.1 or later
• 3 . Swift 5.0 or later

First, launch the Xcode IDE

• 1 . In the ‘Welcome to Xcode’ window, click on Create a new Xcode project
• 2 . Or Navigate to File > New > Project
• 3 . Click on Next

The ‘Choose options for your new project’ window will appear.

• Fill in your Product name
• Enter the Organization Identifier - this creates a bundle identifier that is used to spot your app across the system
• Choose the language as ‘Swift’ and the User Interface as ‘SwiftUI’

This will create your Project Folder.

SDK Integration Process for iOS Video Chat App

1. Integration of the SDK

• Navigate to your Project folder
• Add the following frameworks to the project folder. This can be done by dragging the downloaded framework files in the SDK Package folder and dropping in the Project folder within the Xcode IDE

                                 FlyCall.xcframework
                                 FlyCore.xcframework
                                 FlyCommon.xcframework
                                 FlyNetwork.xcframework
                                 FlyDatabase.xcframework
                                 FlyXmpp.xcframework
                                FlyTranslate.xcframework 
                               

• Next, add the following dependencies to the podfile

                               target 'FlyCall' do
                               use_frameworks!
                               pod 'libPhoneNumber-iOS', '~> 0.8'
                               pod 'SocketRocket'
                               pod 'Socket.IO-Client-Swift', '~> 15.2.0'
                               pod 'GoogleWebRTC'
                               pod 'Floaty', '~> 4.2.0'
                               pod 'AlamofireImage', '~> 4.1'
                               end
                                

Add all the extracted frameworks into your project

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

Next, disable the bitcodes in your project

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

If you have not initiated any pods project before, then initiate the one. Now, add the required pods that are necessary for the SDK to execute the process perfectly.

If there have been no pods projects initiated before, initiate one and add the necessary pods needed for the SDK initialization

                             
                                     pod 'libPhoneNumber-iOS'
                                     pod 'Alamofire'
                                     pod 'RealmSwift', '10.20.1'
                                     pod 'XMPPFramework/Swift'
                                     pod 'SocketRocket'
                                     pod 'Socket.IO-Client-Swift'
                                     pod 'GoogleWebRTC' 
                                

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

                                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 
                                

Enable the below capabilities:

Goto Project -> Target -> Signing & Capabilities -> Click + at the top left corner -> Search for the capabilities below

Capabilities

• App Groups
• Background Modes

In the Background modes, enable the below:

Background Modes

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

Enable the audio and video permissions and configure the SDK data and server as below:

Enable the audio and video permissions and configure the SDK data and server as below:

let BASE_URL = "https://api-preprod-sandbox.mirrorfly.com/api/v1/" let LICENSE_KEY = "xxxxxxxxxxxxxxxxxxxxxx" let CONTAINER_ID = "group.com.mirrorfly.qa"

2.Data Initialization

• Find the AppDelegate Instance in your Project
• Initialize the builder CallSDK through the didFinishLaunchingWithOptions method
• This method is called on to tell the delegate that the launch process is almost complete

   
                                             try? ChatSDK.Builder.setAppGroupContainerID(containerID: CONTAINER_ID)
                                             .setLicenseKey(key: LICENSE_KEY)
                                             .isTrialLicense(isTrial: true)
                                             .setDomainBaseUrl(baseUrl: BASE_URL)
                                             .buildAndInitialize()
                                        

User Registration

Use the below method to register a new user. Based on isTrialLicense, this method tasks care of the registration in both sandbox and live mode in the ChatSDK.Builder Class

Request Parameters:

Argument	Type	Description
USER_IDENTIFIER	String	Unique Id to Register the User
APNS_DEVICE_TOKEN	String	Token to register APNS device (optional)
VOIP_DEVICE_TOKEN	String	Token to register VoIP device (optional)
IS_EXPORT	Bool	true for production (apns certificate) builds and false for sandbox (apns certificate) builds
CALLBACK	FlyCompletionHanlder	FlyCompletionHanlder is implemented and expressed as lambda expression for easy reading

Code :

                                 try! ChatManager.registerApiService(for:  USER_IDENTIFIER ) { isSuccess, flyError, flyData in
                                      var data = flyData
                                      if isSuccess {
                                          // This is your Password
                                          guard let password = data["password"] as? String else{
                                                  return
                                              }
                                            // This is your Username
                                             guard let username = data["username"] as? String else{
                                                     return
                                                 }
                                                  }else{
                                                          let error = data.getMessage()
                                                       print("#chatSDK \(error)")
                                                     }
                                                      }
                                

This will successfully establish peer-to-peer communication using the unique user ID.

4. Initialize the Call SDK into Your iOS Video Chat App

After registration, initialize the call SDK using the following method

                                try! CallManager.initCallSDK()
                                

Establishing Connection to the Server

After the configurations needed for the initialization process is performed, the SDKs need to establish a connection with a server

                                ChatManager.connect()
                                

To disconnect, use the following method:

                                  ChatManager.disconnect()
                                

6. Making a Video Call

Check for Permissions

• To make video calls, the following permissions need to be checked:
  • Record permission for both Audio and Video
  • Video permission for enabling the Videos
• The codes below are used for the check:

                                  CallManager.isAudioCallPermissionsGranted()
                                

                                  CallManager.isAudioCallPermissionsGranted()
                                

One-to-one video call

To make a video call between one peer to another, the user ID is called as per the following method

                                  CallManager.makeVideoCall("TO_USERID") { isSuccess , message in }
                                

Group Video Call

To make group video calls, the group ID is called and the connection among the users are established.

Request Parameters

Argument	Type	Description
USERID_LIST	[String]	Userid list of the callee's
GROUP_ID	String	ID of the group from which call is initiated

                             CallManager.makeGroupVideoCall(USERID_LIST, GROUP_ID, (isSuccess, message) -> {
                                 }
                           

Add Users into the Call

During an ongoing call, participants can be added into the call by using the USERID_LIST argument

Request Parameters

Argument	Type	Description
USERID_LIST	[String]	Userid list of the callee's

Code:

                                  CallManager.inviteUsersToOngoingCall(USERID_LIST); 
                            

Receive Video Call

When a user receives a call, a notification should appear in the notification window, enabling the user to take action on the request

Code:

                                 NotificationCenter.default.post(name: NSNotification.Name("CallPayloadReceived"),object: messageDict) 
                            

Disconnect the Ongoing Call

An ongoing call can be disconnected using the following code:

Code:

                                 CallManager.disconnectCall() 
                            

Add Video Call Features

MirrorFly’s APIs offer a wide range of video calling features. A few key features addressed here can be easily integrated into your iOS Video Chat Apps

Mute a Video Call

This feature allows users to mute their video during a video call.

Request Parameters

Argument	Type	Description
MUTE_VIDEO	boolean	Pass true,if you want to disable audio else pass false

Code:

                                 CallManager.muteVideo(MUTE_VIDEO); 
                            

Switching between camera in video call

In order to switch between cameras in a video call, the below mentioned code can be used.

Code:

                                 CallManager.switchCamera() 
                            

Check Video mute status of the UserId

To check the mute status of users, the following can be used

Code:

                               func isRemoteVideoMuted(_ userJid : String) -> Bool { } 
                            

Get Call link

Generate video call links using the following method

Code:

                               CallManager.getCallLink() 
                            

Switch Cameras

Change the camera control from front to back or vice versa

Code:

                               CallManager.switchCamera() 
                            

Joining the call

Use the code below to enable users to join a video call

Code:

                               CallManager.joinCall() 
                            

Conclusion

Each module in the APIs and SDKs designed by MirrorFly focuses on providing a quality communication experience to your app users. We hope this tutorial has served its purpose in helping implement video calling features into your iOS video chat apps. However, if you may need any further support with the integration process, our sales team would be more than happy to help you. Talk to our experts now!