Add Video Call to Your Flutter Project in Minutes

Tencent RTC - Dev Team

Mar 12, 2024

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 Tencent RTC Call (TUICallKit) , 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 (Flutter 3.0 or higher version) in minutes.

How to integrate Tencent RTC Call (TUICallKit)?

Create Your Application in the Console

Access the Tencent RTC console and click on "Create Application."
After successfully creating the application, choose the 7-day free trial option.
Take note of your application's name, SDK, APP ID, and secret key.

creating the call app.png

Import the Tencent RTC Call (TUICallKit) Component into Your Project

Open your newly created Flutter project.
Import the latest version of the Tencent RTC Call (TUICallKit) component into your project's configuration file.
Execute the command "flutter pub get" in the command line to import the component successfully.

execute the command "flutter pub get" in the command line.png

Configure the Project

After importing the component, configure some basic information in your new project.
Import the necessary Dart files for using the Tencent RTC Call (TUICallKit) component.
Request camera and microphone permissions in the info.plist file under Runner in your iOS project.

configuration coding.png

Log in to the TUI Call Kit Component

Log in to the Tencent RTC Call (TUICallKit) component in your Flutter project.
Use the "TUICallKit.instance.login" interface, providing the SDKAppID, user ID, and user signature as parameters.
Fill in the user ID (e.g., 6666) and generate the user signature using the User Sig Generation tool in the console.

fill the userID, SDKAppID and userSig in the login function.png

Run! Make and Answer a Call

Create a simple UI with a button to initiate the audio and video call.
Display the user ID (e.g., 6666) using a text widget.
Use the TUI call kit.instance.call interface to make a call to another user (e.g., 8888) when the button is clicked.

add the "TUICallKit.instance.call" interface.png

Implement the response to incoming calls in your Flutter project.
Use the "TUICallKit.instance.answer" interface to answer the call when prompted.

call demo.png

Conclusion

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 & API family for web, mobile, and games. Tailor your video communication experience to meet your specific needs and captivate your audience with Tencent RTC.

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 Discord.

Set Up

Call

Build App