Add Video Call to Your Flutter Project in Minutes

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

Call

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/46660/50990/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 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.tencentcloud.com/trtc?utm_source=youtube&amp;utm_medium=rtc&amp;utm_term=call&amp;utm_campaign=tutorial&amp;_channel_track_key=1hQROl6I">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 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 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 touch with us, or join us in <a href="https://discord.gg/hq7jW7zChW">Discord</a>.

Add Video Call with UI to Your Flutter Project in Minutes | Tencent RTC Blog

Set Up

Build App

Getting Started with Tencent Cloud Chat: A Step-by-Step Walkthrough 

Getting Started with Tencent Cloud Chat: A Step-by-Step Walkthrough .png

Chat

<img src="https://trtc.io/media/5b96ba30-61b7-4621-99d8-cb15c53236ce.png" alt="Getting Started with Tencent Cloud Chat: A Step-by-Step Walkthrough .png"><h2 style="margin-left:0pt;">What is Tencent Cloud Chat API?</h2><hr>The rise of remote communication makes Chat feature essential for almost all applications or websites. Chat API as a potential solution for developers, which is a set of tools and protocols that enable chat functionality integration into websites, apps and other digital platforms. By using Chat API, developers can provide with a seamless and efficient chat experience to communicate among users.<img class="image_resized" style="width:50%;" src="https://trtc.io/media/e67d78b9-6b21-4310-9d5d-14bf860532ac.png" alt="chat application of discussion group.png"><img class="image_resized" style="width:50%;" src="https://trtc.io/media/a97bfb08-d4ec-4c05-b579-cdb39dc427df.webp" alt="instant message in living streaming.webp">Tencent Cloud Chat provides Chat API for apps and websites, and integrates diverse chat capabilities such as one-to-one chat, group chat, chat room, and system notification into its SDKs and UIKit components to build engagement and develop your business quickly. We are trusted by 100,000+ customers worldwide, supporting 1 billion+ monthly active users, and over 550 billion daily peak messages. Our products can be applied to social, live, metaverse, gaming, education and on-demand service which can basically cover all your needs.<img src="https://trtc.io/media/70a92b20-ba89-4049-a251-81f6257ba293.png" alt="Instant interaction during live streaming like sending gifts, likes and so on.png">&nbsp;<h2 style="margin-left:0pt;">Tencent Cloud Chat brings in-app chat to the next level</h2><hr>Tencent Cloud Chat is a useful tool for building a complete in-app chat platform due to its easy integration, global access and support for multiple platforms：Easy and Quick IntegrationYou can run our demo in just ten minutes. By implementing the UI features based on <a href="https://www.tencentcloud.com/document/product/1047/50062">TUIKit</a> and calling the corresponding APIs of the chat SDK, you can build your own chat application in just a day.Independent IDC and global accessWith independent data storage nodes in US, Singapore, Germany, India and South Korea &amp; 2800+ global access points and cache nodes in all continents, messages can be delivered globally in 200ms on average.Full platforms supportedChat API platform covers a comprehensive range, including iOS, Android, Mac, Windows, Web, Unity, Flutter, and Electron. Tencent Cloud Chat offers various message types to improve the chat experience, including conversations that make it easier for users to receive or start chats, and announcements for timely notifications that can drive higher conversion rates.<h2 style="margin-left:0pt;">How to build your first app with Tencent Cloud Chat</h2><hr>Before you start building, please make sure that you have signed up for a Tencent Cloud account (<a href="https://www.tencentcloud.com/account/login?s_url=https%3A%2F%2Fconsole.tencentcloud.com%2Fim%3Ffrom_qcintl%3Dclick_products_im%26ext1%3DGet_Started">sign up here</a>). You can also explore our demo to better understand its key features: <a href="https://trtc.io/demo/homepage/#/detail?scene=messenger">chat demo</a>, <a href="https://web.sdk.qcloud.com/im/demo/intl/index.html?scene=live">livestreaming demo</a>.<img src="https://trtc.io/media/e850047c-9c00-4b35-bfb1-107133727292.png" alt="video and audio sharing in the chat application.png">Checklist for building your first app:<ul style="list-style-type:disc;"><li>Select your data center: Tencent Cloud Chat supports global access and stores data in Singapore, Seoul, Frankfurt, Mumbai, and Silicon Valley</li><li>Name your application</li><li>Read this documentation and guides to get started with your first app</li><li>Get started - <a href="https://www.tencentcloud.com/document/product/1047/34552">Get Started</a></li><li>UI included Integration - <a href="https://www.tencentcloud.com/document/product/1047/34283">Integration Solution (UI Included)</a></li><li>Integration (without UI) - <a href="https://www.tencentcloud.com/document/product/1047/34299">Integration Solution (No UI)&nbsp;</a></li><li>Run your app</li></ul><h2 style="margin-left:0pt;">Power in-app chat with TUIKit</h2><hr>TUIKit is a UI component library based on Tencent Cloud Chat SDK, providing universal UI components to enable features such as conversation, chat, search, relationship chain, group, and audio/video call features. With these pre-built UI components, you can quickly build your own business logic.<img src="https://trtc.io/media/88536c73-fbc4-4a03-b14d-055a6c04606f.png" alt="the components provided by Tencent RTC, like TUICallKit, TUISearch, TUIChat, TUIConversation, TUIGroup, TUIContact.png">Discover the advanced features within this TUIKit on Flutter, including <a href="https://www.tencentcloud.com/document/product/1047/52154">interface language</a>, <a href="https://www.tencentcloud.com/document/product/1047/52884">user online status</a>, <a href="https://www.tencentcloud.com/document/product/1047/52890">typing status</a>, <a href="https://www.tencentcloud.com/document/product/1047/52891">message read receipt</a> and <a href="https://www.tencentcloud.com/document/product/1047/52892">message reactions</a>.Three steps to build in-app chat via TUIKit:<ul><li>Select the UIKit that matches your app (Android, iOS, Web and Flutter are supported).</li><li>Integrate easily and quickly with only a few lines of code are needed.</li><li>Customize your own chat experience with the freedom to customize UI interface and business logic.</li></ul><h2 style="margin-left:0pt;">About Tencent RTC</h2><hr>Leveraging Tencent's 21 years of experience in network and audio/video technologies, Tencent RTC (Real-Time Communication) offers solutions for chat, group audio/video calls and low-latency interactive live streaming. With Tencent RTC, developers can quickly develop cost-effective, low-latency, and high-quality interactive audio/video services.If you want to enrich the functions of your platforms to provide a better overall experience for your users, please consider <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>. We can also provide you with a smoother real-time interactive audio/video services, helping your users stay connected more easily and effectively.<h2 style="margin-left:0pt;">Contact Us</h2><hr>More detailed tutorials will be released gradually in the later stage, please stay tuned.If you have any questions about our product or would like to learn more, please directly reach out to tencentcloudchat@tencent.com to contact our team. Please feel free to <a href="https://trtc.io/contact?utm_source=website&amp;utm_medium=blog&amp;utm_term=trtc&amp;utm_campaign=blog&amp;_channel_track_key=EB6l06UE">contact us</a>, or join join us in&nbsp;<a href="https://discord.gg/hq7jW7zChW">Discord</a>&nbsp;.Follow&nbsp;<a href="https://twitter.com/TencentMedia">@TencentMedia</a>&nbsp;on Twitter to stay updated with our latest product information.

Get Started with Tencent Cloud Chat | Tencent RTC Blog

Intro

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

Add Call Status Observer in Your Flutter Calling Project

Add Call Status Observer in Your Flutter Calling Project.png

RTC Engine

<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 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 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/46660/50990/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 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

Add Floating Window Feature in Your Flutter Calling App

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.<h1 style="margin-left:0pt;">Tencent RTC is the Preferred Audio/Video Solution</h1>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%.<h1 style="margin-left:0pt;">Why We Need Floating Window Feature</h1>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/46660/50990/54896#4.-call-status-listening">Integration Tencent RTC Call(TUICallKit) - Flutter</a>" development documentation and <a href="https://console.tencentcloud.com/trtc?utm_source=blog&amp;utm_medium=blog&amp;utm_term=rtc&amp;utm_campaign=blog&amp;_channel_track_key=rXfcA9tq">get started for free</a> with the integration!<h1 style="margin-left:0pt;">Implement the Floating Window Feature</h1>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.<h1 style="margin-left:0pt;">View and Check the Floating Window Effect</h1>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<h1 style="margin-left:0pt;">Conclusion</h1>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.tencentcloud.com/trtc?utm_source=blog&amp;utm_medium=blog&amp;utm_term=rtc&amp;utm_campaign=blog&amp;_channel_track_key=rXfcA9tq">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

Build Video Call Website with Tencent RTC in Minutes Using Vue3

Build Video Call Website with Tencent RTC in Minutes Using Vue3.png

Add Video Call with UI to Your Web Project in Minutes | Tencent RTC Blog

Call State Callbacks in Your Calling Website or Web App

Call State Callbacks in Your Calling Website or Web App.png

<img src="https://mediastatic.tencent-cloud.com/trtc/media/4f743872-12c0-425e-8f97-b6cf5089ae3c.png" alt="Call State Callbacks in Your Calling Website or Web App.png">If you want to obtain call status from your audio and video calling website and make appropriate actions in a timely manner, try <a href="https://trtc.io/products/call">Tencent RTC Call</a>'s "TUICallKit" component. With this advanced feature, you can easily integrate call status observers to meet your business needs.<h2 style="margin-left:0pt;">Why is Tencent RTC Call the Best Choice?</h2><ul><li>TUICallKit component is easy to integrate, even for beginners.</li><li>TUICallKit component provides feature toggles for enabling and disabling, allowing specific functions to be triggered when the call status changes. This enables dynamic adjustment of the logic behavior of the calling application.</li><li>TUICallKit component provides a variety of callback attributes that cater to the business needs of various application scenarios you may have.</li></ul><h2 style="margin-left:0pt;">Instructions</h2><div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/-pVVBtfp1jo?si=Yz-SuBHBKrupLXII" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div>Video TutorialThis blog post uses the example of these 5 callback attributes for call status to explain how to implement the interaction logic.<h3 style="margin-left:0pt;">Step 1: Bind the callback attributes for call status to the TUICallKit component.</h3>In our Vue project file, locate the "TUICallKit" component and write the binding code.<ul><li>beforeCalling: Executed before the call starts.</li><li>afterCalling: Executed after the call ends.</li><li>onMinimized: Executed when the component is minimized.</li><li>kickedOut: The user is kicked out, and the call automatically ends.</li><li>statusChanged: The call status has changed.</li></ul><pre><code class="language-html">	&lt;TUICallKit
 	:beforeCalling="beforeCalling"
 	:afterCalling="afterCalling"
 	:onMinimized="onMinimized"
 	:allowedMinimized="true"
 	:allowedFullScreen="true"
 	:videoDisplayMode="VideoDisplayMode.CONTAIN"
 	:videoResolution="VideoResolution.RESOLUTION_1080P"
 	:kickedOut="handleKickedOut"
 	:statusChanged="handleStatusChanged"
 	 /&gt;
</code></pre><img src="https://mediastatic.tencent-cloud.com/trtc/media/482e4522-17b3-4413-a890-7782615524b9.png" alt="the TUICallKit component with the binding code.png"><h3 style="margin-left:0pt;">Step 2: Write the specific callback methods for call status.</h3>After the binding is done, you need to pass the callback parameters for it to work. So, we also need to write the specific logic functions. You can simply copy the following code into your Vue project file.<pre><code class="language-javascript">	function beforeCalling(type: string, error: any) {
 		console.log("[Callkit Demo] beforeCalling:", type, error);
	}
	function afterCalling() {
 		console.log("[Callkit Demo] afterCalling");
	}
	function onMinimized(oldStatus: string, newStatus: string) {
 		console.log("[Callkit Demo] onMinimized: " + oldStatus + " -&gt; " + newStatus);
	}
	function handleKickedOut() {
 		console.log("[Callkit Demo] handleKickedOut");
	}
	function handleStatusChanged(args: { oldStatus: string; newStatus: string; }) {
 		const { oldStatus, newStatus } = args;
 	if (newStatus === STATUS.CALLING_C2C_VIDEO) {
 	console.log(`[Callkit Demo] handleStatusChanged: ${oldStatus} -&gt; ${newStatus}`);
 	}
</code></pre><img src="https://mediastatic.tencent-cloud.com/trtc/media/189e902b-ce5b-4ec0-a89f-6f3f7e107f6e.png" alt="write the specific logic functions of call status callbacks.png"><h2 style="margin-left:0pt;">Testing</h2>After saving, compiling, and running, we can go to the Web Demo section, make a call, and then hang up. You will be able to see detailed information printed in the console when the call status callback functionality provided by the TUICallKit component is triggered.<img src="https://mediastatic.tencent-cloud.com/trtc/media/f32a0369-4349-4be8-a0f0-4ef5d12736f2.png" alt="the information of the triggered beforeCalling function.png">Figure1: Before the Call<figure class="image"><img src="https://mediastatic.tencent-cloud.com/trtc/media/e11d9d4b-0224-48db-80ad-13727d7033f7.png" alt="the information of the triggered handleStatusChanged function.png.png"></figure>Figure2: During the Calling<img src="https://mediastatic.tencent-cloud.com/trtc/media/59e82035-8d10-42f4-850e-669938f0ac1a.png" alt="the information of the triggered afterCalling function.png.png">Figure3: After the Calling<h2 style="margin-left:0pt;">Conclusion</h2>If you need more detailed monitoring of callback methods,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>.

Call State Callbacks in Your Calling Website or Web App | Tencent RTC Blog

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

iOS development

How to Customize Personal Info in Your iOS Calling App

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

<img src="https://trtc.io/media/ecbad4bf-ea3d-4a71-8a6b-e810fc04f32a.png" alt="How to Customize Personal Info in Your iOS Calling App">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 Customize Personal Info in Your iOS Calling App | Tencent RTC Blog

How to Add Floating Window into Your iOS Calling App

How to Add Floating Window into Your iOS Calling App.png

<img src="https://trtc.io/media/2fc5ee59-32c5-4a33-acc0-908ce692e62f.png" alt="How to Add Floating Window into Your iOS Calling App.png">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 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 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://www.tencentcloud.com/account/login?s_url=https%3A%2F%2Fconsole.tencentcloud.com%2Ftrtc%2Fcall">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 src="https://trtc.io/media/3478eb43-a54c-4fae-8776-eb27364bbf77.png" alt="clicking the <Login> button.png"><img src="https://trtc.io/media/ea9c5a04-a64b-43d6-a8b3-5c9cbdd4bf28.png" alt="no button for floating window.png"><img src="https://trtc.io/media/8b188720-b64f-42f5-975f-7f0140a8b57a.png" alt="the button to start the floating window.png"><img src="https://trtc.io/media/575afce1-f20f-44a6-974d-656c182e016d.png" alt="7.png">Floating window mode:<img src="https://trtc.io/media/b9aee521-b422-46db-9e6e-92531abb4e24.png" alt="floating window mode.png">Fullscreen mode:<img src="https://trtc.io/media/91d1dbfd-3c8c-4e6e-b261-6dd48e34231b.png" alt="fullscreen mode.png"><h2 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/46660/50990/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>.

"Set Up"

NOTHING FOUND