This document describes how to quickly integrate the TUICallKit component. Performing the following key steps generally takes about 10 minutes, after which you can implement the audio and video call feature with complete UIs.
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 and activate the service for your application. For detailed steps, refer to Activate Service.
Step 2. Import the component
Execute the following command in the command line to install the tencent_calls_uikit plugin.
flutter pub addtencent_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:
2. 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.
Firstly, you need to enable aliasing rules by configuring them in the build.gradle file under the app directory:
4. 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, add the following two items under the first level <dict> directory, corresponding to the microphone and camera. These are the prompt messages when the system pops up the authorization dialog box.
<key>NSCameraUsageDescription</key>
<string>CallingApp needs toaccess your camera tocapture video.</string>
<key>NSMicrophoneUsageDescription</key>
<string>CallingApp needs toaccess your microphone tocapture voice.</string>
After adding, you can open the Info.plist file with XCode and see the following results:
Step 4. Log in to the TUICallKit component
Add the following code to your project. This step is crucial because you can only use the various features of TUICallKit after a successful Sign in. Please patiently check if the relevant parameters are correctly configured:
TUIResult result = await 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 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 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.
During the Debugging and Running Phase, you can calculate UserSig locally. The specific calculation code can be found in our GitHub in the GenerateTestUserSig.dart. If you are using our GenerateTestUserSig.dart, please execute the following command in the command line to install the encryption component crypto provided by the official dart:
flutter pub add crypto
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 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.
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 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.
