Last updated: 2022-01-25 16:36:54

    This document describes how to quickly run the demo of the TRTC SDK for web.

    Supported Platforms

    Proposed by Google, the WebRTC technology is well supported by Chrome (desktop), Edge (desktop), Firefox (desktop), and Safari (desktop and mobile), but poorly or not supported by other platforms such as browsers on Android.

    • If your application scenario is mainly in the education sector, consider using TRTC SDK for Electron, which supports big and small (dual-channel) images, with more flexible screen sharing schemes and better recovery capabilities on poor network connections.

    For details about the browsers supported by the TRTC SDK for web, please see Supported Platforms.

    Note:

    • You can run the TRTC Web SDK Support Level Test in a browser, for example, WebView, to test whether the environment fully supports WebRTC.
    • Due to H.264 copyright restrictions, Chrome and Chrome WebView-based browsers on Huawei devices do not support the TRTC SDK for web.

    Environment Requirements

    • Please use the latest version of Chrome.
    • The TRTC SDK for web uses the following ports and domain name for data transfer, which should be added to the allowlist of the firewall. After configuration, use the official demo to check whether the configuration has taken effect.

    For details, please see Dealing with Firewall Restrictions.

    URL Protocol Support

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

    Prerequisite

    You have signed up for a Tencent Cloud account and completed identity verification.

    Directions

    Step 1. Create an application

    1. In the TRTC console, select Development Assistance > Demo Quick Run.
    2. Enter an application name such as TestTRTC and click Create. If you have already created an application, click Existing to select it.
    3. Add or edit tags for your application if necessary, and click Create.
      Note:

      • 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. After the download is completed, 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 Web/base-js/js/debug/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.

    Note:

    • 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

    Open index.html in the root directory of the demo with Chrome to run the demo.

    Note:

    • Normally, the demo needs to be deployed on the server and then accessed through https://domain name/xxx. You can also build a server locally and access the demo through localhost:port.
    • Currently, the desktop version of Chrome offers better support for the features of the TRTC SDK for web; therefore, Chrome is recommended for the demo.
    • Click Join to join a room and publish the local stream.
      You can open multiple pages and click *Join on each of them. You should be able to see multiple video images, which simulate a real-time video/audio call.
    • Click Camera Select to select a camera.
    • Click Microphone Select to select a mic.
      Note:

      WebRTC uses the camera and mic of your device to capture audio and video. During the demo run, when prompted by Chrome, you should click Allow.

    FAQs

    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. After upgrading, you can switch between the new and old algorithms as needed.

    Upgrade/Switch:

    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, Asymmetric Encryption, or HMAC-SHA256 in Step 2: obtain the secret key to issue UserSig.
      • Upgrade
      • Switch to the old algorithm ECDSA-SHA256:
      • Switch to the new algorithm HMAC-SHA256:

    2. What should I do if the client error "RtcError: no valid ice candidate found" occurs?

    This error indicates that the TRTC SDK for web failed with regard to hole punching via Session Traversal Utilities for NAT (STUN). Please check your firewall configuration against the Environment Requirements.

    3. What should I do if the client error "RtcError: ICE/DTLS Transport connection failed" or "RtcError: DTLS Transport connection timeout" occurs?

    It indicates that the TRTC SDK for web failed to establish a media transmission channel. Please check your firewall configuration against the Environment Requirements.

    4. What should I do if a 10006 error occurs?

    If the error "Join room failed result: 10006 error: service is suspended, if charge is overdue,renew it" occurs, check whether the TRTC service status for your application is “normal”.
    Log in to the TRTC console, select the application you created, and click Application Info to view its service status.