WebRTC Trtc Logo
Tencent RTC Blog
Tutorial

Enrich Your Calling Website with the Floating Window

Tencent RTC - Dev Team

Enrich Your Calling Website with the Floating Window.png

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

change the value of these two attributes to "true".png

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:

Create a local project :port number 8080 and 8081.png

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:

the button to open the floating window in your calling website.png

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:

the fullscreen button to enable fullscreen mode.pngFigure1: FullScreen

he minimize button to hide the calling window in your calling website.pngFigure2: 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.

Call
Web
Build App
Related Product
CallCall

High-quality video and voice call experience on any platform

Get 10,000 free minutes here.
Get Started for Free
Talk to Our Expert
Submit

By clicking the submit button, you agree to allow Tencent Real-Time Communication to store and process the information above for contact purposes. Please read our Privacy Policy