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 id="Why-Tencent-RTC-Call-is-Preferred？" 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 id="How-to-Add-Floating-Window-Feature-in-Your-iOS-App？" 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://console.trtc.io/">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 datasrc="https://trtc.io/media/3478eb43-a54c-4fae-8776-eb27364bbf77.png" alt="clicking the <Login alt="img"> button.png"><img datasrc="https://trtc.io/media/ea9c5a04-a64b-43d6-a8b3-5c9cbdd4bf28.png" alt="no button for floating window.png" alt="img"><img datasrc="https://trtc.io/media/8b188720-b64f-42f5-975f-7f0140a8b57a.png" alt="the button to start the floating window.png" alt="img"><img datasrc="https://trtc.io/media/575afce1-f20f-44a6-974d-656c182e016d.png" alt="7.png" alt="img">Floating window mode:<img datasrc="https://trtc.io/media/b9aee521-b422-46db-9e6e-92531abb4e24.png" alt="floating window mode.png" alt="img">Fullscreen mode:<img datasrc="https://trtc.io/media/91d1dbfd-3c8c-4e6e-b261-6dd48e34231b.png" alt="fullscreen mode.png" alt="img"><h2 id="Conclusion" 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/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 Feature in Your iOS App？

Call

7bb5b174-ce4b-4eed-aa1a-65e5da02aaed.webp

Tencent RTC is the Preferred Audio/Video Solution

View and Check the Floating Window Effect

Add Floating Window Feature in Your Flutter Calling App

large_float window.png

medium_float window.png

small_float window.png

thumbnail_float window.png

Add Floating Window Feature in Your Flutter Calling App.png

<img src="https://trtc.io/media/da2f33f5-3ff0-4cf6-bde4-61d914758aee.png" alt="Add Floating Window Feature in Your Flutter Calling App.png">Tencent RTC provides <a href="https://trtc.io/products/call">Tencent RTC Call</a> (TUICallKit) for developers with the Floating Window feature, which allows you to perform concurrent multithreading, improve efficiency, and add convenience and flexibility. It also enhances your gaming experience by enabling you to have conversations with other players without leaving the game interface. Let's dive into how this feature can revolutionize your audio and video call experience.<h2 id="Tencent-RTC-is-the-Preferred-Audio/Video-Solution" id="Tencent-RTC-is-the-Preferred-Audio/Video-Solution" style="margin-left:0pt;">Tencent RTC is the Preferred Audio/Video Solution</h2>After recommending our integration solution for TUICallKit with Tencent RTC, I would like to highlight why Tencent RTC is your preferred choice:Scenario-specific components — Tencent RTC provides a rich set of components to help you quickly implement features such as audio chat, conferencing, interactive live streaming, and interactive teaching.Cross-platform global connection — Tencent RTC is a cross-platform solution compatible with more than 5,000 device models. It provides client SDKs and Tencent Cloud APIs for both mobile and desktop platforms including iOS, Android, Windows, macOS, and web.Easy and quick integration — You can run a Tencent RTC demo and integrate basic TRTC features into your project with a few lines of simple code in minutes.Low latency, low stutter rate, high video/audio quality — Tencent RTC maintains an average end-to-end latency of below 300 ms across different countries and regions and supports 720p and 1080p video and allows video calls even under a packet loss rate of 70%.<h2 id="Why-We-Need-Floating-Window-Feature" id="Why-We-Need-Floating-Window-Feature" style="margin-left:0pt;">Why We Need Floating Window Feature</h2>Imagine being in the middle of an online conference or an intense gaming session, and suddenly, an incoming call forces you to switch screens. It's a common frustration that many of us face daily. But what if there was a solution? &nbsp;Implement the Floating Window feature!This innovative feature is designed to solve the problem of screen-switching during voice or video calls. Whether you're participating in an online conference, viewing shared slides, browsing social media, or even playing games, the Floating Window feature allows you to handle incoming calls without interrupting your current activity — no more switching between apps to check messages during a call.<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/F51p3BflRvQ?si=X9thwR2QSKG84o0P" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div>Video TutorialIf your audio/video calling app is built on the Flutter framework, let's dive into the quick tutorial below! With just one simple line of code, you can easily integrate the feature: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;TUICallKit.instance.enableFloatWindow(true); &nbsp;Let's quickly open the "<a href="https://trtc.io/document/54896#4.-call-status-listening">Integration Tencent RTC Call(TUICallKit) - Flutter</a>" development documentation and <a href="https://console.trtc.io/">get started for free</a> with the integration!<h2 id="Implement-the-Floating-Window-Feature" id="Implement-the-Floating-Window-Feature" style="margin-left:0pt;">Implement the Floating Window Feature</h2>First, copy `TUICallKit.instance.enableFloatWindow(true)` and paste it in your Flutter project.<img src="https://trtc.io/media/b5c05842-ebf8-4208-9ccd-a1378233b945.png" alt="add the enableFloatingWindow interface to the flutter calling app.png">Figure 1: code in VSCodeSave, compile, and run! The Floating Window feature is now enabled.<h2 id="View-and-Check-the-Floating-Window-Effect" id="View-and-Check-the-Floating-Window-Effect" style="margin-left:0pt;">View and Check the Floating Window Effect</h2>Once it's up and running, you can initiate an audio call to 8888 to see the effect.You'll notice a "&lt;Open Floating Window&gt;" button in the top left corner of the interface. Clicking this button will open the floating window, and clicking it again will return you to the full screen.<img src="https://trtc.io/media/35d4c149-64a6-45ee-94fe-5ed2c0335042.png" alt="the floating window button displayed on the screen.png">Figure 2: button<img src="https://trtc.io/media/a7c60bd1-c7c3-405f-99ee-a87ea0e78d5b.png" alt="the floating window on the screen.png">Figure 3: float window display<h2 id="Conclusion" id="Conclusion" style="margin-left:0pt;">Conclusion</h2>Isn't it simple? <a href="https://trtc.io/">Tencent RTC</a> is committed to enriching your applications and making them more user-friendly, while also ensuring easy integration. Although our product is PaaS, we strive to provide a seamless product experience similar to SaaS, actively responding to customer needs. If you want to learn more information, please visit our official website: <a href="https://trtc.io/">Tencent RTC,</a> and <a href="https://console.trtc.io/">get started for free</a>.If you have any questions or need assistance, our support team is always ready to help. Please feel free to <a href="https://trtc.io/contact">contact us</a>, or join us on <a href="https://discord.com/invite/hq7jW7zChW?s_url=https%3A%2F%2Ftrtc.io">Discord</a>.

Add Floating Window Feature in Your Flutter Calling App  | Tencent RTC Blog

Set Up

Build App

How to Use TUICallObserver in Your iOS Calling App?

How to Add Call Status Observer in Your iOS App

large_封面1.png

medium_封面1.png

small_封面1.png

thumbnail_封面1.png

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/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<h2 id="How-to-Use-TUICallObserver-in-Your-iOS-Calling-App?" style="margin-left:0pt;">How to Use TUICallObserver in Your iOS Calling App?</h2>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://console.trtc.io/">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"><h2 id="Testing" style="margin-left:0pt;">Testing</h2>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"><h2 id="Conclusion" style="margin-left:0pt;">Conclusion</h2>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/51010">official documentation</a>. In the API documentation, specifically the <a href="https://trtc.io/document/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>.

How to Add Call Status Observer in Your iOS App | Tencent RTC Blog

iOS development

large_how to build a video calling app on iOS.png

medium_how to build a video calling app on iOS.png

small_how to build a video calling app on iOS.png

thumbnail_how to build a video calling app on iOS.png

how to build a video calling app on iOS.png

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

How to Build A Video Calling App on iOS

How to Customize Personal Info in Your iOS Calling App

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

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 Add Floating Window into Your iOS Calling App

Why Tencent RTC Call is Preferred？

How to Add Floating Window Feature in Your iOS App？

Step 1: Add a button to enable the floating window in the call interface.