Flutter
Last updated: 2023-09-21 16:09:15Download PDF
This document describes how to quickly integrate the TUICallKit component. Performing the following key steps generally takes about an hour, after which you can implement the video call feature with complete UIs.
Environment Preparations
Flutter 3.0 or higher version.
Step 1. Activate the service
TUICallKit is an audio & video communication component built upon Tencent Cloud's paid PaaS services, Chat and Real-time Communication (TRTC) . In order for you to better experience the Call feature, we offer a 7-day free trial version for each SDKAppID (Note: no additional call duration is provided with the free trial version), You can activate the Call free trial version in the (Real-time Communication)TRTC console, with the specific operation steps as follows:
1. Log into the TRTC console > Call, and create a new application.

2. In the create pop-up window, select Call as the product and enter the application name. You can also choose to associate with an existing application to open Call for an existing TRTC application. After making the selection, click on Create application.

3. After completing the application creation, you will be directed to the application details page by default. In the pop-up window, select the "Trial Free" version and click on "Claim now".

4. After confirming the pop-up content, click on "Free Trail" to successfully open the trial version of audio and video calling.

5. After opening, you can view the version information on the current page and refer to the integration guide for integration.

Step 2. Import the component
Import Flutter TUICallKit, the steps are as follows:
1. Add the tencent_calls_uikit plugin dependency in your pubspec.yaml file, and click the plugin hyperlink to switch to the Versions directory to check for the latest version.
dependencies:tencent_calls_uikit: The latest version
2. Execute the following command to install the components.
flutter pub get
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 on the Android platform, since we use the reflection feature of Java inside the SDK, some classes in the SDK need to be added to the non-confusing list, so you need to add the following code to the
proguard-rules.pro
file:-keep class com.tencent.** { *; }
3. If your project needs to be debugged on the iOS simulator, you need to add the following code to the project's
/ios/Podfile
:post_install do |installer|installer.pods_project.targets.each do |target|flutter_additional_ios_build_settings(target)target.build_configurations.each do |config|config.build_settings['VALID_ARCHS'] = 'arm64 arm64e x86_64'config.build_settings['VALID_ARCHS[sdk=iphonesimulator*]'] = 'x86_64'endendend
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
After the action is completed, you can check whether the login is successful through the return value of the TUIResult` type.
Parameter description:
SDKAppID: Obtained in the last step in step 1 and not detailed 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
SecretKey
obtained in the third step in step 1 to encrypt the information such as SDKAppID
and UserID
. You can generate a temporary UserSig
by using the auxiliary tool in the console.Note
Many developers have contacted us with questions regarding this step. Below are some of the frequently encountered problems:
SDKAppID is invalid.
userSig is set to the value of Secretkey mistakenly. 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.
Warning:
The sample code on GitHub uses the
genTestUserSig
function to calculate UserSig
locally, so as to help you complete the current integration process more quickly. 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 every time the application uses the TUICallKit
component from the server.Step 5. Make a call
One-to-one video call
You can call the
call
function of TUICallKit
and specify the call type and the callee's userId
to make an audio/video call.// make a video call to MikeTUICallKit.instance.call('mike', TUICallMediaType.video);
Parameter | Type | Description |
userId | String | The ID of the target user, such as "mike" . |
callMediaType | The call media type, such as TUICallMediaType.video or TUICallMediaType.audio. |
Group video call
You can call the
groupCall
function of TUICallKit
and specify the call type and the list of callees' UserID
values to make a group audio/video call.// in the group(groupId:0001), make a video call to denny, mike and tommyTUICallKit.instance.groupCall('0001', ['denny', 'mike', 'tommy'], TUICallMediaType.video);
Parameter | Type | Description |
groupId | String | The group ID. |
userIdList | List<String> | The list of UserID values of the target users, such as {"jane", "mike", "tommy"} . |
callMediaType | The call media type, such as TUICallMediaType.video or TUICallMediaType.audio. |
Note
You can create a group as instructed in Android, iOS, and macOS. You can also use Chat TUIKit to integrate chat and call scenarios at one stop.
TUICallKit
currently doesn't support making a multi-person video call among users not in a group. If you have such a need, contact colleenyu@tencent.com.
Step 6. Answer a call
After receiving an incoming call, the
TUICallKit
component will automatically wake up the call answering UI. However, the wake effect varies by Android system permissions as follows:If your application is in the foreground, it will pop up the call UI and play back the incoming call ringtone automatically when receiving an incoming call.
If your application is in the background and is granted the
Display over other apps
or Display pop-up windows while running in the background
permission, it will still pop up the call UI and play back the incoming call ringtone automatically when receiving an incoming call.If your application is in the background but isn't granted with the
Display over other apps
or Display pop-up windows while running in the background
permission, TUICallKit
will play back the incoming call ringtone to prompt the user to answer or decline the call.If the application process has been terminated, you can use the offline push feature as described in Offline Call Push (Android) to prompt the user to answer or decline the call through the status bar notification.
Step 7. Implement more features
1. Nickname and profile photo settings
To customize the nickname or profile photo, use the following API for update:
TUIResult result = TUICallKit.instance.setSelfInfo('userName', 'url:********');
Note
The update of the callee's nickname and profile photo may be delayed during a call between non-friend users due to the user privacy settings. After a call is made successfully, the information will also be updated properly in subsequent calls.
2. Offline call push
After completing the above steps, you can dial and connect audio and video calls. However, if your business scenario needs to receive audio and video call requests normally after the application process is killed or the application retreats to the background, you need to Added offline wakeup function, see offline wakeup (Flutter) for details.
3. Floating window
To implement the floating window feature in your application, call the following API when initializing the
TUICallKit
component:TUICallKit.instance.enableFloatWindow(true);
4. Call status listening
To listen on the call status (for example, the start or end of a call or the call quality during a call), listen on the following events:
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<TUINetworkQualityInfo> networkQualityList) {}, onCallReceived: (String callerId, List<String> calleeIdList, String groupId, TUICallMediaType callMediaType) {}));
5. Custom ringtone
You can use the following API to customize the ringtone:
TUICallKit.instance.setCallingBell('flie path');
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
.2、How to purchase official version?
3、Android compilation error:uses-sdk:minSdkVersion 16 cannot be smaller than version 19.
Below is the information:
uses-sdk:minSdkVersion
16
cannot be smaller than version
19
declared
in
library
[
:tencent_calls_uikit
]
/Users/xxx/xxxx/xxxx/xxxx/demo/flutter/callkit/callkit/build/tencent_calls_uikit/intermediates/merged_manifest/debug/AndroidManifest.xml as the library might be using APIs not available
in
16
Suggestion: use a compatible library with a minSdk of at
most
16
,
or increase this project's minSdk version to at least
19
,
or use tools:overrideLibrary
=
"com.tencent.cloud.tuikit.flutter.tuicallkit"
to force usage
(
may lead to runtime failures
)
The minSdkVersion supported by the tencent_call_uikit Plugin Android side is 19, you can modify the minSdkVersion in the android/app/build.gradle file in your project to 19 or above.
Suggestions and Feedback
If you have any suggestions or feedback, please contact colleenyu@tencent.com.