tencent cloud



Last updated: 2022-05-07 11:48:54

    This document describes how to quickly run the TRTC demo for Electron.


    You have signed up for a Tencent Cloud account.


    Step 1. Create an application

    1. Log in to the TRTC console and select Development Assistance > Demo Quick Run.
    2. Select New and enter an application name such as TestTRTC. If you have already created an application, select Existing.
    3. Add or edit tags according to your actual business needs and click Create.

    • An application name can contain up to 15 characters. Only digits, letters, Chinese characters, and underscores are allowed.
    • Tags are used to identify and organize your Tencent Cloud resources. For example, an enterprise may have multiple business units, each of which has one or more TRTC applications. In this case, the enterprise can tag TRTC applications to mark out the unit information. Tags are optional and can be added or edited according to your actual business needs.

    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 demo project files

    1. In the Modify Configuration step, select the development platform in line with the source package downloaded.
    2. Find and open the Electron/js/GenerateTestUserSig.js file.
    3. Set 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.

    • 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?.

    File paths and description:

    |---README.md                             README file. Please read it carefully.
    |---main.electron.js                      Main Electron file
    |---public                                Static files
    |---vue.config.js                         Vue CLI project file
    |---src                                   Source code directory
    | |---app.vue
    | |---common.css
    | |---main.js
    | |---components                          UI component
    | | |---main-menu.vue
    | | |---nav-bar.vue
    | | |---show-screen-capture.vue
    | |---common                              Utility functions, public libraries, etc.
    | | |---live-room-service.js
    | | |---log.js                            Log tools
    | | |---mtah5.js                          
    | | |---routes.js
    | | |---rand.js
    | |---pages                               Views
    | | |---index.vue                         Homepage
    | | |---trtc                              Video conferencing views
    | | | |---trtc-room.vue                   Video conferencing room view
    | | | |---trtc-index.vue                  Video conferencing entry view
    | | |---404.vue
    | | |---live                              Live streaming views
    | | | |---live-index.vue                  Live streaming entry view
    | | | |---live-room-audience.vue          Audience room view
    | | | |---live-room-anchor.vue            Anchor room view
    | |---debug                               When deploying your project, please move the signature logic in this folder to the server for implementation.
    | | |---lib-generate-test-usersig.min.js  
    | | |---gen-test-user-sig.js              

    Step 4. Compile and run

    1. Install the latest version of Node.js. We recommend you use a 64-bit MSI file for the installation. Download here.

    2. Press Windows+R and type cmd to open the Command Prompt as an administrator, locate the project directory, and run the following command.

      $ npm install

    3. After the npm dependencies are installed, run the following command in the Command Prompt to run the demo.

      $ npm run start  # On first run, it may take a while to show the UI.
      Running the demo

    Main project commands

    Command Description
    npm run start Runs the demo in development environment.
    npm run pack:mac Packages the project into a DMG installer for macOS.
    npm run pack:win64 Packages the project into a 64-bit EXE installer for Windows.


    1. Only public and private keys can be obtained when I try to view the key. How do I get a key?

    TRTC SDK 6.6 (August 2019) and later versions use the new signature algorithm HMAC-SHA256. If your application was created before August 2019, you need to upgrade the signature algorithm to get a new key. Without upgrading, you can continue to use the old algorithm ECDSA-SHA256.


    1. Log in to the TRTC console.
    2. Click Application Management on the left sidebar, find your application, and click Application Info.
    3. Select the Quick Start tab and click upgrade in Step 2: obtain the secret key to issue UserSig.

    2. The demo is running on two devices, but why can't they display the images of each other?

    Make sure that the two devices use different UserIDs. With TRTC, you cannot use the same UserID on two devices simultaneously unless the SDKAppIDs are different.

    3. What firewall restrictions does the SDK face?

    The SDK uses the UDP protocol for audio/video transmission and therefore cannot be used in office networks that block UDP. If you encounter such a problem, see How to Deal with Firewall Restrictions.


    For more FAQs, see Electron.

    Technical Support

    Contact us if you have any questions.


    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