tencent cloud

PrevNext

文档反馈

请输入关键字

Recent Pages

文档
实时音视频
    文档
    Download PDF

    TUIRoomKit

    最后更新时间：2024-04-29 17:21:12
    下载PDF

      API 简介

      TUIRoomKit API 是多人会议组件的含 UI 接口，使用 TUIRoomKit API，您可以通过简单接口快速实现一个类会议场景，更详细的接入步骤，详见：快速接入 TUIRoomKit。

      API 概览

      <ConferenceMainView />: TUIRoomkit UI 组件主体。
      Conference：依赖ConferenceMainView 提供的 API。
      API
      描述
      获取 roomEngine 实例。如果 roomEngine 不存在，则返回 null。
      on
      监听指定类型的事件。当事件发生时，将调用回调函数。
      off
      取消监听指定类型的事件。
      login
      登录会议系统。
      logout
      登出会议系统。
      start
      开始一个新的会议。
      join
      加入一个已经存在的会议。
      leave
      离开当前会议。
      dismiss
      解散当前会议。
      设置自己的用户信息。
      设置界面语言。
      setTheme
      设置界面主题。
      禁用应用程序中的文本消息功能。调用此函数后，用户将无法发送或接收文本消息。
      禁用应用程序中的屏幕共享功能。调用此函数后，用户将无法与他人共享屏幕。
      隐藏应用程序中的特定功能按钮。调用此函数并传入适当的 FeatureButton 枚举值后，相应的按钮将从用户界面中隐藏。

      ConferenceMainView 属性介绍

      属性概览

      属性
      描述
      类型
      是否必填
      默认值
      displayMode
      组件显示模式控制
      permanent：常驻模式。组件始终显示，内部不控制组件的显示与隐藏，若业务端不进行控制，则组件一直保持显示状态。
      wake-up：唤醒模式。组件需通过调用 conference start/join接口并正式加入会议后才被激活，之前不会显示。
      'permanent' | 'wake-up'
      否
      permanent

      示例代码

      Vue3
      Vue2
      <template>
        <ConferenceMainView display-mode="permanent"></ConferenceMainView>
      </template>
      <script setup>
      import { ConferenceMainView, conference } from '@tencentcloud/roomkit-web-vue3';
      const init = async () => {
          await conference.login({    
            // 获取 sdkAppId 可参考文档开通服务部分，https://write.woa.com/document/139678220708134912#d9d2b8d1-f19f-441b-a436-457748c94997
            sdkAppId: 0,
            // 用户在您业务中的唯一标示 Id
            userId: '',
            // 本地开发调试可在 https://console.tencentcloud.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
            userSig: '', 
          });
          await conference.start('123456', {
            isSeatEnable: false,
            isOpenCamera: true,
            isOpenMicrophone: true,
          });
      }
      init();
      </script>
      <template>
        <ConferenceMainView display-mode="permanent"></ConferenceMainView>
      </template>
      <script>
      import { ConferenceMainView, conference } from '@tencentcloud/roomkit-web-vue2.7';
      export default {
        components: {
          ConferenceMainView,
        },
        async created() {
          await conference.login({
            // 获取 sdkAppId 可参考文档开通服务部分，https://write.woa.com/document/139678220708134912#d9d2b8d1-f19f-441b-a436-457748c94997
            sdkAppId: 0,
            // 用户在您业务中的唯一标示 Id
            userId: '',
            // 本地开发调试可在 https://console.tencentcloud.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
            userSig: '',
          });
          await conference.start('123456', {
            isSeatEnable: false,
            isOpenCamera: true,
            isOpenMicrophone: true,
          });
        },
      };
      </script>

      Conference API 详情

      Conference 提供了一系列用于管理和控制在线会议功能的方法。通过实现这个接口，开发者可以方便地在他们的应用中集成在线会议的功能。

      getRoomEngine

      获取 roomEngine 实例。如果 roomEngine 不存在，则返回 null。
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      const roomEngine = conference.getRoomEngine();
      Returns：TUIRoomEngine | null

      on

      监听指定类型的事件。当事件发生时，将调用回调函数。
      参数：
      参数
      类型
      默认值
      含义
      eventType
      RoomEvent
      -
      要监听的事件类型
      callback
      () => void
      -
      事件发生时调用的回调函数
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference, RoomEvent } from '@tencentcloud/roomkit-web-vue3';
      conference.on(RoomEvent.RoomStart, () => {
        console.log('[conference] The meeting has already started.')
      });
      conference.on(RoomEvent.ROOM_DISMISS, () => {
        console.log('[conference] The meeting has been dismissed')
      });
      Returns：void

      off

      取消监听指定类型的事件。
      参数：
      参数
      类型
      默认值
      含义
      eventType
      RoomEvent
      -
      要取消监听的事件类型
      callback
      () => void
      -
      之前添加的回调函数
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.off('event', callback);
      Returns：void

      login

      登录会议系统。
      参数：
      参数
      类型
      默认值
      含义
      params
      {sdkAppId: number; userId: string; userSig: string; tim?: ChatSDK}
      -
      登录参数对象
      sdkAppId
      number
      -
      在 实时音视频控制台 单击应用管理 > 创建应用，创建新应用之后，即可在应用信息中获取 sdkAppId 信息。
      userId
      string
      -
      用户ID建议限制长度为32字节，只允许包含大小写英文字母(a-zA-Z)、数字(0-9)及下划线和连词符。
      userSig
      string
      -
      userSig 签名 计算 userSig 的方式请参考 UserSig 相关。
      tim
      ChatSDK (可选)
      -
      若您在接入 roomEngine 的同时想使用即时通信 SDK 的更多能力，您可以将创建的 tim 实例传入 TUIRoomEngine。tim 实例的创建方式请参考 TIM.create 。
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.login({
        sdkAppId: 123456,
        userId: 'testUser',
        userSig: 'testSig'
      });
      Returns：Promise<void>

      logout

      登出会议系统。
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.logout();
      Returns：Promise<void>

      start

      开始一个新的会议。
      参数：
      参数
      类型
      默认值
      含义
      roomId
      string
      -
      会议房间 ID
      params
      -
      开始会议的参数
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.start('123456', {
        roomName: 'TestRoom',
        isSeatEnabled: false,
        isOpenCamera: false,
        isOpenMicrophone: false,
      });
      Returns：Promise<void>

      join

      加入一个已经存在的会议。
      参数：
      参数
      类型
      默认值
      含义
      roomId
      string
      -
      会议房间 ID
      params
      -
      加入会议的参数
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.join('123456', {
        isOpenCamera: false,
        isOpenMicrophone: false,
      });
      Returns：Promise<void>

      leave

      离开当前会议。
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.leave();
      Returns：Promise<void>

      dismiss

      解散当前会议。
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.dismiss();
      Returns：Promise<void>

      setSelfInfo

      设置自己的用户信息。
      参数：
      参数
      类型
      默认值
      含义
      options
      {userName: string; avatarUrl: string}
      -
      用户信息对象
      userName
      string（可选）
      -
      用户昵称
      avatarUrl
      string（可选）
      -
      用户头像
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.setSelfInfo({
        userName: 'test-name',
        avatarUlr: 'https://avatar.png'
      });
      Returns：Promise<void>

      setLanguage

      设置界面语言。
      参数：
      参数
      类型
      默认值
      含义
      language
      'zh-CN' | 'en-US'
      -
      语言类型
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.setLanguage('en-US');
      Returns：void

      setTheme

      设置界面主题。
      参数：
      参数
      类型
      默认值
      含义
      theme
      'LIGHT' | 'DARK'
      -
      主题类型
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.setTheme('DARK');
      Returns：void

      disableTextMessaging

      禁用应用程序中的文本消息功能。调用此函数后，用户将无法发送或接收文本消息。
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.disableTextMessaging();
      Returns：void

      disableScreenSharing

      禁用应用程序中的屏幕共享功能。调用此函数后，用户将无法与他人共享屏幕。
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.disableScreenSharing();
      Returns：void

      hideFeatureButton

      隐藏应用程序中的特定功能按钮。调用此函数并传入适当的 FeatureButton 枚举值后，相应的按钮将从用户界面中隐藏。
      参数：
      参数
      类型
      默认值
      含义
      name
      -
      需要隐藏的按钮名称
      // 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
      import { conference, FeatureButton } from '@tencentcloud/roomkit-web-vue3';
      conference.hideFeatureButton(FeatureButton.SwitchTheme);
      Returns：void

      类型定义

      RoomEvent（枚举值）

      参数
      类型
      描述
      ROOM_START
      string
      创建会议
      ROOM_JOIN
      string
      加入会议
      ROOM_LEAVE
      string
      离开会议
      ROOM_DISMISS
      string
      会议解散
      KICKED_OFFLINE
      string
      用户被踢下线
      KICKED_OUT
      string
      用户被踢出会议
      USER_LOGOUT
      string
      用户登出
      ROOM_ERROR
      string
      会议错误

      FeatureButton（枚举值）

      参数
      类型
      描述
      SwitchTheme
      string
      切换主题功能按钮
      SwitchLayout
      string
      切换布局功能按钮
      SwitchLanguage
      string
      切换语言功能按钮
      FullScreen
      string
      全屏功能按钮
      Invitation
      string
      邀请功能按钮

      StartParams

      参数
      类型
      描述
      默认值
      roomName
      string（可选）
      房间名称
      -
      isSeatEnabled
      boolean（可选）
      是否启用席位
      false
      isOpenCamera
      boolean（可选）
      是否开启摄像头
      false
      isOpenMicrophone
      boolean（可选）
      是否开启麦克风
      false
      defaultCameraId
      string（可选）
      默认摄像头 ID
      -
      defaultMicrophoneId
      string（可选）
      默认麦克风 ID
      -
      defaultSpeakerId
      string（可选）
      默认扬声器 ID
      -

      JoinParams

      参数
      类型
      描述
      默认值
      isOpenCamera
      boolean（可选）
      是否开启摄像头
      false
      isOpenMicrophone
      boolean（可选）
      是否开启麦克风
      false
      defaultCameraId
      string（可选）
      默认摄像头 ID
      -
      defaultMicrophoneId
      string（可选）
      默认麦克风 ID
      -
      defaultSpeakerId
      string（可选）
      默认扬声器 ID
      -
      
      联系我们

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

      联系我们
      技术支持

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

      提交工单
      7x24 电话支持
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      隐私条款服务条款缓存条款