Starter Deal! First 3 month from only  $9.9 /month!
Starter Deal! First 3 month from only  $9.9 /month!
Grab It Now 
Tencent RTC Blog
Tencent RTC Blog
Tutorial

How to Add Personal Info Feature in Your Calling Website or Web App

Tencent RTC - Dev Team

How to Add Personal Info Feature in Your Calling Website or Web App.png

Introduction

TUICallKit component provided by Tencent RTC Call allows you to add advanced feature to your audio and video calling website or Web app, such as custom nicknames and avatars. If your business has such requirements, you can easily integrate this feature by calling the "setSelfInfo" interface by Tencent RTC Call.

Video Tutorial

Instructions

Step 1: Call the setSelfInfo interface.

In the code section, create a "setSelfInfo" method and call the "TUICallKitServer.setSelfInfo" interface inside it. Pass your personal information as strings after the variables `nickName` and `avatar`. Here, I will use "Jack" as an example for the nickname.

 	await TUICallKitServer.setSelfInfo(
 		{   nickName: "xxx", 
     	avatar: "http://xxx" } );

the code of setSelfInfo interface settings.png

Step 2: Add the <setSelfInfo API> button.

Go back to the top of the code and add a <button> tag within the <template> tag. Wrap the button content "setSelfInfo API" with the <button> tag. In the Call Demo, this button will be displayed, and clicking on it will modify the nickname and avatar.

	<button @click="setSelfInfo">setSelfInfo API</ button>

add the button tag in the project.png

Testing

Now save, compile, and run! Then proceed to the Call Demo section. After nitializing the login, you will see the demo on the left side with the modified 8080 port. Expand the top menu to find the <setSelfInfo API> button. Click on it, make a call, and on the demo running on the 8081 port, you will receive a call from a user with the nickname "Jack".

the original nickname in the calling website.png

Figure1: Before Modifying

the modified nickname in the calling website.png

Figure2: After Modifying

Conclusion

It's quite simple, right? You can also input the URL of your own avatar after the "avatar" variable to achieve the feature of modifying your avatar.

If you want to learn more information, please visit our official website: Tencent RTC and explore freely. If you have any questions or need assistance, our support team is always ready to help. Please feel free to contact us, or join us in Discord.

Call
Build App
Web