how to build a video calling app on iOS.png

Call

How to Build A Video Calling App on iOS | Tencent RTC Blog

How to Build A Video Calling App on iOS

Set Up

Build App

iOS development

How to Customize Personal Info in Your iOS Calling App

How to Customize Personal Info in Your iOS Calling App.png

<img src="https://trtc.io/media/ecbad4bf-ea3d-4a71-8a6b-e810fc04f32a.png" alt="How to Customize Personal Info in Your iOS Calling App">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 <a href="https://trtc.io/products/call">Tencent RTC Call</a>, 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.<h3 style="margin-left:0pt;">Why Tencent RTC Call is Preferred?</h3>Tencent RTC Call (TUICallKit) is a UI component provided by <a href="https://trtc.io/">Tencent RTC</a> for users, especially developers, to make it beginner-friendly. We are committed to making our B2B products as user-friendly as consumer products:<ul><li>Easy integration: It only takes a few minutes or a few lines of code to quickly build your own audio and video calling application.</li><li>Cross-platform compatibility: Tencent RTC Call supports iOS, Android, Web, and Flutter, which are popular platforms and frameworks.</li><li>Rich and diverse features: The TUICallKit component contains various interface functions that developers can freely combine and use.</li></ul>If you are interested in more low-level technology, you can also pay attention to the <a href="https://trtc.io/sdkDownload">SDKs</a> provided by Tencent RTC, especially the Voice &amp; Chat SDK, which is a highly popular product.<h3 style="margin-left:0pt;">How to call setSelfInfo to customize personal information?</h3><div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/Nsyurl5IVHo?si=Znk93Jeom2cytxuV" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div>Video TutorialNote: 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 "<a href="https://trtc.io/blog/details/how-to-build-a-video-calling-app-on-ios">How to Build A Video Calling App on iOS</a>" tutorial blog post first. Follow the instructions there to create a Call application in the <a href="https://www.tencentcloud.com/account/login?s_url=https%3A%2F%2Fconsole.tencentcloud.com%2Ftrtc%2Fcall">TRTC console</a>.<h4 style="margin-left:0pt;">Step 1: Add the &lt;Set&gt; button.</h4>First, we need to add a &lt;Set&gt; 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:<ul><li>Set the starting position at x = 100, y = 200.</li><li>Set the button's width to 50 and height to 20.</li><li>Set the button's text content to "Set".</li><li>Set the button's background color to gray.</li></ul><pre><code class="language-javascript">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. }()
</code></pre><img src="https://trtc.io/media/e2e821ba-3676-4488-8be5-005dd94698f7.png" alt="The button <Set> UI coding.png"><h4 style="margin-left:0pt;">Step 2: Add button click event.</h4>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.<img src="https://trtc.io/media/c8f62f7a-7a26-4ff7-b8db-35784272de0b.png" alt="call the `setSelfInfo` interface.png">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.<pre><code class="language-javascript">1. TUICallKit.createInstance().setSelfInfo(nickname: "nickname", avatar: "profile photo URL", succ: {


2. }) { code, desc in


3. }</code></pre>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.<ul><li>Nickname: TUICallKit.</li><li>Avatar: Use the URL of an online image.</li><li>Successful setting: Use the "print" function to print "setSelfInfo".</li><li>Setting failure: Use the "print" function to print the error code and error message.</li></ul><img src="https://trtc.io/media/ed41fba9-9553-4141-937e-d9638908a999.png" alt="fill the 4 parameters of the interface `setSelfInfo`.png">At this point, we have completed the implementation of the basic functionality.<h4 style="margin-left:0pt;">Step 3: Run! Test the call.</h4>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 &lt;Set&gt; 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.<img src="https://trtc.io/media/cf94380d-bf87-4e6e-b611-ea257e8e1603.png" alt="log in successfully.png">Figure1: Successful Login<img src="https://trtc.io/media/ad31274e-f0d0-435f-8644-fd08d64084f8.png" alt="Info Before the Settings.png">Figure2: Info Before the Settings2.After hanging up, click on the &lt;Set&gt; button.<img src="https://trtc.io/media/3467d720-782b-4b39-b2c1-bfe921b59836.png" alt="Successful Setting up.png">Figure3: Successful Setting up3.Make the second call.<img src="https://trtc.io/media/140c7401-9a8d-4017-a639-ef41e0bc7f91.png" alt="Info After the Settings.png">Figure4: Info After the Settings<h3 style="margin-left:0pt;">Conclusion</h3>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: <a href="https://trtc.io/">Tencent RTC</a> or <a href="https://github.com/tencentyun/TUICallKit/blob/main/README.en.md">GitHub</a> and explore freely.If you have any questions or need help, our support team is always ready to help. Please feel free to <a href="https://trtc.io/contact">contact us</a>, or join us in <a href="https://discord.com/invite/hq7jW7zChW?s_url=https%3A%2F%2Ftrtc.io">Discord</a>.

How to Customize Personal Info in Your iOS Calling App | Tencent RTC Blog

How to Add Floating Window into Your iOS Calling App

How to Add Floating Window into Your iOS Calling App.png

<img src="https://trtc.io/media/2fc5ee59-32c5-4a33-acc0-908ce692e62f.png" alt="How to Add Floating Window into Your iOS Calling App.png">In your iOS calling app, you may encounter scenarios where users need to switch out of the call interface and perform some operations within the app. If you have such a requirement, it is essential to read this tutorial blog, which will guide you to add just a few lines of code to implement the floating window feature in iOS development.<h2 style="margin-left:0pt;">Why Tencent RTC Call is Preferred？</h2>This tutorial blog uses the <a href="https://trtc.io/products/call">Tencent RTC Call (TUICallKit)</a> component, which provides a simple and easy-to-integrate enableFloatingWindow interface. It is very friendly for developers with limited experience. Moreover, it comes with UI, saving developers a lot of time and effort. Below are the detailed integration steps. Let's get started and give it a try!<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/W99ijo0bGwc?si=AnQ4u62cwtLQ8BKb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div>Video Tutorial<h2 style="margin-left:0pt;">How to Add Floating Window Feature in Your iOS App？</h2>Note: If you haven't created a Tencent RTC Call application yet, please refer to the blog "<a href="https://trtc.io/blog/details/how-to-build-a-video-calling-app-on-ios">How to Build A Video Calling App on iOS</a>" and follow the steps in the <a href="https://www.tencentcloud.com/account/login?s_url=https%3A%2F%2Fconsole.tencentcloud.com%2Ftrtc%2Fcall">TRTC console</a> to create one.<h4 style="margin-left:0pt;">Step 1: Add a button to enable the floating window in the call interface.</h4>First, go to your iOS project and copy the following code to add the UI for the button that enables the floating window:<ul><li>Set the starting position at x = 100, y = 250.</li><li>Set the button's width to 50 and height to 20.</li><li>Set the button's text content to "Enable".</li><li>Set the button's background color to gray.</li></ul><pre><code class="language-java">1. let enableFloatBtn = {
2. let btn = UIButton(frame: CGRect(x: 100, y: 250, width: 50, height: 20))
3. btn.setTitle("Enable", for: .normal)
4. btn.backgroundColor = .gray
5. return btn
6. }()
</code></pre><img src="https://trtc.io/media/15e10971-8c20-42ad-8fce-4f73dc66ce6e.png" alt="enable floating window button UI set up.png">Then, in the "viewDidLoad" function, add the following two lines of code to add the &lt;Enable&gt; button to the view:<pre><code class="language-java">1. enableFloatBtn.addTarget[self,action:#selector(enableFloatWindow),for:.touchUpInside)
2. view.addSubview (enableFloatBtn)
</code></pre><img src="https://trtc.io/media/1b3225fe-95a7-40e4-baa6-9964d344b745.png" alt="add the button to the view.png"><h4 style="margin-left:0pt;">Step 2: Call the enableFloatWindow interface.</h4>Now, let's design the "enableFloatWindow" function and call the `enableFloatWindow` interface provided by the TUICallKit component, setting the key value to "true":<pre><code class="language-java">1. @objc func enableFloatwindow(){
2. TUICalIkit.createInstance().enableFloatWindow(enable:true)
3. }
</code></pre><img src="https://trtc.io/media/7c54ba5f-d880-4c45-a248-0f933e643d3d.png" alt="call the `enableFloatWindow` interface.png"><h4 style="margin-left:0pt;">Step 3: Testing.</h4>Now, let's run the official demo of TUICallKit. First, click the &lt;Login&gt; button. Once you see the word "Login" on the console, click the &lt;Enable&gt; button. This will enable the floating window feature.<img src="https://trtc.io/media/3478eb43-a54c-4fae-8776-eb27364bbf77.png" alt="clicking the <Login> button.png"><img src="https://trtc.io/media/ea9c5a04-a64b-43d6-a8b3-5c9cbdd4bf28.png" alt="no button for floating window.png"><img src="https://trtc.io/media/8b188720-b64f-42f5-975f-7f0140a8b57a.png" alt="the button to start the floating window.png"><img src="https://trtc.io/media/575afce1-f20f-44a6-974d-656c182e016d.png" alt="7.png">Floating window mode:<img src="https://trtc.io/media/b9aee521-b422-46db-9e6e-92531abb4e24.png" alt="floating window mode.png">Fullscreen mode:<img src="https://trtc.io/media/91d1dbfd-3c8c-4e6e-b261-6dd48e34231b.png" alt="fullscreen mode.png"><h2 style="margin-left:0pt;">Conclusion</h2>It's quite simple, isn't it? And it's also very interesting! Currently, the Tencent RTC Call (TUICallKit) component for iOS platform does not support floating windows between applications. However, our programmers are working hard to develop this feature, so please stay tuned!If you can't wait, you can explore the <a href="https://trtc.io/document/46660/50990/50991">Call for the Android platform</a> in the official documentation, which provides more advanced features. We have also prepared tutorial videos and blogs for your support.If you need more details or resources, please visit our official website: <a href="https://trtc.io/">Tencent RTC</a> or <a href="https://github.com/tencentyun/TUICallKit/blob/main/README.en.md">GitHub</a> and explore freely.If you have any questions or need help, our support team is always ready to help. Please feel free to <a href="https://trtc.io/contact">contact us</a>, or join us in <a href="https://discord.com/invite/hq7jW7zChW?s_url=https%3A%2F%2Ftrtc.io">Discord</a>.

How to Add Floating Window into Your iOS Calling App | Tencent RTC Blog

How to Add Call Status Observer in Your iOS App

How to Add Call Status Observer in Your iOS App.png

<img src="https://trtc.io/media/8fc85203-12aa-44ff-9b9a-8fa69e28113c.png" alt="How to Add Call Status Observer in Your iOS App.png">In your audio and video calling application on the iOS platform, you may need to use callback functions to obtain the user's call status and make timely responses. For example, when you know that the current call is a group call, you may need to allocate more resources to reduce latency and ensure a better calling experience for users. <a href="https://trtc.io/products/call">Tencent RTC Call (TUICallKit)</a> provides developers with a rich set of callback functions to meet various business requirements.For more information, please refer to <a href="https://trtc.io/document/46660/51002/51008/51013">our technical documentation</a>, which includes the API documentation for TUICallObserver. It provides detailed information about the parameters and more. Feel free to explore it.Now, let's take the callbacks "onCallReceived", "onCallBegin", and "onCallEnd" as examples to guide you on how to invoke callback functions in your iOS project.<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/HSV1QQSeGTc?si=1tyOhp7hBmoqeKvb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div>Video Tutorial<h3 style="margin-left:0pt;">How to Use TUICallObserver in Your iOS Calling App?</h3>Note: If you haven't set up your own iOS audio and video calling application yet, please refer to this tutorial blog: <a href="https://trtc.io/blog/details/how-to-build-a-video-calling-app-on-ios">"How to Build A Video Calling App on iOS"</a> and follow the steps to enter the <a href="https://www.tencentcloud.com/account/login?s_url=https%3A%2F%2Fconsole.tencentcloud.com%2Ftrtc%2Fcall">TRTC console</a> for creating your Call application.<h4 style="margin-left:0pt;">Step 1: Import the TUICallEngine component and add the TUICallObserver protocol.</h4>To begin, navigate to your iOS project and import the TUICallEngine component. Then, add the TUICallObserver protocol at the appropriate location, as shown in the following image:<img src="https://trtc.io/media/a5a7ca9c-2974-46de-89b0-69dfce7f2c52.png" alt="import the TUICallEngine component &amp; add the TUICallObserver protocol.png">Next, register the callback events in the TUILogin function. Here, you will need to use TUICallEngine and add the callbacks:<pre><code class="language-javascript">import TUICallEngine

TUICallEngine.createInstance().add(self)

public func onCallBegin(roomId: TUIRoomId, callMediaType: TUICallMediaType, callRole: TUICallRole) {
}
public func onCallEnd(roomId: TUIRoomId, callMediaType: TUICallMediaType, callRole: TUICallRole, totalTime: Float) {
}
public func onUserNetworkQualityChanged(networkQualityList: [TUINetworkQualityInfo]) {
}
</code></pre><img src="https://trtc.io/media/8850d360-37f8-4218-9397-7bf861ccd537.png" alt="using TUICallEngine and adding the callbacks.png"><ul><li>onCallReceived: called when we receive an incoming call.</li><li>onCallBegin: called when we start a call.</li><li>onCallEnd: called when we end a call.</li></ul><h4 style="margin-left:0pt;">Step 2: Print callback information in the callback functions.</h4>Now, let's print these callback information to the console.When we receive an incoming call, we can obtain some parameters in "onCallReceived":<ul><li>callerId: the user ID of the inviter.</li><li>calleeIdList: the invitee list.</li><li>groupId: the group ID.</li><li>callMediaType: the call type, which can be video or audio.</li><li>userData: user-added extended fields.</li></ul>When a call starts, we also receive callback information in "onCallBegin":<ul><li>roomId: the room ID.</li><li>callMediaType: the call type, which can be video or audio.</li><li>callRole: the role, which can be caller or callee.</li></ul>Similarly, when a call is hung up, we can also receive callback information in "onCallEnd":<ul><li>roomId: the room ID.</li><li>callMediaType: the call type, which can be video or audio.</li><li>callRole: the role, which can be caller or callee.</li><li>totalTime: the call duration.</li></ul><img src="https://trtc.io/media/893e325f-bc5e-4d80-9e0f-5e810aef487b.png" alt="print callback information to the console.png"><h3 style="margin-left:0pt;">Testing</h3>At this point, we have successfully registered the callbacks. Now, we can run our demo and test:<ul><li>Click on &lt;Login&gt;.</li><li>Once successful, initiate a call to it.</li><li>Check the console to view the printed information from the callback functions.</li></ul><img src="https://trtc.io/media/d8d19bf8-c9f8-4a18-a84d-224132b59fb2.png" alt="log in.png">You can see that the console has received the callback from "onCallReceived":<ul><li>The callerId is 8558.</li><li>The calleeIdList concludes 1234.</li><li>The groupId is empty because there is only one called user.</li><li>The callMediaType is audio call.</li></ul><img src="https://trtc.io/media/eb970305-7d2a-49ab-8d40-a29aa206a1f7.png" alt="call the &quot;onCallReceived&quot;.png">Now, when we answer the call, we can also receive callback information from "onCallBegin" in the console:<img src="https://trtc.io/media/44d1d244-20b8-497a-b142-1ed5b6ef8935.png" alt="call the &quot;onCallBegin&quot;.png">When we hang up the call at this point, we receive callback information from "onCallEnd" in the console:<img src="https://trtc.io/media/df9cec01-448e-4640-ba07-a6c3ded012d1.png" alt="call the &quot;onCallEnd&quot;.png"><h3 style="margin-left:0pt;">Conclusion</h3>The usage of other callbacks is similar. Additionally, if you wish to invoke other callbacks, you can refer to the <a href="https://trtc.io/document/46660/51002/51008/51010">official documentation</a>. In the API documentation, specifically the <a href="https://trtc.io/document/46660/51002/51008/51013">TUICallObserver documentation</a> page, you can find information on which callbacks are supported. Use these callbacks to accomplish more complex and diverse business functionalities.<img src="https://trtc.io/media/b1305d59-0e35-4060-84b0-571ae623fbcb.png" alt="other callbacks of TUICallObserver.png">If you need more details or resources, please visit our official website: <a href="https://trtc.io/">Tencent RTC</a> or <a href="https://github.com/tencentyun/TUICallKit/blob/main/README.en.md">GitHub</a> and explore freely.If you have any questions or need help, our support team is always ready to help. Please feel free to <a href="https://trtc.io/contact">contact us</a>, or join us in <a href="https://discord.com/invite/hq7jW7zChW?s_url=https%3A%2F%2Ftrtc.io">Discord</a>.

"iOS development"

NOTHING FOUND