tencent cloud

Feedback

Last updated: 2022-05-18 15:35:36

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

    Prerequisites

    Before you run the demo for the TRTC web SDK, pay attention to the following:

    Supported platforms

    The TRTC web SDK is based on WebRTC. For details about the browsers supported, see Supported Platforms.
    If your browser (for example, WebView) is not in the list, you can run a TRTC Web SDK Support Level Test in the browser to test whether it fully supports WebRTC.

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

    URL protocol support

    Because of the security policies of browsers, when you use WebRTC, there are requirements on the protocol used for access. For details, see the table below.

    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 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 -

    Firewall configuration

    The TRTC web SDK uses the following ports and domain names for data transfer, which should be added to the allowlist of your firewall. You can use our demo to check whether the configuration has taken effect. For details, see Dealing with Firewall Restrictions.

    • TCP port: 8687
    • UDP ports: 8000, 8080, 8800, 843, 443, 16285
    • Domain names: *.rtc.qq.com, yun.tim.qq.com

    Prerequisites

    You have signed up for a Tencent Cloud account.

    Directions

    Step 1. Create an application

    1. In the TRTC console, click 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.

    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 web SDK and demo source code.
    2. Click Next.

    Step 3. Get the SDKAppID and secret key

    1. In the Modify Configuration step, note the SDKAppID and secret key.
    2. Paste the SDKAppID and secret key and click Next.

    Step 4. Run the demo

    We offer the following demos for the TRTC web SDK to meet different customer needs:

    • Demo 1: base-js
      Development: jQuery + JavaScript
      The TRTC web standard demo (jQuery) integrates capabilities including audio/video calls and device selection. It can be run in a browser. You can try it out here.
    • Demo 2: quick-demo-js
      Development: JavaScript (no frameworks used)
      The TRTC web quick demo (JavaScript) integrates capabilities including audio/video call and device selection. It can be run in a browser. You can try it out here.
    • Demo 3: quick-demo-vue2-js
      Development: Vue 2 + JavaScript
      The TRTC web quick demo (Vue 2) integrates capabilities including audio/video call and device selection. To use it, you need to install Node.js. You can try it out here.
    • Demo 4: quick-demo-vue3-ts
      Development: Vue 3 + TypeScript
      The TRTC web quick demo (Vue 3) integrates capabilities including audio/video call and device selection. To use it, you need to install Node.js. You can try it out here.

    Directory: TRTC_Web/base-js

    1. Find and open TRTC_Web/base-js/js/debug/GenerateTestUserSig.js.
    2. Set parameters in the GenerateTestUserSig.js file as follows:
    • SDKAPPID: 0 by default. Set it to the actual SDKAppID.
    • SECRETKEY: Left empty by default. Set it to the actual key.
    1. 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 web SDK; therefore, Chrome is recommended.
    • Click Join Room to join a room and publish the local stream.
      You can open multiple pages and click Join Room on each of them. You should be able to see multiple videos, which simulate a real-time audio/video 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.

    Note:
    • The method used to generate `UserSig` in this document is to configure the secret key in the client code. This makes the key vulnerable to decompilation and reverse engineering. If your key is leaked, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for locally running a demo project and debugging.
    • The best practice 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 your server for a dynamic `UserSig`. For more information, see How do I calculate UserSig during production?.

    FAQs

    1. There is only information of the public and private keys when I try to view the secret key. How do I get the secret key?

    Since the release of v6.6 for app and v4.0 for web in August 2019, the new signature algorithm HMAC-SHA256 has been used. 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 web SDK 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 web SDK 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.

    Note:

    For other questions, see Web.

    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