<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? 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: TUICallKit.instance.enableFloatWindow(true); 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 datasrc="https://trtc.io/media/a7c60bd1-c7c3-405f-99ee-a87ea0e78d5b.png" alt="the floating window on the screen.png" alt="img">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>.

Tencent RTC is the Preferred Audio/Video Solution

View and Check the Floating Window Effect

Call

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

Diving Deep into an Example Callback Method: 'onCallReceived'

Add Call Status Observer in Your Flutter Calling Project

large_封面1.png

medium_封面1.png

small_封面1.png

thumbnail_封面1.png

Add Call Status Observer in Your Flutter Calling Project.png

<img src="https://trtc.io/media/4e3df0ec-1bc4-4b8f-a59c-34f9a963c390.png" alt="Add Call Status Observer in Your Flutter Calling Project.png">Have you ever wondered how to monitor and respond to the call status within your Flutter voice calling or video calling application?&nbsp;Do you want to easily add call state monitoring into your Flutter calling project?Tencent RTC provides Tencent RTC Call (TUICallKit) for your Flutter audio/video calling project (<a href="https://flutter.dev/">Flutter</a> 3.0 or higher version). Whether the video/audio call status is incoming, outgoing, answered, or ended, you can stay informed and take appropriate actions.<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/MwRNrFHvFMI?si=vAqB03OgyMEnFjio" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div>Video TutorialIn this blog post, we will introduce how to listen on any call status you want by the callback method. Join us on this coding journey as we uncover the steps to implement call status listening in your Flutter project.<h2 id="The-Callback-Methods-We-Provide-for-You" id="The-Callback-Methods-We-Provide-for-You" style="margin-left:0pt;">The Callback Methods We Provide for You</h2>In the `TUICallObserver`, there are several callback methods available. Let me briefly introduce 5 methods of them:<pre><code class="language-java">TUICallEngine.instance.addObserver(TUICallObserver(
 onError: (int code, String message) {

 }, onCallBegin: (TUIRoomId roomId, TUICallMediaType callMediaType, TUICallRole callRole) {
 
 }, onCallEnd: (TUIRoomId roomId, TUICallMediaType callMediaType, TUICallRole callRole, double totalTime) { 


 },, onUserNetworkQualityChanged: (List&lt;TUINetworkQualityInfo&gt; networkQualityList) {
 
 }, onCallReceived: (String callerId, List&lt;String&gt; calleeIdList, String groupId, TUICallMediaType callMediaType) {
 }
));
</code></pre><ul><li>`onCallReceived` for receiving a call.</li><li>`onCallCanceled` for call cancellation.</li><li>`onCallBegin` for call start.</li><li>`onCallEnd` for call end.</li><li>`onCallMediaTypeChanged` for the callback for media type change which is triggered when there is a switch from video to audio during a call.</li></ul>There are also other callback information related to audio/video calls:<img src="https://trtc.io/media/eca11f2f-8020-4f57-b202-9d84cad82855.png" alt="other callback information related to audio/video calls.png"><h2 id="Diving-Deep-into-an-Example-Callback-Method:-'onCallReceived'" id="Diving-Deep-into-an-Example-Callback-Method:-'onCallReceived'" style="margin-left:0pt;">Diving Deep into an Example Callback Method: 'onCallReceived'</h2>The `onCallReceived` callback is triggered when we receive a call invitation. We can handle our own business logic within this callback.<h3 style="margin-left:0pt;">Step 1: Fill in the parameters.</h3>First, in the "<a href="https://trtc.io/document/54896#4.-call-status-listening">Integration Tencent RTC Call (TUICallKit)-Flutter</a>" development documentation, locate the code for the callback method and copy it to your Flutter project. Then, remove other callback methods and keep only `onCallReceived`.In this callback method, a total of 4 parameters will be passed in and stored:<ul><li>&nbsp;String callerId: ID of the caller.</li><li>List&lt;String&gt; calleeIdList: List of IDs of the called parties.</li><li>String groupId: ID of the group call.</li><li>TUICallMediaType callMediaType: Type of the call.</li></ul>Inside the method body, we can use the print function to display these parameters on the console:<pre><code class="language-java">void onCallReceived(String callerId, List&lt;String&gt; calleeIdList, String groupId, TUICallMediaType callMediaType) {
 print('TUICallKit_onCallRecieved: Caller ID: $callerId,CalleeId List: $calleeIdList,groupId: $groupId,callMediaType: $callMediaType');
}</code></pre><img src="https://trtc.io/media/c28ccd4a-63fe-492e-8a3c-6efeae476534.png" alt="print the information of this callback &quot;onCallRecieved&quot;.png"><h3 style="margin-left:0pt;">Step 2: Run the program and observe the results.</h3>Save your Flutter project file, compile, and run it. Then, open a virtual device with the ID 6666 and initiate a call to it from another device with the ID 8888.When the device 6666 receives the call, the `onCallReceived` callback will be triggered. By printing the callback information, you can view the details of the call on the console:<ul><li>CallerId: 8888.</li><li>CalleeIdList: [6666] (as only device 6666 is being called).</li><li>groupId: Empty (as it is a one-to-one call).</li><li>callMediaType: audio (indicating an audio call).</li></ul><img src="https://trtc.io/media/34f08220-1f44-49ae-8525-9faba094cb15.png" alt="the information of the call ststus printed in the console.png"><h2 id="Conclusion" id="Conclusion" style="margin-left:0pt;">Conclusion</h2>Other callback methods are similar to `onCallReceived`. You can refer to this document or tutorial videos to explore freely! We look forward to seeing screenshots of your callback information in the comments section. If you want to learn more information, please visit our official website: <a href="https://trtc.io/">Tencent RTC</a> and explore freely.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 in <a href="https://discord.com/invite/hq7jW7zChW?s_url=https%3A%2F%2Ftrtc.io">Discord</a>.

Add Call Status Observer in Your Flutter Audio/Video Calling Project | Tencent RTC Blog

Set Up

Build App

RTC Engine

Personal Info Settings to Your Flutter Project with 1 Line of Code

Personal Info Settings to Your Flutter Project with 1 Line of Code.png

<img src="https://trtc.io/media/88e68a9c-0c4c-49df-96a1-37880e973d89.png" alt="Personal Info Settings to Your Flutter Project with 1 Line of Code.png">In order to provide a personalized experience for users in your audio/video calling project, <a href="https://trtc.io/products/call">Tencent RTC Call</a> (TUICallKit) offers a custom service to set your exclusive nickname and avatar photo. You could integrate the <a href="https://trtc.io/products/call">Tencent RTC Call</a> (TUICallKit) component into your Flutter project (<a href="https://flutter.dev/">Flutter</a> 3.0 or higher version).<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/bT1qVrNvFM4?si=D1fCw4Lh644ZXS1C" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div>Video&nbsp;TutorialTo customize your nickname or profile photo, use the following API for update:<pre><code class="language-java">TUIResult result = TUICallKit.instance.setSelfInfo('userName', 'url:********');</code></pre><img src="https://trtc.io/media/8a711b86-ec31-49c0-bebd-34901f4fd8fa.png" alt="note of the update of callee's nickname and profile photo.png"><h2 style="margin-left:0pt;">Step 0: Hand login asynchronous flow</h2><hr>As the login function in the Tencent RTC Call (TUICallKit)'s interface is an asynchronous flow, we need to make a simple modification to the relevant code as shown in the following steps:<ul><li>Add 'async' after the parentheses of the ' _initCallkit() ' function.</li><li>Add 'await' before the ' TUICallKit.instance.login() ' function in the body of the ' _initCallkit() ' function.</li></ul><img src="https://trtc.io/media/f73d343d-6c0f-4b72-8916-f8e75ce8d888.png" alt="login function before modification.png">image 1: before modification<img src="https://trtc.io/media/c7839819-5761-4a1c-9fb5-d547544d1ce2.png" alt="login function after modification.png">image 2: after modification<h2 style="margin-left:0pt;">Step 1: Customize personal information</h2><hr>Use the API provided by Tencent RTC (TUICallKit) to modify the nickname and avatar. Let's copy this line of code and navigate to your Flutter project to paste it.<pre><code class="language-java">TUIResult result = TUICallKit.instance.setSelfInfo('userName', 'url:********');</code></pre>Then pass our user nickname and avatar URL in string format, like this:<img src="https://trtc.io/media/5ee085ff-42f3-4384-b3e6-66ec6c62002d.png" alt="the modifocation of setSelfInfo interface.png">image 3: modification interfaceThis is just an example, and you can modify them to your liking as long as you pass them in string format. Now the interface call is ready.<h2 style="margin-left:0pt;">step 2：Run your program</h2><hr>Let's compile and run your code. And then you can open another device and initiate an audio call to "6666".<img src="https://trtc.io/media/17b20bf7-985d-471b-b446-5698b8a98a57.png" alt="initiate an audio call between 2 devices.png">image 4: two prepared devicesAfter connecting, you will see the basic information of "6666" with "TUICalkit" as his nickname and the newly set avatar as the URL we just passed in on the other device. On the "6666" device, you will see that the user who initiated the audio call has the nickname "8888" and his avatar is displayed.<img src="https://trtc.io/media/bc358a5e-b2ff-474f-9e13-0f2c36c72ed9.png" alt="make a audio call.png">image 5: making a callWe answer the call and it works fine.<img src="https://trtc.io/media/4695b11b-537c-4cc7-841a-cb21e94c68af.png" alt="answering the audio call.png">image 6: answering the call<h2 style="margin-left:0pt;">Conclusion</h2><hr>Now by using the <a href="https://trtc.io/products/call">Tencent RTC Call</a> (TUICallKit) interface, customizing nicknames and avatars is complete. If you have more advanced requirements such as AI-powered noise cancellation and spatial audio, we offer a fully customized audio/video communication SDK &amp; API family for web, mobile, and games. Tailor your video communication experience to meet your specific needs and captivate your audience with <a href="https://trtc.io/">Tencent RTC</a>.If you have any questions or need assistance, our support team is always ready to help. Please feel free to get in <a href="https://trtc.io/contact">touch with us</a>, or join us in <a href="https://discord.com/invite/hq7jW7zChW?s_url=https%3A%2F%2Ftrtc.io">Discord</a>.

Customize the Nickname and Profile Photo to Your Flutter Calling App with 1 Line of Code | Tencent RTC

How to integrate Tencent RTC Call (TUICallKit)?

Add Video Call to Your Flutter Project in Minutes

medium_add-video-call-with-ui-in-flutter.png

small_add-video-call-with-ui-in-flutter.png

thumbnail_add-video-call-with-ui-in-flutter.png

add-video-call-with-ui-in-flutter.png

Tencent RTC offers audio/video communication SDK and UI kits, and delivers a global end-to-end latency of below 300 ms on average. With Tencent RTC, you can quickly develop cost-effective, high-quality interactive audio/video features. We will be using <a href="https://trtc.io/document/54896?utm_source=twitter&amp;utm_medium=rtc&amp;utm_term=call&amp;utm_campaign=tutorial&amp;_channel_track_key=7l2AVMTC">Tencent RTC Call (TUICallKit</a>) , a customized UI component designed specifically for call scenarios. We will guide you through the step-by-step process of quickly adding audio and video calling functionality to your Flutter project (<a href="https://flutter.dev/">Flutter</a> 3.0 or higher version) in minutes.<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/zZRInxrE6wU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div><h2 id="How-to-integrate-Tencent-RTC-Call-(TUICallKit)?" style="margin-left:0pt;">How to integrate Tencent RTC Call (TUICallKit)?</h2>Create Your Application in the Console<ul><li>Access the <a href="https://console.trtc.io/">Tencent RTC console</a> and click on "Create Application."</li><li>After successfully creating the application, choose the 7-day free trial option.</li><li>Take note of your application's name, SDK, APP ID, and secret key.</li></ul><img src="https://trtc.io/media/9e923617-60d4-4b2c-997c-adbea93ebf46.png" alt="creating the call app.png">Import the Tencent RTC Call (TUICallKit) Component into Your Project<ul><li>Open your newly created Flutter project.</li><li>Import the <a href="https://trtc.io/sdkDownload?utm_source=website&amp;utm_medium=blog&amp;utm_term=trtc&amp;utm_campaign=blog&amp;_channel_track_key=6tiILagC">latest version</a> of the Tencent RTC Call (TUICallKit) component into your project's configuration file.</li><li>Execute the command "flutter pub get" in the command line to import the component successfully.</li></ul><img src="https://trtc.io/media/fbf3dbb0-cc07-4e64-8cd1-686c6532a439.png" alt="execute the command &quot;flutter pub get&quot; in the command line.png">Configure the Project<ul style="list-style-type:disc;"><li>After importing the component, configure some basic information in your new project.</li><li>Import the necessary Dart files for using the Tencent RTC Call (TUICallKit) component.</li><li>Request camera and microphone permissions in the info.plist file under Runner in your iOS project.</li></ul><img src="https://trtc.io/media/2f054dd4-f3df-4176-a52e-724d9467328e.png" alt="configuration coding.png">Log in to the TUI Call Kit Component<ul><li>Log in to the Tencent RTC Call (TUICallKit) component in your Flutter project.</li><li>Use the "TUICallKit.instance.login" interface, providing the SDKAppID, user ID, and user signature as parameters.</li><li>Fill in the user ID (e.g., 6666) and generate the user signature using the User Sig Generation tool in the console.</li></ul><img src="https://trtc.io/media/d3051ede-53b0-41d5-86cb-864fcb154974.png" alt="fill the userID, SDKAppID and userSig in the login function.png"><h2 id="Run!-Make-and-Answer-a-Call" style="margin-left:0pt;">Run! Make and Answer a Call</h2><ul style="list-style-type:disc;"><li>Create a simple UI with a button to initiate the audio and video call.</li><li>Display the user ID (e.g., 6666) using a text widget.</li><li>Use the TUI call kit.instance.call interface to make a call to another user (e.g., 8888) when the button is clicked.</li></ul><img src="https://trtc.io/media/bcab3bf7-3063-43e0-a3fb-0d8b5f72b39f.png" alt="add the &quot;TUICallKit.instance.call&quot; interface.png"><ul><li>Implement the response to incoming calls in your Flutter project.</li><li>Use the "TUICallKit.instance.answer" interface to answer the call when prompted.</li></ul><img src="https://trtc.io/media/c1357e96-63dc-42e3-8c97-9a9db50cb917.png" alt="call demo.png"><h2 id="Conclusion" style="margin-left:0pt;">Conclusion</h2>Today, audio/video calling has become an essential communication tool, and setting up a video call has never been easier. With Tencent RTC Call (TUICallKit), you can seamlessly integrate video calling functionality into your Flutter projects, providing a simple and connected experience for your users.If you have more advanced requirements such as AI-powered noise cancellation and spatial audio, we offer a fully customized audio/video communication SDK &amp; API family for web, mobile, and games. Tailor your video communication experience to meet your specific needs and captivate your audience with <a href="https://trtc.io?utm_source=website&amp;utm_medium=blog&amp;utm_term=trtc&amp;utm_campaign=blog&amp;_channel_track_key=vk1DdHNL">Tencent RTC</a>.If you have any questions or need assistance, our support team is always ready to help. Please feel free to get in <a href="https://trtc.io/contact">touch with us</a>, or join us in <a href="https://discord.gg/hq7jW7zChW">Discord</a>.