tencent cloud

Feedback

Last updated: 2022-09-26 11:31:25
    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
    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
    -

    Firewall configuration

    Firewall restrictions may cause audio/video calls to fail. To avoid this, add the ports and domains specified in Firewall Restrictions to the allowlist of your firewall.

    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.
    
    
    
    explain
    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.
    Demo 1
    Demo 2
    Demo 3
    Demo 4
    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.
    3. Run the demo: Open index.html in the root directory of the demo with Chrome to run the demo.
    notice
    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.
    explain
    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.
    
    Directory: TRTC_Web/quick-demo-js
    1. Find TRTC_Web/quick-demo-js/index.html and open it with a browser.
    explain
    For details about the browsers supported by the TRTC web SDK, see Supported Platforms.
    For information about the ports and domain names used by the TRTC web SDK, see Dealing with Firewall Restrictions.
    2. Enter the SDKAppID and secret key obtained in Step 3.
    
    
    3. You can try the following:
    Click Join Room to join a room.
    Click Publish to publish the local stream.
    Click Unpublish to stop publishing the local stream.
    Click Leave Room to leave the room.
    Click Start Share Screen to publish the screen sharing stream.
    Click Stop Share Screen to stop publishing the screen sharing stream.
    4. After joining a room, you can use a share link to invite others to try the audio/video call feature with you.
    Directory: TRTC_Web/quick-demo-vue2-js
    1. Go to the TRTC_Web/quick-demo-vue2-js/ directory.
    2. Run the demo:
    npm start
    The http://localhost:8080/ address will be opened in your default browser automatically.
    notice
    The default port number is 8080. Please use the number of the actual port used to run the demo locally.
    For details about the browsers supported by the TRTC web SDK, see Supported Platforms.
    For information about the URL protocols supported, see URL Protocol Support.
    For information about the ports and domain names used by the TRTC web SDK, see Dealing with Firewall Restrictions.
    3. Enter the SDKAppID and secret key obtained in Step 3.
    
    
    4. You can try the following:
    Click Join Room to join a room.
    Click Publish to publish the local stream.
    Click Unpublish to stop publishing the local stream.
    Click Leave Room to leave the room.
    Click Start Share Screen to publish the screen sharing stream.
    Click Stop Share Screen to stop publishing the screen sharing stream.
    5. After joining a room, you can use a share link to invite others to try the audio/video call feature with you.
    Directory: TRTC_Web/quick-demo-vue3-ts
    1. Go to the TRTC_Web/quick-demo-vue3-ts/ directory.
    2. Run the demo:
    npm start
    The http://localhost:8080/ address will be opened in your default browser automatically.
    notice
    The default port number is 8080. Please use the number of the actual port used to run the demo locally.
    For details about the browsers supported by the TRTC web SDK, see Supported Platforms.
    For information about the URL protocols supported, see URL Protocol Support.
    For information about the ports and domain names used by the TRTC web SDK, see Dealing with Firewall Restrictions.
    3. Enter the SDKAppID and secret key obtained in Step 3.
    
    
    4. You can try the following:
    Click Join Room to join a room.
    Click Publish to publish the local stream.
    Click Unpublish to stop publishing the local stream.
    Click Leave Room to leave the room.
    Click Start Share Screen to publish the screen sharing stream.
    Click Stop Share Screen to stop publishing the screen sharing stream.
    5. After joining a room, you can use a share link to invite others to try the audio/video call feature with you.
    notice
    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 HMAC-SHA256 in Step 2: obtain the secret key to issue UserSig.
    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 Firewall Restrictions.

    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 Firewall Restrictions.

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