Call
  • Web
    • Overview
      • Product Introduction
      • Activate the Service
      • 価格
        • 無料時間
        • オーディオ・ビデオ通話 Call の月額パッケージ
        • サブスクリプションパッケージ期間の課金説明
    • Get Started
      • Run Sample Code
      • Integration (React)
      • Integration (Vue3)
      • Secure authentication with userSig
    • Basic Features
      • UI Customization
      • Configuring Nickname and Avatar
      • GroupCall
      • フローティングウィンドウ
      • 着信音のカスタマイズ
      • 解像度とフィルモードの設定
      • 通話状態のモニタリング
    • Advanced Features
      • 仮想背景
      • AI ノイズ低減
      • クラウドレコーディング
    • インターフェースドキュメンテーション
      • UIKit APIs
        • API Overview
        • TUICallKit
      • Engine APIs
        • TUICallEngine
        • TUICallEvent
    • サーバー API
      • 通話状態のコールバック
        • 通話状態のコールバック
        • 通話イベントコールバック
        • コールバック設定
          • コールバック設定インターフェースリスト
          • コールバック設定の作成
          • コールバック設定の照会
          • コールバック設定の更新
          • コールバック設定の削除
      • REST インターフェース
        • REST インターフェースの紹介
        • callId によりレコードを取得
        • 条件によりレコードを取得
    • FAQs
      • All Platfroms
      • Web
      • ErrorCode
      • リリース説明
  • Android
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Demo のクイックスタート
      • インテグレーション
      • Secure authentication with userSig
    • Basic Features
      • UI のカスタマイズ
      • オフライン通話プッシュ
      • Configuring Nicknames and Avatars
      • グループ通話
      • フローティングウィンドウ
      • 着信音のカスタマイズ
      • 通話状態のモニタリング
    • その他の機能
      • 仮想背景
      • AI ノイズ低減
      • クラウドレコーディング
    • インターフェースドキュメンテーション
      • UIKit APIs
        • インターフェースの概要
        • TUICallKit
        • TUICallObserver
        • タイプ定義
      • Engine APIs
        • TUICallEngine
    • サーバー API
      • 通話状態のコールバック
        • 通話状態のコールバック
        • 通話イベントコールバック
        • コールバック設定
          • コールバック設定インターフェースリスト
          • コールバック設定の作成
          • コールバック設定の照会
          • コールバック設定の更新
          • コールバック設定の削除
      • REST インターフェース
        • REST インターフェースの紹介
        • callId によりレコードを取得
        • 条件によりレコードを取得
    • FAQs
      • All Platforms
      • Android
      • ErrorCode
      • リリース説明
  • iOS
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Demo のクイックスタート
      • インテグレーション
      • Secure authentication with userSig
    • Basic Features
      • UI のカスタマイズ
      • オフライン通話プッシュ
        • VoIP
        • APN
      • ニックネームとプロファイルフォトの設定
      • グループ通話
      • フローティングウィンドウ
      • 着信音のカスタマイズ
      • 通話状態のモニタリング
    • その他の機能
      • 仮想背景
      • AI ノイズ低減
      • クラウドレコーディング
    • インターフェースドキュメンテーション
      • UIKit APIs
        • インターフェースの概要
        • TUICallKit
        • TUICallObserver
        • タイプ定義
      • Engine APIs
        • TUICallEngine
    • サーバー API
      • 通話状態のコールバック
        • 通話状態のコールバック
        • 通話イベントコールバック
        • コールバック設定
          • コールバック設定インターフェースリスト
          • コールバック設定の作成
          • コールバック設定の照会
          • コールバック設定の更新
          • コールバック設定の削除
      • REST インターフェース
        • REST インターフェースの紹介
        • callId によりレコードを取得
        • 条件によりレコードを取得
    • FQAs
      • All Platform
      • iOS
      • ErrorCode
      • リリース説明
  • Flutter
    • Overview
      • Overview
      • サービスをアクティブ化します
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Demo のクイックスタート
      • インテグレーション
      • Secure authentication with userSig
    • Basic Features
      • UI のカスタマイズ
      • オフライン通話プッシュ
        • 通知
        • VoIP(オプション)
      • ニックネームとプロファイルフォトの設定
      • グループ通話
      • フローティングウィンドウ
      • 着信音のカスタマイズ
      • 通話状態のモニタリング
    • その他の機能
      • 仮想背景
      • AI ノイズ低減
      • クラウドレコーディング
      • 美顔エフェクト
    • インターフェースドキュメンテーション
      • インターフェースの概要
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • タイプ定義
    • サーバー API
      • 通話状態のコールバック
        • 通話状態のコールバック
        • 通話イベントコールバック
        • コールバック設定
          • コールバック設定インターフェースリスト
          • コールバック設定の作成
          • コールバック設定の照会
          • コールバック設定の更新
          • コールバック設定の削除
      • REST インターフェース
        • REST インターフェースの紹介
        • callId によりレコードを取得
        • 条件によりレコードを取得
    • FQAs
      • All Platform
      • Flutter
      • ErrorCode
      • アップグレード
      • リリース説明
Call
このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。

GroupCall

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}`);
}