即时通信 IM Web&H5&小程序-视频通话（含 UI）-文档中心-腾讯云

本文介绍群组通话功能的使用，如发起群组通话、加入群组通话。
预期效果
TUICallKit 支持群组通话，预期效果见下图。
Web 端
移动端
﻿
﻿
﻿
﻿
﻿
﻿
创建 groupID
使用群组通话功能前，需要先创建群组，在已存在的群组中发起群组通话。
方式一：通过调用 IM API 创建群，详细可参见 IM 群组管理。
方式二：通过控制台手动创建群组，详细可参见 控制台群组管理。
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;
}
群组通话
发起群组通话
调用 groupCall API 发起群通话。
import { TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";
// 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}`);
}
加入群组通话
针对中途加入功能，CallKit 提供两种方式：
方式一：使用 <JoinGroupCard /> 组件，该组件内部已经封装实现了中途加入的功能，只需要集成组件便可以体验。(推荐)
方式二：使用 joinInGroupCall API 接口，自己实现中途加入功能，对应的 UI 需要用户自己实现。
方式一：使用 <JoinGroupCard /> UI 组件
说明：
v3.1.2+ 支持。
组件效果图
PC
Mobile
﻿
﻿
﻿
﻿
﻿
﻿
集成 <JoinGroupCard /> 组件
PC
Mobile(H5、weChat)
在 TUIKit/components/TUIChat/chat-header/index.vue 文件引入组件中途加入组件。
// step1. import component
import { JoinGroupCard } from '@tencentcloud/call-uikit-vue'; // Replace it with you are using npm package
﻿
// step2. use component
<div>
  <JoinGroupCard v-if="isPC" />
</div>
﻿
在 TUIKit/components/TUIChat/message-list/index.vue 文件引入中途加入组件。
// step1. import component
import { JoinGroupCard } from '@tencentcloud/call-uikit-vue'; // Replace it with you are using npm package
﻿
// step2. use component
<JoinGroupCard v-if="!isPC" />
﻿
方式二：调用 API 接口
调用 joinInGroupCall API 主动加入群组中已有的音视频通话。
说明：
Vue&WeChat ≥ v3.1.2 支持。
import { TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";
// 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}`);
}
﻿
Web&H5&小程序

本页目录：

预期效果

创建 groupID

群组通话

发起群组通话

加入群组通话

方式一：使用 <JoinGroupCard /> UI 组件

方式二：调用 API 接口
