Desktop Browser

Last updated: 2021-04-20 15:39:58

    This document describes how to quickly run the demo for TRTC SDK for desktop browsers.

    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 two-channel big/small video images, with more flexible screen sharing schemes and better recovery capabilities on poor network connections.
    OS BrowserMinimum Browser
    Version Requirement
    Receive (Playback)Send (Broadcast)Screen SharingSDK Version Requirement
    macOS Safari (desktop) 11+ Supported Supported Supported (on Safari 13+) -
    Chrome (desktop) 56+ Supported Supported Supported (on Chrome 72+) -
    Firefox (desktop) 56+ Supported Supported Supported (on Firefox 66+) 4.7.0+
    Edge (desktop) 80+ Supported Supported Supported 4.7.0+
    Windows Chrome (desktop) 56+ Supported Supported Supported (on Chrome 72+) -
    QQ browser (desktop, WebKit core) 10.4+ Supported Supported Not supported -
    Firefox (desktop) 56+ Supported Supported Supported (on Firefox 66+) 4.7.0+
    Edge (desktop) 80+ Supported Supported Supported 4.7.0+
    iOS 11.1.2+ Safari (mobile) 11+ Supported Supported Not supported -
    iOS 12.1.4+ WeChat embedded browser - Supported Not supported Not supported -
    iOS 14.3+ WeChat embedded browser WeChat 6.5+ Supported Supported Not supported -
    Android QQ browser (mobile) - Not supported Not supported Not supported -
    UC browser (mobile) - Not supported Not supported Not supported -
    WeChat embedded browser (TBS core) - Supported Supported Not supported -
    WeChat embedded browser (XWEB core) - Supported Supported Not supported -

    Note:

    • You can open WebRTC Support Level Test in a browser, for example, from WeChat Official Account, 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 TRTC SDK for desktop browsers.

    Environment Requirements

    • Please use the latest version of Chrome.
    • TRTC SDK for desktop browsers uses the following ports for data transfer, which should be added to the allowlist of the firewall. After configuration, please use the official demo to check whether the ports work.
    • TCP port: 8687
    • UDP ports: 8000, 8080, 8800, 843, 443, 16285
    • Domain name: qcloud.rtc.qq.com

    Prerequisites

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

    Directions

    Step 1. Create an application.

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

    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 platform in line with the source package downloaded.
    2. Find and open the Web/TRTCSimpleDemo/js/debug/GenerateTestUserSig.js file.
    3. Set parameters in GenerateTestUserSig.js as follows:
      • 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 TRTC SDK for desktop browsers; therefore, Chrome is recommended for the demo.

    On the demo landing page:

    • Click Enter Room to enter a TRTC room and publish local audio/video streams.
      You can open multiple pages and click *Enter Room on each of them. You should be able to see multiple video images, which simulate a real-time video/audio call.
    • Click the camera icon to select a camera.
    • Click the mic icon 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 in the left navigation pane, 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 TRTC SDK for desktop browsers failed with regard to 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 TRTC SDK for desktop browsers 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 "Join room failed result: 10006 error: service is suspended, if charge is overdue,renew it" occurs, check whether your TRTC application service is available.
    Log in to the TRTC console, select the application you created, and click Application Info to view its service status.