Starter Deal! First 3 month from only  $9.9 /month!
Starter Deal! First 3 month from only  $9.9 /month!
Grab It Now 
Call
Overview
  • Web
    • Run Sample Demo
    • Integration
      • Web&H5 (React)
      • Web&H5 (Vue3)
    • AI Denoising
    • Virtual Background
    • UI Customization
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Configure Resolution and Fill Mode
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallEvent
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Release Notes
  • Android
    • Run Sample Demo
    • Integration
    • AI Denoising
    • Virtual Background
    • UI Customization
    • Offline Call Push
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Release Notes
  • iOS
    • Run Sample Demo
    • Integration
    • AI Denoising
    • Virtual Background
    • UI Customization
    • Offline Call Push
      • VoIP
      • APNs
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Release Notes
  • Flutter
    • Run Sample Demo
    • Integration
    • Offline Call Push
    • AI Denoising
    • Virtual Background
    • UI Customization
    • offline Call Push
      • Notification
      • VoIP (Optional)
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Beauty Effects
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Upgrading
    • Release Notes
  • Overview
    • Overview
  • Activate the Service
  • Pricing
    • Call Monthly Packages
    • Pay-As-You-Go
    • Free Minutes
  • ErrorCode
  • FAQs
    • All Platform
    • Web
    • Flutter
    • iOS
    • Android
Call

Integration

This article will guide you through the process of integrating the TUICallKit component quickly. By following this documentation, you can complete the access work in just 10 minutes and ultimately obtain an application with a complete user interface as well as audio and video calling features.
Video Call
Group call







Environment Preparations

Flutter 3.0 or higher version.

Step 1. Activate the service

Before using the audio and video services provided by Tencent Cloud, you need to go to the console to activate the audio and video services for your application, and obtain SDKAppID, SDKSecretKey. They will be used in Step 5. 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 tencent_calls_uikit plugin.
flutter pub add tencent_calls_uikit

Step 3. Configure the project

Android
iOS
1. If you need to compile and run 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, configure and enable obfuscation rules in the android/app/build.gradle file of the project:
android {
......
buildTypes {
release {
......
minifyEnabled true
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
Create a proguard-rules.pro file in the android/app directory of the project, and add the following code in the proguard-rules.pro file:
-keep class com.tencent.** { *; }
2. Configure to enable Multidex support in the android/app/build.gradle file of your project.
android {
......
defaultConfig {
...... multiDexEnabled true }
}
1. Optional If you need to debug on an iOS Simulator and your Mac Computer uses an Intel Chip, you need to add the following code in the ios/Podfile file:
target 'xxxx' do
......
end
......

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
2. Since TUICallKit uses iOS's audio and video features, you need to grant permissions for the use of the microphone and camera.
Authorization Operation Method: In your iOS project's Info.plist, under the first-level <dict> directory, add the following two items. They correspond to the system's prompt messages when asking for microphone and camera permissions.
<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 audio.</string>

Step 4: Set up navigatorObservers

1. In the Flutter application framework, add TUICallKit.navigatorObserver to navigatorObservers. For example, using the MaterialApp framework, the code is as follows:
import 'package:tencent_calls_uikit/tencent_calls_uikit.dart';

......

class XXX extends StatelessWidget { const XXX({super.key});
@override Widget build(BuildContext context) { return MaterialApp( navigatorObservers: [TUICallKit.navigatorObserver], ...... ); } }

Step 5: Log in to the TUICallKit Component

Use the login interface to complete the log-in. For specific usage, refer to the following code:
import 'package:tencent_calls_uikit/tencent_calls_uikit.dart';
......

final String userID = 'xxxxx'; // Please replace with your UserId final int sdkAppID = 0; // Please replace with the SDKAppID you got from the console in step 1 final String secretKey = 'xxxx'; // Please replace with the SecretKey you got from the console in step 1

void login() async {
String userSig = GenerateTestUserSig.genTestSig(userID, sdkAppID, secretKey);
TUIResult result = await TUICallKit.instance.login(sdkAppID, userID, userSig);
if (result.code.isEmpty) { print('Login success'); } else { print('Login failed: ${result.code} ${result.message}'); }
}
Parameter
Type
Description
userID
String
Customers define their own User ID based on their business. You can only include letters (a-z, A-Z), digits (0-9), underscores, and hyphens.
sdkAppID
int
The unique identifier of the audio and video application created in the Tencent RTC Console.
secretKey
String
SDKSecretKey for the audio and video application created in Tencent RTC Console.
userSig
String
A security protection signature used for user log in authentication to confirm the user's identity and prevent malicious attackers from stealing your cloud service usage rights.
Note:
Development Environment: If you are in the local development and debugging stage, you can use the local GenerateTestUserSig.genTestSig function to generate userSig. In this method, the SDKSecretKey is vulnerable to decompilation and reverse engineering, and once your key is leaked, attackers can steal your Tencent Cloud traffic.
Production Environment: If your project is going to be launched, please adopt the method of Server-side Generation of UserSig.

Step 6. Make your first phone call

After both 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 the callee's userId. At this point, the callee will receive an incoming call invitation.

TUICallKit.instance.call('Android', TUICallMediaType.audio);import 'package:tencent_calls_uikit/tencent_calls_uikit.dart';
......

void call() {
TUICallKit.instance.call('Android', TUICallMediaType.audio);
}






Caller
Callee

Additional Features

FAQs

If you encounter any issues during integration and use, please refer to Frequently Asked Questions.

Suggestions and Feedback

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