tencent cloud

文档反馈

TUIRoomKit

最后更新时间:2023-11-16 14:20:45

    API 简介

    TUIRoomKit API 是人视频会议组件的含 UI 接口,使用 TUIRoomKit API,您可以通过简单接口快速实现一个类微信的音视频通话场景,如果您想要体验并调试视频会议效果,请阅读 Demo 快速跑通,如果您想把我们的功能直接嵌入到您的项目中,请阅读快速接入(TUIRoomKit)

    API 概览

    在页面中引用 TUIRoomKit 组件。例如:在 App.vue 组件中引入 TUIRoomKit 组件。
    TUIRoomKit 组件将用户分为主持人角色及普通成员角色。组件对外提供了 initcreateRoomenterRoom 方法。
    主持人及普通成员可通过 init 方法向 TUIRoomKit 组件初始化应用及用户数据,主持人可通过 createRoom 方法创建并加入房间,普通成员可通过 enterRoom 方法加入主持人已经创建好的房间。
    <template>
    <room ref="TUIRoomRef"></room>
    </template>
    
    <script setup lang="ts">
    import { ref, onMounted } from 'vue';
    // 引入 TUIRoom 组件,注意确认引入路径是否正确
    import Room from './TUIRoom/index.vue';
    // 获取 TUIRoom 组件元素,用于调用 TUIRoom 组件的方法
    const TUIRoomRef = ref();
    
    onMounted(async () => {
    // 初始化 TUIRoom 组件
    // 主持人在创建房间前需要先初始化 TUIRoom 组件
    // 普通成员在进入房间前需要先初始化 TUIRoom 组件
    await TUIRoomRef.value.init({
    // 获取 sdkAppId 请您参考 步骤一
    sdkAppId: 0,
    // 用户在您业务中的唯一标示 Id
    userId: '',
    // 本地开发调试可在 https://console.tencentcloud.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
    userSig: '',
    // 用户在您业务中使用的昵称
    userName: '',
    // 用户在您业务中使用的头像链接
    avatarUrl: '',
    })
    // 默认执行创建房间,实际接入可按需求择机执行 handleCreateRoom 方法
    await handleCreateRoom();
    })
    
    // 主持人创建房间,该方法只在创建房间时调用
    async function handleCreateRoom() {
    // roomId 为用户进入的房间号, 要求 roomId 类型为 string
    // roomMode 包含'FreeToSpeak'(自由发言模式) 和'SpeakAfterTakingSeat'(上台发言模式) 两种模式,默认为'FreeToSpeak',注意目前仅支持自由发言模式
    // roomParam 指定了用户进入房间的默认行为(是否默认开启麦克风,是否默认开启摄像头,默认媒体设备Id)
    const roomId = '123456';
    const roomMode = 'FreeToSpeak';
    const roomParam = {
    isOpenCamera: true,
    isOpenMicrophone: true,
    }
    try {
    await TUIRoomRef.value.createRoom({ roomId, roomName: roomId, roomMode, roomParam });
    } catch (error: any) {
    alert('TUIRoomKit.createRoom error: ' + error.message);
    }
    }
    
    // 普通成员进入房间,该方法在普通成员进入已创建好的房间时调用
    async function handleEnterRoom() {
    // roomId 为用户进入的房间号, 要求 roomId 类型为 string
    // roomParam 指定了用户进入房间的默认行为(是否默认开启麦克风,是否默认开启摄像头,默认媒体设备Id)
    const roomId = '123456';
    const roomParam = {
    isOpenCamera: true,
    isOpenMicrophone: true,
    }
    try {
    await TUIRoomRef.value.enterRoom({ roomId, roomParam });
    } catch (error: any) {
    alert('TUIRoomKit.enterRoom error: ' + error.message);
    }
    }
    </script>
    
    <style lang="scss">
    html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    }
    
    #app {
    width: 100%;
    height: 100%;
    * {
    box-sizing: border-box;
    }
    }
    </style>

    API 详情

    TUIRoomkit 接口

    init

    初始化 TUIRoomKit 数据,任何使用 TUIRoomKIt 的用户都需要调用 init 方法。
    TUIRoomRef.value.init(roomData);
    参数如下表所示:
    参数
    类型
    含义
    roomData
    object
    
    roomData.sdkAppId
    number
    客户的 SDKAppId
    roomData.userId
    string
    用户的唯一 ID
    roomData.userSig
    string
    用户的 UserSig
    roomData.userName
    string
    用户的昵称
    roomData.avatarUrl
    string
    用户的头像地址

    createRoom

    主持人创建房间。
    TUIRoomRef.value.createRoom(roomId, roomMode, roomParam);
    参数如下表所示:
    参数
    类型
    含义
    roomId
    string
    房间 ID
    roomMode
    string
    房间模式,FreeToSpeak(自由发言模式)和 SpeakAfterTakingSeat(上台发言模式),默认为 FreeToSpeak
    roomParam
    Object
    非必填
    roomParam.isOpenCamera
    string
    非必填,进房是否打开摄像头,默认为关闭
    roomParam.isOpenMicrophone
    string
    非必填,进房是否打开麦克风,默认为关闭
    roomParam.defaultCameraId
    string
    非必填,默认摄像头设备 ID
    roomParam.defaultMicrophoneId
    string
    非必填,默认麦克风设备 ID
    roomParam.defaultSpeakerId
    String
    非必填,默认扬声器设备 ID

    enterRoom

    普通成员加入房间。
    TUIRoomRef.value.enterRoom(roomId, roomParam);
    参数如下表所示:
    参数
    类型
    含义
    roomId
    string
    房间 ID
    roomParam
    Object
    非必填
    roomParam.isOpenCamera
    string
    非必填,进房是否打开摄像头,默认为关闭
    roomParam.isOpenMicrophone
    string
    非必填,进房是否打开麦克风,默认为关闭
    roomParam.defaultCameraId
    string
    非必填,默认摄像头设备 ID
    roomParam.defaultMicrophoneId
    string
    非必填,默认麦克风设备 ID
    roomParam.defaultSpeakerId
    String
    非必填,默认扬声器设备 ID

    TUIRoomkit 事件

    onCreateRoom

    创建房间回调。
    <template>
    <room ref="TUIRoomRef" @on-create-room="onCreateRoom"></room>
    </template>
    
    <script setup lang="ts">
    // 引入 TUIRoom 组件,注意确认引入路径是否正确
    import Room from './TUIRoom/index.vue';
    
    function onCreateRoom(info) {
    if (info.code === 0) {
    console.log('创建房间成功')
    }
    }
    </script>

    onEnterRoom

    进入房间回调。
    <template>
    <room ref="TUIRoomRef" @on-enter-room="onEnterRoom"></room>
    </template>
    
    <script setup lang="ts">
    // 引入 TUIRoom 组件,注意确认引入路径是否正确
    import Room from './TUIRoom/index.vue';
    
    function onEnterRoom(info) {
    if (info.code === 0) {
    console.log('进入房间成功')
    }
    }
    </script>

    onDestroyRoom

    主持人销毁房间的回调。
    <template>
    <room ref="TUIRoomRef" @on-destroy-room="onDestroyRoom"></room>
    </template>
    
    <script setup lang="ts">
    // 引入 TUIRoom 组件,注意确认引入路径是否正确
    import Room from './TUIRoom/index.vue';
    
    function onDestroyRoom(info) {
    if (info.code === 0) {
    console.log('主持人销毁成功')
    }
    }
    </script>

    onExitRoom

    普通成员退出房间的回调。
    <template>
    <room ref="TUIRoomRef" @on-exit-room="onExitRoom"></room>
    </template>
    
    <script setup lang="ts">
    // 引入 TUIRoom 组件,注意确认引入路径是否正确
    import Room from './TUIRoom/index.vue';
    
    function onExitRoom(info) {
    if (info.code === 0) {
    console.log('普通成员退出房间成功')
    }
    }
    </script>

    onKickedOutOfRoom

    普通成员被主持人踢出房间通知。
    <template>
    <room ref="TUIRoomRef" @on-kicked-out-of-room="onKickedOutOfRoom"></room>
    </template>
    
    <script setup lang="ts">
    // 引入 TUIRoom 组件,注意确认引入路径是否正确
    import Room from './TUIRoom/index.vue';
    
    function onKickedOutOfRoom({ roomId, message }) {
    console.log('普通成员被主持人踢出房间', roomId, message);
    }
    </script>

    onKickedOffLine

    用户账号在其他地方登录,被踢下线。
    <template>
    <room ref="TUIRoomRef" @on-kick-off-line="onKickedOffLine"></room>
    </template>
    
    <script setup lang="ts">
    // 引入 TUIRoom 组件,注意确认引入路径是否正确
    import Room from './TUIRoom/index.vue';
    
    function onKickedOffLine({ message }) {
    console.log('成员被踢下线', message)
    }
    </script>

    onUserSigExpired

    用户 userSig 过期,请重新获取 userSig。
    <template>
    <room ref="TUIRoomRef" @on-user-sig-expired="onUserSigExpired"></room>
    </template>
    
    <script setup lang="ts">
    // 引入 TUIRoom 组件,注意确认引入路径是否正确
    import Room from './TUIRoom/index.vue';
    
    function onUserSigExpired() {
    console.log('用户 userSig 过期, 请重新生成 userSig.')
    }
    </script>
    
    联系我们

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

    技术支持

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

    7x24 电话支持