How to Add Floating Window into Your iOS Calling App

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.

Why Tencent RTC Call is Preferred？

This tutorial blog uses the Tencent RTC Call (TUICallKit) 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!

Video Tutorial

How to Add Floating Window Feature in Your iOS App？

Note: If you haven't created a Tencent RTC Call application yet, please refer to the blog "How to Build A Video Calling App on iOS" and follow the steps in the TRTC console to create one.

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

First, go to your iOS project and copy the following code to add the UI for the button that enables the floating window:

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

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. }()

Then, in the "viewDidLoad" function, add the following two lines of code to add the <Enable> button to the view:

1. enableFloatBtn.addTarget[self,action:#selector(enableFloatWindow),for:.touchUpInside)
2. view.addSubview (enableFloatBtn)

Step 2: Call the enableFloatWindow interface.

Now, let's design the "enableFloatWindow" function and call the `enableFloatWindow` interface provided by the TUICallKit component, setting the key value to "true":

1. @objc func enableFloatwindow(){
2.     TUICalIkit.createInstance().enableFloatWindow(enable:true)
3. }

Step 3: Testing.

Now, let's run the official demo of TUICallKit. First, click the <Login> button. Once you see the word "Login" on the console, click the <Enable> button. This will enable the floating window feature.

Floating window mode:

Fullscreen mode:

Conclusion

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 Call for the Android platform 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: 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.