Tencent Cloud

Recent Pages

Web

Last updated: 2024-06-24 11:14:54

This document describes how to quickly run the demo for the TRTC Web SDK.
Prerequisites
You need to create a Tencent RTC account.
Steps To Run Demo
1. Create an application
Log in to the TRTC Console and create an RTC Engine application. If you have already done so, you may skip this step.
2. Get SDKAppID and SDKSecretKey
Get SDKAppID and SDKSecretKey of your created application in the Basic Information.
﻿
﻿
﻿
3. Run demo
1. Run demo online.
We provide the following basic demos. You may choose a project framework that you are familiar with to experience the demo:
1.1 ﻿quick-demo-js is a demo based on Javascript. Souce code: GitHub. 
1.2 ﻿quick-demo-vue2-js is a demo based on Vue2 + Javascript. Source code: GitHub.
1.3 ﻿quick-demo-vue3-ts is a demo based on Vue3 + Typescript. Source code: GitHub.
2. Run demo locally.
2.1 Download source code by GitHub or Zip.
2.2 Run demo locally with the following steps.
quick-demo-js
quick-demo-vue2-js
quick-demo-vue3-ts
1. Open TRTC_Web/quick-demo-js/index.html.
2. Fill in the SDKAppId and SDKSecretKey obtained in Step2
﻿
﻿
﻿
3. Function Experience:
Click Enter Room to enter the room.
Click Start Local Audio/Video to capture microphone or camera.
Click Stop Local Audio/Video to stop capturing microphone or camera.
Click Start Share Screen to start screen sharing.
Click Stop Share Screen to cancel screen sharing.
4. After entering the room, you can invite others to experience the TRTC Web voice and video communication feature together by sharing the invitation link.
1. Change to the directory TRTC_Web/quick-demo-vue2-js/.
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 Node.js in advance.
npm start
3. The default browser will automatically open the address http://localhost:8080/.
4. Fill in the SDKAppId and SDKSecretKey obtained in Step2.
﻿
﻿
﻿
5. Experience
Input userId and roomId
Click Enter Room to enter the room
Click Start Local Audio/Video to capture microphone or camera
Click Stop Local Audio/Video to stop capturing microphone or camera
Click Start Share Screen to start screen sharing
Click Stop Share Screen 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. Change to the directory TRTC_Web/quick-demo-vue3-ts/.
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 SDKSecretKey obtained in Step2.
﻿
﻿
﻿
5. Experience
Input userId and roomId
Click Enter Room to enter the room
Click Start Local Audio/Video to capture microphone or camera
Click Stop Local Audio/Video to stop capturing microphone or camera
Click Start Share Screen to start screen sharing
Click Stop Share Screen 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：
In the demo above, we used SDKSecretKey to generate UserSig locally in order to help you go through the demo easier. However, in the production environment, you are not supposed to generate userSig in this way, which may lead to SDKSecretKey leakage, thereby creating a chance for attackers to steal your TRTC traffic.
The correct way to generate UserSig is to integrate Server-Side Generation of UserSig on your server. When an user enters the room:
Send a http request to your server.
Generate a UserSig on your server.
Return it to the user to enter the room.
When you deploy your page to a production environment, you need to have your page accessed through the HTTPS(e.g. https://domain/xxx). For the reason, please refer to the document Page Access Protocol Restriction Description.
Start Integration
Please refer to SDK Quick Start.
FAQs
Supported platforms
TRTC Web SDK supports desktop and major mobile browsers(Chrome, Edge, Safari, Firefox, Opera). For details, please refer to Supported Platforms. 
Others
More useful information at Web FAQs.