Enrich Your Calling Website with the Floating Window

Introduction

To meet certain business requirements, our audio and video calling website needs to incorporate advanced features such as a floating window. Tencent RTC provides Tencent RTC Call (TUICallKit) to fulfill this need. By simply adding two attributes to your Vue project file, you can quickly integrate the floating window feature into your audio and video calling website. This tutorial blog will guide you step-by-step on implementing the floating window feature in your Web application.

Video Tutorial

Integration

Let me introduce you to the two key attributes for implementing the Floating Window feature: `allowedMinimized` and `allowedFullScreen`.

• allowedMinimized: enables the minimization of the call interface, thus achieving the floating window functionality.
• allowedFullScreen: allows the call interface to be maximized, enabling full-screen mode.

Together, these two attributes complete the loop for the Floating Window feature.

Step1: Write the key attributes into your project.

Now, let's proceed with writing the code section. Write the `allowedMinimized` and `allowedFullScreen` attrubites within the "TUICallKit" tag, and set their values to "true".

	<TUICallKit
    	:allowedMinimized="true" 
    	:allowedFullScreen="true"
	  />

Now, the attributes for fullscreen and minimization have been successfully configured.

Step2: Create a local project to make a call.

Then, let's proceed to the project execution phase. Here, we can see two project files. The one on the left has the port number 8080, while the one on the right has 8081:

For the convenience of local testing, we can create another identical sample project. This project will be exactly the same as the Call Demo, and you can refer to the previous blog for the specific steps.

Testing

Perform a floating window demonstration test.

Now, let's begin the demo test.

Initialize the login, and then initiate a phone call. As you can see, there is already a floating window button on the interface:

Clicking the fullscreen button will enable fullscreen mode. Clicking it again will return to the previous state; Clicking the minimize button will hide the floating window. Clicking it again will restore it to its initial state:

Figure1: FullScreen

Figure2: Minimization

Conclusion

It's not difficult, right? You have successfully set your nickname and profile photo in your calling website. TUICallKit component provides other advanced features for your convenience.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.