Docs Overview/
Flutter/

Flutter

This document describes how to quickly integrate the TUICallKit component. Performing the following key steps generally takes about 10 minutes, after which you can enjoy the audio and video call feature with a complete UI.

Environment Preparations

Flutter 3.0 or higher version.

Step 1. Activate the Service

Before using Tencent Cloud's audio and video services, you need to go to the Console and activate the audio and video service for your application. For specific steps, please refer to Activate the Service.

Step 2. Import the Component

Execute the following command in the command line to install the component tencent_calls_uikit plugin.
flutter pub add tencent_calls_uikit

Step 3. Configure the Project

1. Add the navigatorObserver of TUICallKit to the App component, taking MateriaApp as an example, the code is as follows:
import 'package:tencent_calls_uikit/tuicall_kit.dart';

MaterialApp（
     navigatorObservers：[TUICallKit.navigatorObserver]，
     ...
）
2. If you need to compile and run codes on the Android platform, since the SDK uses Java's reflection feature internally, certain classes in the SDK must be added to the non-aliasing list.
First, you need to configure in the build.gradle file under the app directory and enable aliasing rules:
  android {  
    ...  
    buildTypes {  
        release {  
            minifyEnabled true  
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'  
        }  
    }  
}
Then add the following code in the proguard-rules.pro file:
-keep class com.tencent.** { *; }
3. If you need to use the audio and video feature on iOS, you need authorization for accessing microphone and camera.
Authorization method: Add the following two items in your iOS project's Info.plist, corresponding to the prompt messages for the microphone and camera when the system pops up the authorization dialogue.
<key>NSCameraUsageDescription</key>
<string>CallingApp needs to access your camera to capture video.</string>
<key>NSMicrophoneUsageDescription</key>
<string>CallingApp needs to access your microphone to capture voice.</string>

Step 4. Log in to the TUICallKit component

Add the following code to your project to call the relevant APIs in TUICore to log in to the TUICallKit component. This step is very important, as the user can use the component features properly only after a successful login. Carefully check whether the relevant parameters are correctly configured:
TUIResult result = TUICallKit.instance.login(SDKAppID,     // Please replace it with the SDKAppID obtained in the first step
                                             'userId',       // Please replace with your User ID
                                             'userSig');     // You can get a UserSig in the console
Parameter description: The key parameters used by the login function are as detailed below:
SDKAppID: Obtained in the last step in step 1 and no details are required here.
UserID: The ID of the current user, which is a string that can contain only letters (a–z and A–Z), digits (0–9), hyphens (-), or underscores (_).
UserSig: The authentication credential used by Tencent Cloud to verify whether the current user is allowed to use the TRTC service. You can get it by using the SDKSecretKey to encrypt the information such as SDKAppID and UserID. You can generate a temporary UserSig by clicking the UserSig Generate button in the console.
For more information, see UserSig.
Note
Many developers have contacted us with many questions regarding this step. Below are some of the frequently encountered problems:
SDKAppID is invalid.
userSig is set to the value of Secretkey by mistake. The userSig is generated by using the SecretKey for the purpose of encrypting information such as sdkAppId, userId, and the expiration time. But the value of the userSig that is required cannot be directly substituted with the value of the SecretKey.
userId is set to a simple string such as 1, 123, or 111, and your colleague may be using the same userId while working on a project simultaneously. In this case, login will fail as TRTC doesn't support login on multiple terminals with the same UserID. Therefore, we recommend you use some distinguishable userId values during debugging.
The sample code on GitHub uses the genTestUserSig function to calculate UserSig locally, so as to help you complete the current access process faster. However, this scheme exposes your SecretKey in the application code, which makes it difficult for you to upgrade and protect your SecretKey subsequently. Therefore, we strongly recommend you run the UserSig calculation logic on the server and make the application request the UserSig calculated in real time from your server every time the application uses the TUICallKit component.

Step 5: Make your first call

After the caller and callee have successfully signed in, the caller can initiate an audio or video call by calling the TUICallKit's call method and specifying the call type and callee's userId. The callee will then receive the incoming call invitation.
//Assuming a video call to mike
TUICallKit.instance.call('mike', TUICallMediaType.video);


Caller
Callee

Additional Features

Customizable Interface
Group Call
Floating Window
Custom Ringtone
Monitor call status
Cloud Recording
Beauty Effects

FAQs

1. What should I do if I receive the error message "The package you purchased does not support this ability"?

The error message indicates that your application's audio/video call capability package has expired or is not activated. You can claim or activate the audio/video call capability as instructed in step 1 to continue using TUICallKit.

Suggestions and Feedback

If you have any suggestions or feedback, please contact colleenyu@tencent.com.