Call

Web
- Overview
  - Product Introduction
  - Activate the Service
  - Pricing
    - Free Minutes
    - Call Monthly Packages
    - Billing Explanation for Subscription Package Duration
- Get Started
  - Run Sample Code
  - Integration (React)
  - Integration (Vue3)
  - Secure authentication with userSig
- Basic Features
  - UI Customization
  - Configuring Nickname and Avatar
  - GroupCall
  - Floating Window
  - Custom Ringtone
  - Configure Resolution and Fill Mode
  - Monitoring Call Status
  - Language Settings
- Advanced Features
  - Virtual Background
  - AI Noise Suppression
  - On-Cloud Recording
- Client APIs
  - UIKit APIs
    - API Overview
    - TUICallKit
  - Engine APIs
    - 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
- FAQs
  - All Platfroms
  - Web
  - ErrorCode
  - Release Notes
Android
- Overview
  - Product Introduction
  - Activate the Service
  - Pricing
    - Free Minutes
    - Call Monthly Packages
    - Billing Explanation for Subscription Package Duration
- Get Started
  - Run Sample Code
  - Integration
  - Secure authentication with userSig
- Basic Features
  - UI Customization
  - Offline Call Push
  - Configuring Nicknames and Avatars
  - Group Call
  - Floating Window
  - Custom Ringtone
  - Monitoring Call Status
- Advanced Features
  - Virtual Background
  - AI Noise Suppression
  - On-Cloud Recording
- Client APIs
  - UIKit APIs
    - API Overview
    - TUICallKit
    - TUICallObserver
    - Type Definition
  - Engine APIs
    - TUICallEngine
- 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
- FAQs
  - All Platforms
  - Android
  - ErrorCode
  - Release Notes
iOS
- Overview
  - Product Introduction
  - Activate the Service
  - Pricing
    - Free Minutes
    - Call Monthly Packages
    - Billing Explanation for Subscription Package Duration
- Get Started
  - Run Sample Code
  - Integration
  - Secure authentication with userSig
- Basic Features
  - UI Customization
  - Offline Call Push
    - VoIP
    - APNs
  - Configuring Nicknames and Avatars
  - Group Call
  - Floating Window
  - Custom Ringtone
  - Monitoring Call Status
- Advanced Features
  - Virtual Background
  - AI Noise Suppression
  - On-Cloud Recording
- Client APIs
  - UIKit APIs
    - API Overview
    - TUICallKit
    - TUICallObserver
    - Type Definition
  - Engine APIs
    - TUICallEngine
- 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
- FQAs
  - All Platform
  - iOS
  - ErrorCode
  - Release Notes
Flutter
- Overview
  - Product Introduction
  - Activate the Service
  - Pricing
    - Free Minutes
    - Call Monthly Packages
    - Billing Explanation for Subscription Package Duration
- Get Started
  - Run Sample Code
  - Integration
  - Secure authentication with userSig
- Basic Features
  - UI Customization
  - offline Call Push
    - Notification
    - VoIP (Optional)
  - Configuring Nicknames and Avatars
  - Group Call
  - Floating Window
  - Custom Ringtone
  - Monitoring Call Status
- Advanced Features
  - Virtual Background
  - AI Noise Suppression
  - On-Cloud Recording
  - Beauty Effects
- Client APIs
  - 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
- FQAs
  - All Platform
  - Flutter
  - ErrorCode
  - Upgrading
  - Release Notes

Call

Run Sample Code

This article will introduce how to quickly implement an audio and video call demo. You will complete the following key steps within 10 minutes and ultimately obtain a video call feature with a full user interface.
﻿
﻿
﻿
Environment preparations
﻿Node.js version 16+.
Modern browser, supporting WebRTC API.
Step 1: Download the demo
1. Open the terminal and clone the repository.
git clone https://github.com/Tencent-RTC/TUICallKit.git﻿
2. Install dependencies.
React
Vue3
 cd ./TUICallKit/Web/basic-react
 cd ./TUICallKit/Web/basic-vue3
 npm install
Step 2: Configure the demo
﻿Go to the Activate Service page and get the SDKAppID and SDKSecretKey, then fill them in the GenerateTestUserSig-es.js file.
React
Vue3
File path: TUICallKit/Web/basic-react/src/debug/GenerateTestUserSig-es.js
﻿
﻿
﻿
File path: TUICallKit/Web/basic-vue3/public/debug/GenerateTestUserSig-es.js
﻿
﻿
﻿
Step 3: Run the demo
Open the terminal, copy the sample command to run the demo.
TUICallKit/Web/basic-react
TUICallKit/Web/basic-vue3
npm run dev
npm run serve
Warning:
For local environments, access under the localhost protocol. For public network experience, access under the HTTPS protocol. For details, refer to Network Access Protocol Instructions.
Step 4: Make your first call
1. Open the browser page, enter the project run address, and log in to userID (defined by you).
﻿
﻿
﻿
2. Input the callee's userID and click call to experience your first call.
﻿
﻿
﻿
﻿
﻿
﻿

Environment preparations
Step 1: Download the demo
Step 2: Configure the demo
Step 3: Run the demo
Step 4: Make your first call