tencent cloud


Audio Call (Flutter)

Last updated: 2022-03-17 15:45:31

    To quickly implement the audio call feature, you can use the demo we provide and adapt it to your needs. You can also use the TRTCCalling component and customize your own UI.

    Using the Demo UI

    Step 1. Create an application

    1. Log in to the TRTC console and select Development Assistance > Demo Quick Run.
    2. Enter an application name such as TestAudioCall, and click Create.

    This feature uses two basic PaaS services of Tencent Cloud, namely TRTC and IM. When you activate TRTC, IM will be activated automatically. IM is a value-added service. See Pricing for its billing details.

    Step 2. Download the SDK and demo source code

    1. Download the SDK and demo source code for your platform.
    2. Click Next.

    Step 3. Configure the demo project file

    1. In the Modify Configuration step, select your platform.
    2. Find and open /example/lib/debug/GenerateTestUserSig.dart.
    3. Set parameters in GenerateTestUserSig.dart as follows.
      • SDKAPPID: a placeholder by default. Set it to the actual `SDKAppID`.
      • `SECRETKEY`: a placeholder by default. Set it to the actual key.
    4. Click Next to complete the creation.
    5. After compilation, click Return to Overview Page.

    • The method for generating UserSig described in this document involves configuring SECRETKEY in client code. In this method, SECRETKEY may be easily decompiled and reversed, and if your key is leaked, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for the local execution and debugging of the demo.
    • The correct UserSig distribution method is to integrate the calculation code of UserSig into your server and provide an application-oriented API. When UserSig is needed, your application can send a request to the business server for a dynamic UserSig. For more information, see How do I calculate UserSig on the server?.

    Step 4. Run the demo


    An Android project must be run on a real device rather than a simulator.

    1. Run flutter pub get.
    2. Compile, run, and test the project.
      1. Run flutter run.
      2. Open the demo project with Android Studio (3.5 or above), and click Run.

    Step 5. Modify the demo source code

    The TRTCCallingDemo folder in the source code contains two subfolders: ui and model. The ui folder contains the UI code.

    File or Folder Description
    TRTCCallingVideo.dart The main view for audio/video calls, where calls are answered/declined
    TRTCCallingContact.dart The view for contacts, where one can search for registered users to call

    Customizing UI

    The TRTCCallingDemo folder in the source code contains two subfolders: ui and model. The model subfolder contains the reusable open-source component TRTCCalling. You can find the component's APIs in TRTCCalling.dart.

    You can use the open-source component TRTCCalling to customize your own UI. This means you will use the model of the demo but design the UI by yourself.

    Step 1. Integrate the SDK

    The audio/video call component TRTCCalling depends on the TRTC SDK and IM SDK. You can configure pubspec.yaml to download their updates automatically.

    Add the following dependencies to pubspec.yaml of your project.

     tencent_trtc_cloud: latest version number
     tencent_im_sdk_plugin: latest version number

    Step 2. Configure permission requests and obfuscation rules

    Add request for mic permission in Info.plist:

    <string>Audio calls are possible only with mic access.</string>

    Step 3. Import the TRTCCalling component

    Copy all the files in model to your project.


    Step 4. Initialize the component and log in

    1. Call TRTCCalling.sharedInstance() to get an instance of the component.
    2. Call login(SDKAppID, userId, userSig) to log in to the component. For the key parameters passed in, see the table below.
      SDKAppID You can view `SDKAppID` in the TRTC console.
      userId ID of the current user, which is a string that can contain only letters (a-z and A-Z), digits (0-9), hyphens (-), and underscores (_). We recommend that you keep it in line with your user account system.
      userSig Tencent Cloud's proprietary security signature. For how to calculate and use a signature, please see UserSig.
      // Initialize
      sCall = await TRTCCalling.sharedInstance();
      sCall.login(1400000123, "userA", "xxxx");

    Step 5. Make a one-to-one audio call

    1. The caller calls call() of TRTCCalling, passing in the user ID of the callee (userid) and call type (type). For an audio call, the call type should be TRTCCalling.typeAudioCall.
    2. The callee, if logged in, will receive the onInvited() callback and can start the corresponding view based on the call type set by the inviter, which is represented by callType in the callback.
    3. The callee can call accept() to answer the call and openCamera() to turn the local camera on. He or she can also call reject() to reject the call.
    4. After communication is established between the caller and callee, they will both receive the onUserAudioAvailable() event notification, which indicates that they have received each other’s audio. Remote audio will be played back automatically by default.

    Component APIs

    The table below lists the APIs of the TRTCCalling component.

    API Description
    registerListener Registers a TRTCCalling listener, through which users can receive status notifications.
    unRegisterListener Unregisters a listener.
    destroy Destroys an instance.
    login Logs in to IM. All features can be used only after login.
    logout Logs out of IM. Calls cannot be made after logout.
    call Makes a C2C call. The invitee will receive the onInvited event notification.
    accept Answers a call.
    reject Declines a call.
    hangup Ends a call.
    setMicMute Mutes/Unmutes the mic.
    setHandsFree Enables/Disables the hands-free mode.
    Contact Us

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

    Technical Support

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

    7x24 Phone Support