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

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" } );

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>

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".

Figure1: Before Modifying

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.