Back to Blog

How to Customize Personal Info in Your iOS Calling App

Tencent RTC-Dev Team

Jul 30, 2024

After you have built your own iOS audio and video calling app, you may want to customize your personal information, such as nickname and avatar, to show your character and interests. With the TUICallKit component provided by Tencent RTC Call, you can achieve this functionality using the "setSelfInfo" interface. This tutorial blog will guide you step by step on how to call the "setSelfInfo" interface with just one line of code to customize your nickname and avatar.

Why Tencent RTC Call is Preferred?

Tencent RTC Call (TUICallKit) is a UI component provided by Tencent RTC for users, especially developers, to make it beginner-friendly. We are committed to making our B2B products as user-friendly as consumer products:

Easy integration: It only takes a few minutes or a few lines of code to quickly build your own audio and video calling application.
Cross-platform compatibility: Tencent RTC Call supports iOS, Android, Web, and Flutter, which are popular platforms and frameworks.
Rich and diverse features: The TUICallKit component contains various interface functions that developers can freely combine and use.

If you are interested in more low-level technology, you can also pay attention to the SDKs provided by Tencent RTC, especially the Voice & Chat SDK, which is a highly popular product.

How to call setSelfInfo to customize personal information?

Video Tutorial

Note: This blog post is an extension of the "How to Build A Video Calling App on iOS" tutorial, focusing on advanced features. If you haven't built an iOS calling application using the TUICallKit component yet, please refer to the "How to Build A Video Calling App on iOS" tutorial blog post first. Follow the instructions there to create a Call application in the TRTC console.

Step 1: Add the <Set> button.

First, we need to add a <Set> button on the page. By clicking this button, we will execute the `setSelfInfo` interface to set the avatar and nickname information, enabling interaction between the user and the application. Now, let's go back to the iOS Demo project and complete the basic UI setup:

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

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

Step 2: Add button click event.

Now we need to add a click event for this button and then add the button to the view. In the event handler, we will call the `setSelfInfo` interface.

This interface has 4 parameters. The first parameter is the nickname, the second is the avatar, the third is the success callback, and the fourth is the failure callback.

1. TUICallKit.createInstance().setSelfInfo(nickname: "nickname", avatar: "profile photo URL", succ: {


2. }) { code, desc in


3. }

Here, I will use "TUICallKit" as an example. And you can use a pre-prepared online image URL as the avatar, passing it as a string. After successfully setting the information, print "setSelfInfo". If the setting fails, print the error code and error message.

Nickname: TUICallKit.
Avatar: Use the URL of an online image.
Successful setting: Use the "print" function to print "setSelfInfo".
Setting failure: Use the "print" function to print the error code and error message.

At this point, we have completed the implementation of the basic functionality.

Step 3: Run! Test the call.

Now let's run the program.

To compare the changes before and after the settings, we will use the official TUICallKit demo. After successfully logging in, make a call to it. After hanging up, click on the <Set> button to set the information successfully. Then make another call to it and observe the differences before and after the settings.

1. Make the first call after logging in.

Figure1: Successful Login

Figure2: Info Before the Settings

2.After hanging up, click on the <Set> button.

Figure3: Successful Setting up

3.Make the second call.

Figure4: Info After the Settings

Conclusion

You can also try using other avatars or nicknames that you like. Feel free to share your attempts in the comments section. If you encounter any errors or difficulties during development, please leave your questions on the right side of the blog page to contact us.

If you need more details or resources, please visit our official website: Tencent RTC or GitHub 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.