please select
RTC Engine
  • Overview
  • Web
    • Run Sample Demo
    • Integration
    • Basic Features
      • Screen Sharing
      • Live Streaming
      • Media Device
      • Audio Volume
      • Set Encoding Profile
      • Detect Network Quality
      • Detect Capabilities
    • Advance Features
      • Enable AI Denoiser
      • Enable Audio Mixer
      • Enable Watermark
      • Enable Virtual Background
      • Enable Beauty and Effects
      • Data Messages
      • Custom Capturing and Rendering
    • API List
    • Released Notes
    • Supported Platforms
    • Web FAQs
      • Optimize Multi-Person Video Calls
      • Handle Autoplay Restriction
      • Handle Firewall Restriction
      • Others
  • Android
    • Run Sample Code
    • Integration
    • Basic Features
      • Sensing Network Quality
      • Enabling Screen Sharing
      • Setting Video Quality
      • Rotating Videos
    • Advanced Features
      • Testing Newwork Quality
      • Custom Capturing and Rendering
      • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • TRTCCloud
      • TRTCStatistics
      • TRTCCloudListener
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • Type Definition
      • Deprecated Interface
      • Error Codes
    • Solution
      • Real-Time Chorus (TUIKaraoke)
        • Quick Integration
        • Implementation Steps
        • Song Synchronization
        • Lyric Synchronization
        • Vocal Synchronization
        • Mixing Stream Solution
        • TRTCKaraoke APIs
        • FAQs
    • Release Notes
  • iOS
    • Run Sample Code
    • Integration
    • Basic Features
      • Sensing Network Quality
      • Enabling Screen Sharing
      • Setting Video Quality
      • Rotating Videos
    • Advanced Features
      • Testing Network Quality
      • Custom Capturing and Rendering
      • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • Type Definition
      • Deprecated Interface
      • ErrorCode
    • Solution
      • Quick Integration
      • Implementation Steps
      • Song Synchronization
      • Lyric Synchronization
      • Vocal Synchronization
      • Mixing Stream Solution
      • TRTCKaraoke APIs
      • FAQs
    • Release Notes
  • macOS
    • Run Sample Code
    • Integration
    • Basic Features
      • Sensing Network Quality
      • Enabling Screen Sharing
      • Sharing Computer Audio
      • Setting Video Quality
      • Rotating Videos
    • Advanced Features
      • Testing Hardware Devices
      • Testing Network Quality
      • Custom Capturing and Rendering
      • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • Type Definition
      • Deprecated Interface
      • ErrorCode
      • Release Notes
    • Release Notes
  • Windows
    • Run Sample Code
    • Integration
    • Basic Features
      • Sensing Network Quality
      • Enabling Screen Sharing
      • Setting Video Quality
      • Rotating Videos
    • Advanced Features
      • Testing Hardware Devices
      • Testing Network Quality
      • Custom Capturing and Rendering
      • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • ITRTCCloud
      • ITRTCStatistics
      • TRTCCloudCallback
      • ITXAudioEffectManager
      • ITXDeviceManager
      • Type Definition
      • Deprecated Interface
      • Error Codes
    • Release Notes
  • Electron
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Sharing Computer Audio
      • 10.Setting Video Quality
      • 11.Rotating Videos
    • Client APIs
      • Overview
      • Error Codes
  • Flutter
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Sharing Computer Audio
      • 10.Setting Video Quality
      • 11.Rotating Videos
    • Client APIs
      • Overview
      • Error Codes
  • Unity
    • Integration
      • 1.API Examples
      • 2Importing the SDK
    • Client APIs
      • Overview
      • Error Codes
  • Qt
    • Integration
      • 1.Importing the SDK
  • Overview
    • Overview
  • Concepts
  • Features
  • Performance Statistics
  • Pricing
    • Free Minutes
    • RTC-Engine Monthly Packages
    • Billing Explanation for Subscription Package Duration
    • Pay-as-you-go
      • Billing of Audio and Video Duration
      • Billing of On-Cloud Recording and Recording Delivery
      • Billing of MixTranscoding and Relay to CDN
  • FAQs
    • FAQs for Beginners
    • Migration Guide
      • Twilio Video to Tencent RTC
      • Billing
      • Features
      • UserSig
      • Firewall Restrictions
      • How to Downsize Installation Package
      • TRTCCalling for Web
      • Audio and Video Quality
      • Others
RTC Engine

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