本文介绍群组通话功能的使用,如发起群组通话、加入群组通话。
预期效果
TUICallKit 支持群组通话,预期效果见下图。
Web 端 | 移动端 |
| |
创建 groupID
使用群组通话功能前,需要先创建群组,在已存在的群组中发起群组通话。
方式二:通过控制台手动创建群组,详细可参见 控制台群组管理。
import TIM from "@tencentcloud/chat"; // npm i @tencentcloud/chatconst 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 groupname: '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 usingtry {const params = {userIDList: ['user1', 'user2'],groupID: 'xxx',type: TUICallType.VIDEO_CALL,}await TUICallKitServer.groupCall(params);} catch (error: any) {alert(`[TUICallKit] groupCall failed. Reason:${error}`);}
import { TUICallKitServer, CallMediaType } from "@tencentcloud/call-uikit-wechat";try {const params = {userIDList: ['user1', 'user2'],groupID: 'xxx',type: CallMediaType.VIDEO,}await TUICallKitServer.groupCall(params);} catch (error: any) {alert(`[TUICallKit] groupCall failed. Reason:${error}`);}
加入群组通话
针对中途加入功能,CallKit 提供两种方式:
方式一:使用
<JoinGroupCard />
组件,该组件内部已经封装实现了中途加入的功能,只需要集成组件便可以体验。(推荐)方式二:使用
joinInGroupCall API
接口,自己实现中途加入功能,对应的 UI 需要用户自己实现。方式一:使用 <JoinGroupCard /> UI 组件
说明:
call-uikit: v3.1.2+ 支持。
chat-uikit: v2.1.3+ 支持。
组件效果图
PC | Mobile |
| |
集成 <JoinGroupCard /> 组件
在
TUIKit/components/TUIChat/chat-header/index.vue
文件引入组件中途加入组件。// step1. import componentimport { 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 componentimport { 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 usingtry {const params = {type: TUICallType.VIDEO_CALL,groupID: "xxx",roomID: 0,};await TUICallKitServer.joinInGroupCall(params);} catch (error: any) {alert(`[TUICallKit] joinInGroupCall failed. Reason: ${error}`);}
import { TUICallKitServer, CallMediaType } from "@tencentcloud/call-uikit-wechat";try {const params = {type: CallMediaType.VIDEO,groupID: "xxx",roomID: 0,};await TUICallKitServer.joinInGroupCall(params);} catch (error: any) {alert(`[TUICallKit] joinInGroupCall failed. Reason: ${error}`);}