Starter Deal! First 3 month from only  $9.9 /month!
Starter Deal! First 3 month from only  $9.9 /month!
Grab It Now 
Call
  • Overview
  • Web
    • Run Sample Demo
    • Integration
      • Web&H5 (React)
      • Web&H5 (Vue3)
    • AI Noise Suppression
    • Virtual Background
    • UI Customization
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Configure Resolution and Fill Mode
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallEvent
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Release Notes
  • Android
    • Run Sample Demo
    • Integration
    • AI Noise Suppression
    • Virtual Background
    • UI Customization
    • Offline Call Push
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Release Notes
  • iOS
    • Run Sample Demo
    • Integration
    • AI Noise Suppression
    • Virtual Background
    • UI Customization
    • Offline Call Push
      • VoIP
      • APNs
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Release Notes
  • Flutter
    • Run Sample Demo
    • Integration
    • AI Noise Suppression
    • Virtual Background
    • UI Customization
    • offline Call Push
      • Notification
      • VoIP (Optional)
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Beauty Effects
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Upgrading
    • Release Notes
  • Overview
    • Overview
  • Activate the Service
  • Pricing
    • Call Monthly Packages
    • Pay-As-You-Go
    • Free Minutes
  • ErrorCode
  • FAQs
    • All Platform
      • FAQs
      • UserSig
    • Web
    • Flutter
    • iOS
    • Android
Call

Run Sample Demo

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
React
Vue3
cd ./TUICallKit/Web/basic-react
cd ./TUICallKit/Web/basic-vue3
npm install

Step 2. Configure Demo

1. Click to activate Tencent-RTC Application, obtainSDKAppID、SDKSecretKey.
2. Fill in SDKAPPID、SDKSecretKey.
React
Vue3







Step 3. Run Demo

1. Run the Demo by entering commands in the terminal.
Note:
For local environments, please access under the localhost protocol. For details, see Description of Network Access Protocol.
React
Vue3
# TUICallKit/Web/basic-react
npm run dev
# TUICallKit/Web/basic-vue3
npm run serve
2. Open two browser pages, enter the same URL, and then log in with two different userID. (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.