tencent cloud


Audio Call (Web)

Last updated: 2022-05-09 14:27:08

    This document describes how to implement browser-based audio calls.

    • Part 1 describes how to activate the service and run the demo.
    • Part 2 describes how to build your own audio call feature using the TRTCCalling component.

    Environment Requirements

    Currently, the desktop version of Chrome offers better support for the features of the TRTC Web SDK; therefore, Chrome is recommended for the demo.

    TRTCCalling uses the following ports and domain name for data transfer, which should be added to the allowlist of the firewall. After configuration, please use official demo to check whether the configuration has taken effect.

    Supported Platforms

    The service supports the following platforms:

    OS Browser (Desktop) Minimum Browser Version Requirement
    macOS Safari 11+
    macOS Chrome 56+
    macOS Firefox 56+
    macOS Edge 80+
    Windows Chrome 56+
    Windows QQ Browser (WebKit core) 10.4+
    Windows Firefox 56+
    Windows Edge 80+

    For more information on browser compatibility, please see Browsers Supported. You can also run an online test using the TRTC compatibility check page.

    URL Protocol Support

    Scenario Protocol Receive (Playback) Send (Publish) Share Screen Remarks
    Production HTTPS Supported Supported Supported Recommended
    Production HTTP Supported Not supported Not supported -
    Local development http://localhost Supported Supported Supported Recommended
    Local development Supported Supported Supported -
    Local development http://[local IP address] Supported Not supported Not supported -
    Local development file:/// Supported Supported Supported -

    Running the Demo

    Step 1. Create an application

    1. Sign up for a Tencent Cloud account .
    2. In the TRTC console, click Development Assistance > Demo Quick Run.
    3. Enter an application name such as TestTRTC and click Create.

    Step 2. Download the demo

    1. You can download the source code of the web demo at TUICalling.
    2. Click Next.

    Step 3. Configure the demo project file

    1. In the Modify Configuration step, select your platform.
    2. Find and open the Web/public/debug/GenerateTestUserSig.js file.
    3. Set the following parameters in the GenerateTestUserSig.js file:
      • SDKAPPID: `0` by default. Set it to the actual `SDKAppID`.
      • SECRETKEY: Left empty by default. Set it to the actual key.
    4. Click Next to complete the creation.
    5. After compilation, click Return to Overview Page.

    • In this document, the method to obtain UserSig is to configure a SECRETKEY in the client code. In this method, the SECRETKEY is vulnerable to decompilation and reverse engineering. Once your SECRETKEY is leaked, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for locally running a demo project and feature debugging.
    • 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

    1. In the demo directory, run the following commands in turn:

      npm install
      npm run serve
    2. Open Chrome and visit http://localhost:8080/. If the above steps are performed correctly, you will see the page below:

    3. Enter a user ID, click Sign in, and select Audio.

    4. Enter the user ID of the callee and click call.

    5. Start the audio call.

    Building Your Own Audio Call Feature

    Step 1. Import the TRTCCalling component


    • Since version 0.6.0, you need to manually install dependencies trtc-js-sdk, tim-js-sdk, and tsignaling.
    • To reduce the size of trtc-calling-js.js and prevent version conflict between trtc-calling-js.js and the already-in-use trtc-js-sdk, tim-js-sdk or tsignaling, the latter three are packaged as external dependencies, which you need to install manually before use.
    // Import via npm
    npm install trtc-js-sdk --save

    npm install tim-js-sdk --save

    npm install tsignaling --save

    npm install trtc-calling-js --save
    // If you import `trtc-calling-js` via a script, you need to manually import the following resources in the specified order.

    <script src="./trtc.js"></script>
    <script src="./tim-js.js"></script>
    <script src="./tsignaling.js"></script>
    <script src="./trtc-calling-js.js"></script>

    Step 2. Create a TRTCCalling object

    Create a TRTCCalling object, setting SDKAppID to the SDKAppID of your application.

    import TRTCCalling from 'trtc-calling-js';
    let options = {
     SDKAppID: 0, // Replace 0 with your `SDKAppID` when connecting
     // The `tim` parameter is added starting from v0.10.2
     // The parameter guarantees the uniqueness of an existing TIM instance.
     tim: tim
    const trtcCalling = new TRTCCalling(options);

    Step 3. Log in


    Step 4. Make a one-to-one call

    • Caller: call a user

      userID,  // User ID
      type: 1, // Call type. `0`: unknown; `1`: audio call; `2`: video call
      timeout  // Timeout threshold, in seconds
    • Callee: process a call invitation

      // Answer
      // Reject
    • Hang up



    Why can’t I get through to a user? Why am I kicked offline?

    The TRTCCalling component does not support login of multiple instances or offline signaling for the time being. Please make sure that your current login is unique.


    • Multiple instances: A user logs in with the same account multiple times or on different devices, which disrupts signaling.
    • Offline signaling: Only online instances can receive messages. Messages sent to offline instances will not be sent again when the instances go online.
      For FAQs, see TRTCCalling for Web.

    Technical Support

    If you have other questions, you can fill out a contact form or email colleenyu@tencent.com.

    Learn More

    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