How to Build A Video Calling App on iOS

With the booming development of smartphones, the user base on the mobile platform has grown exponentially, leading to an unlimited demand for mobile applications. The Android platform holds a dominant market share globally. However, iOS remains an extremely attractive platform, especially for developers targeting high-end users and high-income markets. iOS development continues to enjoy high popularity and commercial potential worldwide.

Tencent RTC Call (TUICallKit) provides video & voice chat SDK and iOS development package for developers. Our product supports both Swift and Objective-C development. It is an audio and video calling component with UI supported by Tencent Cloud as the underlying technology. We also offer a 7-day free trial opportunity.

This tutorial blog will guide you step by step on how to integrate the TUICallKit component into your iOS project and build an audio and video calling application on the iOS platform.

Video Tutorial

Introduction

In this tutorial, we will use Swift as an example for development. Swift is used for developing applications on various platforms within the Apple ecosystem, including iOS, Mac, watchOS, and tvOS. It supports within the Apple ecosystem, which can seamlessly integrate with Objective-C, allowing both languages to be used together in the same project.

How to Build A Video Calling App on iOS?

Step 1: Create a Call Application

Before integrating the TUICallKit component, we first need to access the TRTC Console. In the console, create your application and enable the audio and video calling feature.You can click here to directly access it. Alternatively, you can first refer to the Quick Integration Documentation of Tencent RTC Call and find the console entry in the iOS Documentation Guide.

Note: If you haven't registered an account yet, please click here to register first. Once you have successfully logged in, you can proceed to create your application in the console.

• Name your application, for example, let's use "callkit" as an example.
• Click on the <Create application> button and select "7-day Free Trial" option.

At this point, you can see on the screen that the application you just created is named "callkit" along with the SDKAppID and SDKSecretKey.

At the bottom of the console page, you can see that the free trial for Call has been activated.

Step 2: Integrating the TUICallKit Component

After creating the Call application, you need to complete the basic configuration. First, open your iOS project and navigate to the "Podfile" file. Paste " pod 'TUICallKit' " into it and execute the " pod install " command in the command line. Here is an example screenshot:

1. pod 'TUICallKit'

1. pod install

At this point, our project has already integrated the TUICallKit component.

Step 3: Implement the Login Functionality

To implement the login functionality, we need to create a simple button. When we click the button, it should perform the login operation and print the login information to verify if the login interface is called successfully.

First, import the necessary header files. The login interface is in "TUICore", and we also need to import "TUICallKit".

1. import TUICore
2. import TUICallKit

Next, let's complete the simple UI setup:

• Set the starting position at x = 100, y = 100.
• Set the button's width to 50 and height to 20.
• Set the button's text content to "Login".
• Set the button's background color to gray.

1. let 1oginBtn = {
2.    let btn = UIButton(frame: CGRect(x: 100, y: 100, width: 50, height: 20))
3.    btn.setTitle("Login", for: .normal)
4.    btn.backgroundColor = .gray
5.    return btn
6. }()

Next, let's add event handling and set the entry point for the click event:

• Bind the click event.
• Add the button to the "view".

1. loginBtn.addTarget(self, action: #selector(login), for:.touchUpInside)
2. view.addSubview(loginBtn)

Step 4: Generate User Signature

Now that we have completed the basic UI setup, when we click the button on the screen, we need to call the "TUILogin.login" function for login. To do this, we need to obtain 3 important parameters: SDKAppID, userID, and userSig.

So how do we get these 3 parameters?

• SDKAppID can be obtained from the console.
• userID is the name you assigned to the user during login. Let's use "call" as an example here.

userSig can be generated in the console. Now let's focus on how to generate the userSig:

• In the console, click on "Call" and then click on the <userSig generation> button.
• Select the application we just created.
• Enter userID as "call".
• Click on the <Generate> button.
• Copy the generated user signature and paste it into the project.

Step 5: Test the Login Functionality

Now, when we run the application in the simulator, we can see a button with the text "Login" on the screen. When we click it, we should see the word "Login" in the console, indicating that we have successfully logged in.

Step 6: Configure the Video Call Interface

The login interface has been successfully configured. Next, we will initiate a video call using the configured call interface.

Before making a video call, we need to add permissions for the required devices in the iOS project: camera and microphone.

Here's how to add camera functionality and label it for "Call" usage:

• Go to the "Info.plist" file.
• Add the camera functionality.
• Label it for "Call" usage.

Adding microphone usage permission follows the same steps as mentioned above.

Now we have successfully granted permission to use the microphone and camera.

Next, we need to add a simple button to implement the functionality of making a phone call. You can copy the login button we just created and rename it as "call". The UI display position can be slightly lower than the login button.

The basic UI has been completed, and by adding "call" to the "view", it will be displayed on the screen.

Next, we need to invoke the functionality of making a phone call in the call function. The Call interface has 2 parameters:

• userID: The user ID of the person you want to call. Let's use "8558" as an example.
• callMediaType: The type of call, and we will choose "video".

Testing

Initiate a Video Call

Now the basic logic for audio and video Call has been implemented:

• Open the simulator and click the <Login> button to log in.
• Once you see the word "Login" in the console command line, click the <Call> button to initiate a video call to the user with the userID "8558".

Answer a Video Call

Now we have implemented the login and call buttons on the page, enabling us to make outgoing calls. But how do we answer an incoming call? Do we need to perform any additional operations?

The answer is no. TUICallKit componenthe has already provided the functionality to answer incoming calls.

Now, let's run our demo and initiate a video call from another device to the demo:

• Click on the <Login> button.
• Once you see the word "Login" in the console, use another device to initiate a video call to the demo.
• The demo will receive the video call, and we can click the answer button to answer the call.

Conclusion

A video and audio calling application on iOS is now set up! Isn't it simple?

You can even customize the UI of the calling application, and explore more possibilities of out video & voice chat SDK. We look forward to seeing your creations in the comments section! Alternatively, you can leave your email on the right-hand side to contact us anytime!

If you need more details or resources, please visit our official website: Tencent RTC and explore freely.

If you have any questions or need help, our support team is always ready to help. Please feel free to contact us, or join us in Discord.