이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.

Web&H5

This document describes how to use the group call feature, such as initiating a group call and joining a group call.

Expected outcome

TUICallKit supports group calls. See the expected outcome in the image 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 1: Create a group by calling the IM API, see IM Group Management for details.
Method 2: Manually create a group through the console. See Console group management.
import TIM from "@tencentcloud/chat"; // npm i @tencentcloud/chat

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

Group Call

Initiate a Group Call

Call the groupCall API to initiate a group call.
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) {
alert(`[TUICallKit] groupCall failed. Reason:${error}`);
}

Join a Group Call

Call the joinInGroupCall API to actively join an existing audio or video call in the group.
Note:Vue v3.1.2 or later versions are 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) {
alert(`[TUICallKit] joinInGroupCall failed. Reason: ${error}`);
}