- Release Notes and Announcements
- Release Notes
- TRTC Live (TUILiveKit) Product Launch Announcement
- TRTC Conference Official Editions Launched
- The commercial version of Conference is coming soon
- Terms and Conditions Applicable to $9.9 Starter Package
- Rules for the "First Subscription $100 Discount" Promotion
- Announcement on the Start of Beta Testing for Multi-person Audio and Video Conference
- TRTC Call Official Editions Launched
- License Required for Video Playback in New Version of LiteAV SDK
- TRTC to Offer Monthly Packages
- Product Introduction
- Purchase Guide
- Billing Overview
- RTC-Engine Packages
- TRTC Call Monthly Packages
- TRTC Conference Monthly Packages
- TRTC Live Monthly Packages
- Pay-As-You-Go
- Billing Explanation for Subscription Package Duration
- Billing of On-Cloud Recording
- Billing of MixTranscoding and Relay to CDN
- Free Minutes
- FAQs
- Billing of Monitoring Dashboard
- Billing of Recording Delivery
- Overdue and Suspension Policy
- Refund Policies
- User Tutorial
- Free Demo
- Video Calling (Including UI)
- Overview (TUICallKit)
- Activate the Service（TUICallKit）
- Run Demo（TUICallKit）
- Integration (TUICallKit)
- UI Customization (TUICallKit)
- Offline Call Push (TUICallKit)
- AI Noise Reduction (TUICallKit)
- Virtual Background (TUICallKit)
- On-Cloud Recording (TUICallKit)
- Additional Features（TUICallKit）
- Server APIs (TUICallKit)
- Client APIs (TUICallKit)
- ErrorCode
- Release Notes (TUICallKit)
- FAQs(TUICallKit)
- Multi-Participant Conference (with UI)
- Overview (TUIRoomKit)
- Activate the Service (TUIRoomKit)
- Run Demo（TUIRoomKit）
- Integration (TUIRoomKit)
- UI Customization (TUIRoomKit)
- Virtual Background (TUIRoomKit)
- Conference Control (TUIRoomKit)
- Cloud Recording (TUIRoomKit)
- AI Noise Reduction (TUIRoomKit)
- In-Conference Chat (TUIRoomKit)
- Robot Streaming (TUIRoomKit)
- Enhanced Features (TUIRoomKit)
- Client APIs (TUIRoomKit)
- Server APIs (TUIRoomKit)
- FAQs (TUIRoomKit)
- Error Code (TUIRoomKit)
- SDK Update Log (TUIRoomKit)
- Live Streaming (Including UI)
- Voice Chat Room (with UI)
- Overview (TUILiveKit)
- Activating the Service (TUILiveKit)
- Integration (TUILiveKit)
- Interactive Bullet Comments (TUILiveKit)
- Interactive Gifts (TUILiveKit)
- Client APIs (TUICallKit)
- Error Codes (TUILiveKit)
- Release Notes（TUILiveKit）
- FAQs（TUILiveKit）
- Integrating TUIVoiceRoom (Android)
- Integrating TUIVoiceRoom (iOS)
- TUIVoiceRoom APIs
- Integration (No UI)
- SDK Download
- API Examples
- Integration Guide
- Client APIs
- Advanced Features
- Relay to CDN
- Enabling Advanced Permission Control
- RTMP Streaming with TRTC
- Utilizing Beautification Effects
- Testing Hardware Devices
- Testing Network Quality
- On-Cloud Recording
- Custom Capturing and Rendering
- Custom Audio Capturing and Playback
- Sending and Receiving Messages
- Event Callbacks
- Access Management
- How to push stream to TRTC room with OBS WHIP
- Server APIs
- Console Guide
- Solution
- FAQs
- Legacy Documentation
- Protocols and Policies
- TRTC Policy
- Glossary
- Release Notes and Announcements
- Release Notes
- TRTC Live (TUILiveKit) Product Launch Announcement
- TRTC Conference Official Editions Launched
- The commercial version of Conference is coming soon
- Terms and Conditions Applicable to $9.9 Starter Package
- Rules for the "First Subscription $100 Discount" Promotion
- Announcement on the Start of Beta Testing for Multi-person Audio and Video Conference
- TRTC Call Official Editions Launched
- License Required for Video Playback in New Version of LiteAV SDK
- TRTC to Offer Monthly Packages
- Product Introduction
- Purchase Guide
- Billing Overview
- RTC-Engine Packages
- TRTC Call Monthly Packages
- TRTC Conference Monthly Packages
- TRTC Live Monthly Packages
- Pay-As-You-Go
- Billing Explanation for Subscription Package Duration
- Billing of On-Cloud Recording
- Billing of MixTranscoding and Relay to CDN
- Free Minutes
- FAQs
- Billing of Monitoring Dashboard
- Billing of Recording Delivery
- Overdue and Suspension Policy
- Refund Policies
- User Tutorial
- Free Demo
- Video Calling (Including UI)
- Overview (TUICallKit)
- Activate the Service（TUICallKit）
- Run Demo（TUICallKit）
- Integration (TUICallKit)
- UI Customization (TUICallKit)
- Offline Call Push (TUICallKit)
- AI Noise Reduction (TUICallKit)
- Virtual Background (TUICallKit)
- On-Cloud Recording (TUICallKit)
- Additional Features（TUICallKit）
- Server APIs (TUICallKit)
- Client APIs (TUICallKit)
- ErrorCode
- Release Notes (TUICallKit)
- FAQs(TUICallKit)
- Multi-Participant Conference (with UI)
- Overview (TUIRoomKit)
- Activate the Service (TUIRoomKit)
- Run Demo（TUIRoomKit）
- Integration (TUIRoomKit)
- UI Customization (TUIRoomKit)
- Virtual Background (TUIRoomKit)
- Conference Control (TUIRoomKit)
- Cloud Recording (TUIRoomKit)
- AI Noise Reduction (TUIRoomKit)
- In-Conference Chat (TUIRoomKit)
- Robot Streaming (TUIRoomKit)
- Enhanced Features (TUIRoomKit)
- Client APIs (TUIRoomKit)
- Server APIs (TUIRoomKit)
- FAQs (TUIRoomKit)
- Error Code (TUIRoomKit)
- SDK Update Log (TUIRoomKit)
- Live Streaming (Including UI)
- Voice Chat Room (with UI)
- Overview (TUILiveKit)
- Activating the Service (TUILiveKit)
- Integration (TUILiveKit)
- Interactive Bullet Comments (TUILiveKit)
- Interactive Gifts (TUILiveKit)
- Client APIs (TUICallKit)
- Error Codes (TUILiveKit)
- Release Notes（TUILiveKit）
- FAQs（TUILiveKit）
- Integrating TUIVoiceRoom (Android)
- Integrating TUIVoiceRoom (iOS)
- TUIVoiceRoom APIs
- Integration (No UI)
- SDK Download
- API Examples
- Integration Guide
- Client APIs
- Advanced Features
- Relay to CDN
- Enabling Advanced Permission Control
- RTMP Streaming with TRTC
- Utilizing Beautification Effects
- Testing Hardware Devices
- Testing Network Quality
- On-Cloud Recording
- Custom Capturing and Rendering
- Custom Audio Capturing and Playback
- Sending and Receiving Messages
- Event Callbacks
- Access Management
- How to push stream to TRTC room with OBS WHIP
- Server APIs
- Console Guide
- Solution
- FAQs
- Legacy Documentation
- Protocols and Policies
- TRTC Policy
- Glossary
This article will introduce how to quickly implement the Audio and Video Call demo. You will complete the following key steps within 10 minutes and ultimately obtain a video call feature with a comprehensive UI Interface.
Prerequisites
Node.js, if you do not have the Node.js environment, please click to Download.
Modern browser, supporting WebRTC API.
Step 1. Download Demo
1. Open the terminal and input the command to clone the repository
2. Install Dependencies
cd ./TUICallKit/Web/basic-react
cd ./TUICallKit/Web/basic-vue3
npm install
Step 2. Configure Demo
1. Click to activate Tencent-RTC Application, obtain
SDKAppID、SDKSecretKey. 2. Fill in
SDKAPPID、SDKSecretKey.File Path：
TUICallKit/Web/basic-react/public/debug/GenerateTestUserSig-es.js
File Path：
TUICallKit/Web/basic-vue3/public/debug/GenerateTestUserSig-es.js
Step 3. Run Demo
1. Run the Demo by entering commands in the terminal.
npm run dev
npm run serve
Warning:
For local environment, please access under
localhost protocol. For public network experience, please access under HTTPS protocol. For details, see Description of Network Access Protocol.2. Open two browser pages, enter the same URL, and then log in with two different userID(defined by you) . (This is the react demo effect)
3. After both userID have successfully logged in, input the other page's userID and click
Add to call list button.
Step 4. Make a first call
Click on the
Call button to experience your first call.
Yes
No
Was this page helpful?