please select
Call
  • Overview
  • Web
    • Run Sample Code
    • 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 Code
    • 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 Code
    • 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 Code
    • 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

Group Call

This article introduces the use of the group call feature, such as initiating a group call and joining a group call.

Expected outcome

TUICallKit supports group calls. The expected outcome is shown in the figure below.
Web
Mobile Client







Create groupID

Before using the group call feature, you need to create a group first and initiate a group call in an existing group.
Method one: Create a group by calling the Chat API, see Chat Group Management for details.
Method two: Manually create a group through the console, see Console group management for details.
import Chat from "@tencentcloud/chat"; // npm i @tencentcloud/chat

const userIDList: string[] = ['user1', 'user2'];
async function createGroupID() {
const chat = Chat.create({ SDKAppID });
const memberList: any[] = userIDList.map(userId => ({ userID: userId }));
const res = await chat.createGroup({
type: Chat.TYPES.GRP_PUBLIC, // Must be a public group
name: 'WebSDK',
memberList
});
return res.data.group.groupID;
}

Group call

Initiate a group call

Initiate a group call by calling the groupCall API.
import { TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-react";
// Replace it with the call-uikit npm package you are currently using

try {
const params = {
userIDList: ['user1', 'user2'],
groupID: 'xxx',
type: TUICallType.VIDEO_CALL,
}
await TUICallKitServer.groupCall(params);
} catch (error: any) {
console.error(`[TUICallKit] groupCall failed. Reason:${error}`);
}

Join a group call

Join an existing audio and video call in the group by calling the joinInGroupCall API.
Note:
v3.1.2+ is supported.
import { TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-react";
// Replace it with the call-uikit npm package you are currently using

try {
const params = {
type: TUICallType.VIDEO_CALL,
groupID: "xxx",
roomID: 0,
};
await TUICallKitServer.joinInGroupCall(params);
} catch (error: any) {
console.error(`[TUICallKit] joinInGroupCall failed. Reason: ${error}`);
}