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. If you need to use the audio and video feature on iOS, you need authorization for microphone and camera usage.
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 toaccess your camera tocapture video.</string>
<key>NSMicrophoneUsageDescription</key>
<string>CallingApp needs toaccess your microphone tocapture 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 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.
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.
Yes
No
Was this page helpful?