tencent cloud

文档反馈

Web(H5)

最后更新时间:2024-12-30 16:41:01

    功能介绍

    TUIRoomKit 推出了预定房间新特性,用户可预定一个房间,安排一场日程中的会议。
    说明:
    TUIRoomKit 自 v2.6.0 版本 Web(H5)&小程序支持预定房间、查看房间列表、修改房间信息等能力,集成最新版本 TUIRoomKit 可体验预定房间流程。
    会议列表
    预定会议参数
    邀请会议成员
    会议详情
    
    
    
    
    
    
    
    
    
    
    
    

    准备条件

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

    预定房间示例跑通

    说明:
    您需要引入 PreConferenceView(会前预览组件)ConferenceMainView(TUIRoomkit UI 组件主体),示例中采用 v-showv-else 指令来控制两个组件的展示与隐藏,您也可以采用路由跳转的方式进行组件之间的切换。(注意: 小程序进房需要确保 ConferenceMainView 存在,因此此处不能使用 v-if)
    PreConferenceView 组件中,通过设置 enable-scheduled-conference 属性的值,控制预定房间特性的展示或隐藏。另外,组件监听了 on-enter-room 事件,当用户点击进入房间时,触发 handleEnterRoom 方法即可调用 join 接口。
    ConferenceMainView 组件中,监听了 on-destroy-room 事件,当房间被销毁时,触发 onDestroyRoom 方法。
    Web-H5
    <template>
    <PreConferenceView
    v-show="isShowPreConferenceView"
    :enable-scheduled-conference="true"
    @on-enter-room="handleEnterRoom"
    />
    <ConferenceMainView
    v-show="!isShowPreConferenceView"
    display-mode="permanent"
    @on-destroy-room="onDestroyRoom"
    />
    </template>
    
    <script setup lang="ts">
    import { ref } from 'vue';
    import { PreConferenceView, conference, ConferenceMainView } from '@tencentcloud/roomkit-web-vue3';
    const isShowPreConferenceView = ref(true);
    const init = async () => {
    conference.login({
    sdkAppId: 0, // Replace with your sdkAppId
    userId: '', // Replace with your userId
    userSig: '', // Replace with your 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 关系链中的好友关系即可,具体可参见删除好友。
    会前预览页
    填写预定会议参数
    邀请会议成员
    预定成功
    
    
    
    
    
    
    
    
    
    
    
    

    查看会议详情与修改会议信息

    会议列表提供以下功能:
    查看会议列表:列表中包括您创建的会议以及您被邀请参加的会议。
    查看会议详情:您可以点击某个会议查看该会议的详情。
    修改会议信息:点击会议列表某个会议,若该会议未进行,且您是发起人,您可以修改该会议信息。
    会议列表
    会议详情
    修改会议信息
    
    
    
    
    
    
    
    
    

    邀请进入房间

    用户可通过单击邀请成员弹出会议信息邀请框,通过单击复制会议号,将预定房间信息复制到粘贴板分享给其他用户。
    会议详情
    邀请成员
    
    
    
    
    
    

    注意事项

    预定房间开始时间不能早于当前时间,但没有提前预定的天数限制。
    若同时预定不同日期/时间的房间,请分次选择时间后提交。
    房间预定成功后,房间号将从预定开始时间起,若房间没有用户,那么房间保留6小时,在此期间您都可以随时回到该房间。
    预定房间成功后,即可获取房间号和预定信息。

    交流与反馈

    如果您有任何需求或反馈,请联系:info_rtc@tencent.com。
    
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持