Special offer for new TRTC customers! Save  $100 on your first subscription.
Special offer for new TRTC customers! Save  $100 on your first subscription.
Grab It Now 
Menu

Web

Last updated: 2023-09-08 10:43:51Download PDF
This document describes how to quickly run the demo for the TRTC web SDK.

Prerequisites

Directions

Step 1. Create an application

Please visit the TRTC console and create an RTC Engine application.

Step 2. Get your SDKAppId and SecretKey

After your application created, you can get your SDKAppID and SecretKey on Basic informaction. SDKAppID and SecrentKey is needed for running demo.




Step 3. Run the Demo

1. Run demo online.
We provides the following basic demos. You can choose the project framework you are familiar with to run and experience:
1.1 quick-demo-js is a demo coded by Javascript. Souce code: github.
1.2 quick-demo-vue2-js is a demo coded by Vue2 + Javascript. Source code: github.
1.3 quick-demo-vue3-ts is a demo coded by Vue3 + Typescript. Source code: github.
2. Run demo locally.
2.1 Download source code by Github or Zip.
2.2 Run demo locally by following steps.
quick-demo-js
quick-demo-vue2-js
quick-demo-vue3-ts
1. Find and open TRTC_Web/v5/quick-demo-js/index.html file in the downloaded source code.
2. Fill in the SDKAppId and SecretKey obtained in Step2


3. Function Experience:
Click the "Enter Room" button to enter the room.
Click the "Start Local Audio/Video" button to capture microphone or camera.
Click the "Stop Local Audio/Video" button to stop capturing microphone or camera.
Click the "Start Share Screen" button to start screen sharing.
Click the "Stop Share Screen" button to cancel screen sharing.
4. After entering the room, you can invite others to experience the TRTC Web voice and video communication function together through the sharing invitation link.
1. Find and go to the directory TRTC_Web/v5/quick-demo-vue2-js/ in the downloaded source code.
cd quick-demo-vue2-js
2. Run the demo locally by executing the following command in the terminal, which will automatically install dependencies and run the demo.
You may need to install Nodejs first.
npm start
3. The default browser will automatically open the address http://localhost:8080/.
4. Fill in the SDKAppId and SecretKey obtained in Step2.


5. Experience
Input userId and roomId
Click the "Enter Room" button to enter the room
Click the "Start Local Audio/Video" button to capture microphone or camera
Click the "Stop Local Audio/Video" button to stop capturing microphone or camera
Click the "Start Share Screen" button to start screen sharing
Click the "Stop Share Screen" button to stop screen sharing
6. After entering the room, you can invite others to experience TRTC's web-based audio and video communication feature by sharing the invitation link.
1. Find and go to the directory TRTC_Web/v5/quick-demo-vue3-ts/ in the downloaded source code.
2. Run the demo locally by executing the following command in the terminal, which will automatically install dependencies and run the demo.
You may need to install Nodejs first.
npm start
3. The default browser will automatically open the address http://localhost:3000/.
4. Fill in the SDKAppId and SecretKey obtained in Step2.


5. Experience
Input userId and roomId
Click the "Enter Room" button to enter the room
Click the "Start Local Audio/Video" button to capture microphone or camera
Click the "Stop Local Audio/Video" button to stop capturing microphone or camera
Click the "Start Share Screen" button to start screen sharing
Click the "Stop Share Screen" button to stop screen sharing
6. After entering the room, you can invite others to experience TRTC's web-based audio and video communication feature by sharing the invitation link.
Note:
To deploy to the public network for experience, you need to access it through HTTPS protocol, that is, https://domain/xxx. For the reason, please refer to the document Page Access Protocol Restriction Description.
The method used in this article to generate UserSig is to configure SecretKey in the client. In this method, SecretKey can be easily decompiled and reverse-engineered. Once your key is leaked, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for running Demo locally and debugging functions.
The correct way to issue UserSig is to integrate the calculation code of UserSig into your server and provide an interface for App. When you need UserSig, your App initiates a request to the business server to obtain a dynamic UserSig. For more details, please refer to Server-Side Generation of UserSig.

FAQs

Supported platforms

TRTC Web SDK is based on WebRTC implementation and currently supports desktop and mobile major browsers(Chrome, Edge, Safari, Firefox, Opera). For details about the browsers supported, see Supported Platforms.

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
Yes
Yes
Yes
Recommended
Production
HTTP
Yes
No
No
-
Local development
Yes
Yes
Yes
Recommended
Local development
Yes
Yes
Yes
-
Local development
http://[local IP address]
Yes
No
No
-
Local development
file:///
Yes
Yes
Yes
-

Firewall configuration

Users may fail to have an audio/video call due to firewall restrictions. To avoid this, add the ports and domains specified in Firewall Restrictions to the firewall allowlist.

Others

For more, see: Web FAQs.