Web&Electron

最近更新时间:2024-10-08 16:28:41

我的收藏

功能介绍

TUIRoomKit 支持会中呼叫功能。用户在会议进行过程中,可以随时呼叫其他用户加入当前会议,无需提前预定或安排。通过会中呼叫功能,用户可以灵活地邀请或提醒相关人员参与会议,提升会议的互动性和效率。本文将详细介绍该特性的相关功能,并说明如何在 TUIRoomKit 组件中使用这一特性。
呼叫端
被呼叫端







准备条件

在使用腾讯云提供的会中呼叫特性前,您需要前往控制台,为应用开通多人会议服务。具体步骤请参见 开通服务。接着,您需要引入 TUIRoomKit 组件,具体可参见 快速跑通

会中呼叫示例跑通

如果您已经集成了 预定会议 能力,则可跳过该步骤。
说明:
您需要引入 PreConferenceView(会前预览组件)ConferenceMainView(TUIRoomkit UI 组件主体),示例中采用 v-ifv-else 指令来控制两个组件的展示与隐藏,您也可以采用路由跳转的方式进行组件之间的切换。
PreConferenceView 组件中,有着收到呼叫弹窗的展示和隐藏逻辑。
详请见 预定会议 能力
Web
Electron
<template>
<PreConferenceView
v-if="isShowPreConferenceView"
:enable-scheduled-conference="true" // 设置是否开启预定房间特性展示
@on-enter-room="handleEnterRoom"
></PreConferenceView>
<ConferenceMainView
v-else
display-mode="permanent"
@on-destroy-room="onDestroyRoom"
></ConferenceMainView>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { PreConferenceView, conference, ConferenceMainView } from '@tencentcloud/roomkit-web-vue3';

const isShowPreConferenceView = ref(true);
const init = async () => {
conference.login({
// 获取 sdkAppId 可参考文档开通服务部分,https://cloud.tencent.com/document/product/647/104842
sdkAppId: 0,
// 用户在您业务中的唯一标示 Id
userId: '',
// 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
userSig: '',
});
}
init();

async function handleEnterRoom(roomOption: Record<string, any>) {
const { roomId } = roomOption;
await conference.join(roomId, {
isOpenCamera: false,
isOpenMicrophone: false,
});
isShowPreConferenceView.value = false;
}

function onDestroyRoom() {
isShowPreConferenceView.value = true;
init();
}
</script>
<template>
<PreConferenceView
v-if="isShowPreConferenceView"
:enable-scheduled-conference="true" // 设置是否开启预定房间特性展示
@on-enter-room="handleEnterRoom"
></PreConferenceView>
<ConferenceMainView
v-else
display-mode="permanent"
@on-destroy-room="onDestroyRoom"
></ConferenceMainView>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-electron-vue2.7
import { PreConferenceView, conference, ConferenceMainView } from '@tencentcloud/roomkit-electron-vue3';

const isShowPreConferenceView = ref(true);
const init = async () => {
conference.login({
// 获取 sdkAppId 可参考文档开通服务部分,https://cloud.tencent.com/document/product/647/104842
sdkAppId: 0,
// 用户在您业务中的唯一标示 Id
userId: '',
// 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
userSig: '',
});
}
init();

async function handleEnterRoom(roomOption: Record<string, any>) {
const { roomId } = roomOption;
await conference.join(roomId, {
isOpenCamera: false,
isOpenMicrophone: false,
});
isShowPreConferenceView.value = false;
}

function onDestroyRoom() {
isShowPreConferenceView.value = true;
init();
}
</script>

呼叫用户

当您在会议中时,您可以通过如下两种方式对未进房的用户进行呼叫:

方式一:呼叫成员列表中的未进入用户

在房间的成员列表中,您会看到一个名为未进入的标题栏。点击未进入,会显示所有当前未进入会议的成员,您可以对这些尚未进入会议的成员进行呼叫。
未进入的列表中包含两类用户:
当前会议在预定时邀请且未进入的成员。
已对其进行呼叫但仍未入会的成员。




方式二:呼叫通讯录中的用户

通过点击底部栏中的邀请 > 添加成员,您可以唤起您自己的通讯录界面,并对其中您所选定的成员进行呼叫。
注意:
TUIRoomKit 的邀请成员列表的成员信息来自于 IM 好友关系 ,需要使用 IM 完成好友关系的添加。您可以通过添加 IM 好友关系的方式来完成用户数据的替换。此时您需要通过 IM REST API 采用添加好友关系的方式得到 IM 好友关系链的数据。若您进行参会成员通讯录的数据导入或添加用户,可参见 添加好友。若您需要移除参会成员,即删除 IM 关系链中的好友关系即可,具体可参见 删除好友

收到呼叫

当您在应用内收到呼叫时,会弹出如下图所示的通知,您可以选择加入房间,或暂不进入



说明:
当用户已在会议中正在被呼叫时,该用户会自动拒绝所有呼叫。