Starter Deal! First 3 month from only  $9.9 /month!
Starter Deal! First 3 month from only  $9.9 /month!
Grab It Now 
RTC Engine
Overview
  • Web
    • Run Sample Demo
    • SDK Quickstart
    • 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 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
    • 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.Setting Video Quality
      • 10.Rotating Videos
    • 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
    • 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.Setting Video Quality
      • 10.Rotating Videos
    • 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
    • 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
    • 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
    • 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.Setting Video Quality
      • 10.Rotating Videos
    • 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
    • RTC-Engine Packages
    • Billing of On-Cloud Recording
    • Billing of MixTranscoding and Relay to CDN
    • Billing Explanation for Subscription Package Duration
    • Billing of Monitoring Dashboard
    • Free Minutes
    • Pay-As-You-Go
  • Tencent RTC Quickplay: Experience Ultimate Real-Time Audio and Video Interaction!
  • 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

Step 1. Create an application

1. Log in to the TRTC Console, click Create Application.



2. In the create popup, select RTC Engine and enter the application name, select the data Storage Region, and click Create.
Note:
The default Data Storage for real-time audio and video service data is in Singapore, and the storage for instant messaging service data is in your selected data center.




Step 2. Get your SDKAppId and SDKSecretKey

After the application is successfully created, you can access your SDKAppID and SDKSecretKey in the Basic Information section. You will need these two pieces of information to experience the Demo.




Step 3. Run 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/quick-demo-js/index.html file in the downloaded source code.
2. Fill in the SDKAppId and SDKSecretKey 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/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 SDKSecretKey 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/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 SDKSecretKey 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
In the demo above, we used SDKSecretKey to generate UserSig locally in order to make it easier for you to run demo quickly. In your production environment, you cannot generate userSig in this way, because SDKSecretKey leakage may cause 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

Refer to SDK Quickstart.

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

Firewall configuration

Others

For more, see: Web FAQs.