Overview
Menu
Documentation
Tencent RTC Documentation
Flutter

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'
    end
  end
end

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.
For more information, see UserSig.
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 Mike
TUICallKit.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 tommy
TUICallKit.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？

please refer 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.
WebRTC Trtc Logo
Copyright © 2013-2023 Tencent Cloud. All Rights Reserved.
  1. Privacy Policy
  3. Legal
  5. Cookie Policy