Run Sample Demo
This document describes how to quickly run the demo for the TRTC Web SDK.
Prerequisites
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.2 Run demo locally with the following steps.
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.
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.
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
FAQs
Supported platforms
TRTC Web SDK supports desktop and major mobile browsers(Chrome, Edge, Safari, Firefox, Opera). For details, please refer to Supported Platforms.