# Tencent RTC Call — Web

> Call documentation for Web platform.

## UIKit

### Get Started

- [Run the Demo](https://pre.trtc.io/document/60415.md): TUICallKit Web demo guide provides a quickstart for implementing audio and video call features with a full user interface. It is designed for developers using modern browsers with WebRTC support and Node.js 16+. The guide covers environment setup, demo download, configuration with SDK credentials, running the demo, and making the first call, enabling users to complete the process within 10 minutes.
- [Web&H5 (React)](https://pre.trtc.io/document/58484.md): TUICallKit React component quickstart guide helps developers rapidly integrate a complete audio and video call interface. It supports React 18 and 19 with Node.js 16+, requiring Tencent Cloud service activation and credentials. Key steps include environment setup, service activation, component download, import, initialization with SDKAppID and SDKSecretKey, and starting calls, enabling a seamless call experience within minutes.
- [Web&H5 (Vue3)](https://pre.trtc.io/document/50993.md): The TUICallKit component for Web and H5 platforms using Vue3 provides a complete audio and video call interface. This quickstart guide helps developers prepare the environment, activate Tencent Cloud services, download and integrate the TUICallKit component, and initialize the SDK with necessary credentials. Within 10 minutes, users can implement core call features including starting and answering calls, customizing UI, and enabling advanced functionalities.

### Basic Features

- [UserSig Authentication](https://pre.trtc.io/document/35166.md): This guide explains how to calculate UserSig, a security signature for Tencent-RTC services, during the debugging phase. It covers obtaining SDKAppID and SDKSecretKey from the Tencent-RTC console and generating UserSig using client sample code on multiple platforms including Android, iOS, Web, Windows, Flutter, and Mac. The steps ensure secure authentication for developers testing Tencent-RTC SDKs before official deployment.
- [Vue3](https://pre.trtc.io/document/67769.md): This guide details the quickstart process for integrating Chat and CallKit components on the Vue platform. It covers environment requirements including TypeScript, Sass, Node.js, and npm, followed by steps to activate audio and video call services, download and invoke the TUICallKit component, launch the project, send messages, and make the first call. It is designed for developers aiming to implement real-time communication features using Tencent RTC.
- [React](https://pre.trtc.io/document/67768.md): This quickstart guide for React demonstrates how to integrate Tencent Cloud's Chat and CallKit SDKs to enable audio and video call capabilities. It covers environment requirements, component installation, activation of services, and step-by-step instructions to send messages and make calls. Designed for developers using React 18+, TypeScript, and Node.js 16+, this guide helps implement real-time communication features efficiently.
- [UI Customization](https://pre.trtc.io/document/50997.md)
- [Configuring Nickname and Avatar](https://pre.trtc.io/document/59834.md): The TUICallKit SDK guide explains how developers can set and update user nicknames and avatars across Android, iOS, Flutter, Web, and uni-app platforms. It provides step-by-step API usage instructions to customize user profile information, including handling potential update delays during calls between non-friend users due to privacy settings.
- [Group Calls](https://pre.trtc.io/document/59838.md): TUICallKit SDK provides group call capabilities for Web and H5 platforms, supporting up to 9 participants. This guide explains how to initiate a multiplayer video call and join an existing group call by using the groupCall and join APIs, including sample code snippets for quick integration.
- [Floating Window](https://pre.trtc.io/document/59842.md): The Tencent RTC Web and HTML5 SDK guide explains how to enable and control the Floating Window feature. It is designed for developers implementing Web and H5 applications who need to manage Floating Window and Full Screen modes. The guide covers using the enableFloatWindow API and attribute controls such as allowedMinimized and allowedFullScreen to toggle these features.
- [Custom Ringtones](https://pre.trtc.io/document/59847.md): TUICallKit provides SDK features for Web and H5 platforms to customize incoming call ringtones. This guide explains how to set a local MP3 file as the ringtone using the setCallingBell API and how to enable or disable silent incoming call mode with enableMuteMode. It helps developers control call notification sounds effectively.
- [Configure Resolution and Fill Mode](https://pre.trtc.io/document/59835.md): The TUICallKit Web SDK provides configurable options for video resolution and fill mode to control video display and quality during calls. This guide explains how to set the videoDisplayMode with options CONTAIN, COVER, and FILL to manage aspect ratio and cropping behavior, and how to select videoResolution profiles including 480P, 720P, and 1080P with defined frame rates and bitrates. It also covers platform-specific considerations such as iOS and Firefox limitations. Developers can use these settings to optimize video presentation in web applications.
- [Call State Monitoring](https://pre.trtc.io/document/59852.md): The TUICallKit component SDK provides call status callback capabilities for Web and H5 platforms. It enables developers to monitor call states such as user entry events and implement interaction logic with callbacks like beforeCalling and afterCalling. This guide demonstrates how to integrate and handle these events using JavaScript frameworks including React and Vue, facilitating enhanced call state management in real-time communication applications.
- [Localization](https://pre.trtc.io/document/62424.md): TUICallKit SDK provides multilingual support for Web and H5 platforms, enabling users to switch between Simplified Chinese, English, and Japanese or add new languages through source code integration. This guide is designed for developers using Vue and TypeScript, detailing steps including source code download, project integration, import path modification, error resolution, and creation of new language packs to customize the user interface language.
- [Server-initiated Calls](https://pre.trtc.io/document/71845.md): Tencent RTC provides a server-side SDK and API guide to initiate audio and video calls and input uplink media streams. This quickstart explains how to send HTTPS POST requests to start calls with parameters like SDKAppID, user identifier, and call details. It also covers pushing online media streams into rooms using the stream push API, detailing differences in RoomIdType parameters for server-initiated calls and media input. This guide is intended for developers integrating server-side call control and media streaming capabilities.
- [Multi-Device Login](https://pre.trtc.io/document/78558.md): TUICallKit Audio and Video Call SDK enables multi-device login, allowing users to log in on multiple devices simultaneously with the same UserID. This feature is designed for scenarios where users need seamless call reception across devices such as phones and PCs. To enable multi-device login, developers must integrate TUICallKit and call the enableMultiDeviceAbility API after login. This guide provides step-by-step instructions to activate and use multi-device login, ensuring all devices ring on incoming calls and only one device connects when answered.

### Advanced Features

- [Virtual Background](https://pre.trtc.io/document/60487.md): TUICallKit Video Call SDK offers a virtual background feature that allows users to set blurry or image backgrounds during video calls on PC. This guide explains how to enable and configure the virtual background, including prerequisites like service activation and package purchase, and details steps to activate blurry or image backgrounds to enhance privacy and call experience.
- [AI Noise Suppression](https://pre.trtc.io/document/60481.md): AI Noise Suppression is an advanced noise reduction SDK developed from Tencent Tianlai Laboratory's AI algorithms. It is designed for developers and users seeking to improve audio clarity by intelligently detecting and removing noise interference in transmitted signals. Integrated within TUICallKit, this technology ensures clear and stable sound across diverse environments such as offices, internet cafes, malls, and outdoor settings. Users can experience its effects online through the Tencent RTC Demo, with the feature enabled by default for seamless high-quality noise reduction.
- [Cloud Recording](https://pre.trtc.io/document/51001.md): TUICallKit Call Recording is a cloud-based SDK feature designed for automatic recording of audio and video calls. It supports full-call recording with zero-code integration and automatic lifecycle management, making it ideal for industries requiring call archiving, compliance auditing, and playback. This guide explains how to enable cloud recording globally or for specific calls, including configuration steps and code examples for Android and iOS platforms.

### Client APIs

- [API Reference](https://pre.trtc.io/document/51014.md): TUICallKit and TUICallEngine are Tencent RTC audio and video call SDK components designed for developers to implement real-time communication features. TUICallKit includes UI components for rapid deployment of WhatsApp-like calling scenarios, while TUICallEngine offers a no-UI API set for custom integration. These components provide core capabilities such as call initiation, user info configuration, device management, and event handling to support interactive audio and video communication across platforms.
- [TUICallKit](https://pre.trtc.io/document/51015.md): The TUICallKit API is an audio and video call SDK with a built-in UI interface designed for React and Vue platforms. It enables developers to quickly implement one-to-one or multi-person audio and video call features similar to WeChat. The API offers comprehensive methods for initializing calls, managing call states, customizing UI elements such as ringtones, backgrounds, and layouts, and handling call events including status changes and user ejection.
- [TUICallEngine](https://pre.trtc.io/document/51016.md): TUICallEngine API is a no UI interface SDK for audio and video call components, designed for developers to integrate real-time communication capabilities. It offers core functions including instance management, call control, device handling, and user configuration across platforms. This reference details key APIs such as createInstance, login, call management, device switching, and video quality settings.
- [TUICallEvent](https://pre.trtc.io/document/51017.md): The TUICallEvent API is an event interface for audio and video call components, enabling developers to monitor and respond to call-related events such as user entry, exit, call acceptance, rejection, and network quality changes. It supports capturing errors, device updates, and user voice volume levels, facilitating real-time communication applications on various platforms.

### Solutions

- [WhatsApp Clone](https://pre.trtc.io/document/64301.md): WhatsApp Clone is a cross-platform instant messaging project that replicates WhatsApp's chat and high-quality audio/video call capabilities using Tencent's ChatUIkit and CallKit. Designed for developers targeting iOS, Android, Web, and Flutter, it offers secure, efficient communication with features such as group management, AI-powered noise cancellation, and global deployment compliant with GDPR. This overview introduces its core functionalities and software management tools.

### FAQ

- [General](https://pre.trtc.io/document/53565.md): TUICallKit FAQ provides detailed explanations and solutions for common voice and video call errors such as package subscription issues, invalid UserIDs, inviteID errors, and region restrictions. This guide helps developers and users across iOS, Android, Flutter, Web, and Mini Programs platforms troubleshoot call failures, obtain call room numbers, and manage version compatibility in integrated TUIChat scenarios.
- [Web](https://pre.trtc.io/document/51024.md): Tencent RTC Web SDK FAQ provides answers to frequent problems encountered by developers, including error messages about unsupported packages, UserSig generation methods, groupID and userID creation, and npm installation permission errors. This guide helps users troubleshoot and resolve issues to ensure smooth integration and usage of Tencent RTC Web SDK features.
- [Error Codes](https://pre.trtc.io/document/54901.md): Tencent RTC provides a comprehensive error code reference for audio and video call issues encountered during real-time communication. This guide helps developers identify and resolve common problems related to permissions, device access, SDK versions, signaling failures, and package support across TUICallDefine, Chat SDK, TRTC SDK, and CallKit Server. It is essential for ensuring smooth integration and operation of Tencent Cloud's real-time communication services.