tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Chat
    Documentation
    Download PDF

    Flutter

    Last updated: 2024-03-20 16:50:27
    Download PDF
      This document describes how to quickly integrate the TUICallKit component. Performing the following key steps generally takes about 10 minutes, after which you can enjoy the audio and video call feature with a complete UI.

      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). Each SDKAppID can apply the free trial version twice, with each trial lasting for 7 days; at the same time, the total number of trial opportunities for all SDKAppID under one account (UIN) is 10.
      
      You can activate the Call free trial version in the Chat console, with the specific operation steps as follows:
      
      1. Log into the Chat console, select the data center, and create a new application. Skip this step if you already have an application.
      2. Click on the target application card to enter the application's basic configuration page.
      3. Locate the Call card, and click on "Free Trial".
      4. After confirming the content in the popup window, click on "Activate now". Once activated, you can proceed with integration according to this document.
      5. If you need to purchase the official version for your business to go live, you can proceed to the console to make the purchase. Please refer to Purchase Official Version.

      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
      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.
      For more information, see UserSig.
      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 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
      TUICallDefine.MediaType
      The call media type, such as TUICallDefine.MediaType.Video.

      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, such as "12345678".
      userIdList
      List
      The list of UserID values of the target users, such as {"jane", "mike", "tommy"}.
      callMediaType
      TUICallDefine.MediaType
      The call media type, such as TUICallDefine.MediaType.Video.
      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.

      Suggestions and Feedback

      If you have any suggestions or feedback, please contact colleenyu@tencent.com.
      
      Contact Us

      Contact our sales team or business advisors to help your business.

      Contact Us
      Technical Support

      Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy