Conference
  • 产品概述
  • Web
    • 跑通 Demo
    • 集成
    • UI 定制
    • Conference Control
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 虚拟背景
    • 更多功能
      • 悬浮窗
      • 文字水印
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomEvents
        • TUIRoomEngine 定义
    • 常见问题
  • iOS
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • Android
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • Electron
    • 跑通 Demo
    • 集成
    • UI 定制
    • Conference Control
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
      • 文字水印
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEvent
        • TUIRoomEngine
        • TUIRoomEngine 定义
    • 常见问题
  • Flutter
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • In-Conference Chat
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • 产品概述
    • 产品概述
  • 开通服务
  • 价格中心
    • 免费时长
    • TRTC 多人音视频 Conference 包月套餐
    • 订阅套餐时长计费说明
    • 现收现付
      • 音视频时长计费说明
      • 云端录制计费说明
      • 混流转码与旁路转推计费说明
  • 服务器 API
    • REST 接口
      • RESTful 接口概述
      • RESTful 接口列表
      • Room Management
        • Create a Room
        • Destroy a Room
        • Update the Room Information
        • Get the Room Information
      • 用户管理
        • Get the Room Member List
        • Update the Room Member Information
        • Change the Room Ownership
        • Mark Room Members
        • Ban Room Members
        • Unban Room Members
        • Get the Banned Room Member List
        • Remove Room Member
      • Seat Management
        • Get the Seat List
        • Pick User on the Seat
        • Kick User off the Seat
        • Lock the Seat
    • Third-Party Callback
      • Callback Overview
      • Callback Command List
      • Callback Configuration
        • Query Callback Configuration
        • Create Callback Configuration
        • Update Callback Configuration
        • Delete Callback Configuration
      • Room Related
        • After a Room Is Created
        • After a Room Is Destroyed
        • After the Room Information Is Updated
      • User Related
        • After a Room Is Entered
        • After a Room Is Left
      • Seat Connection Related
        • After the Seat List Is Changed
  • 错误码
Conference

集成

TUIRoomKit 是腾讯云推出的多人音视频 UI 组件。组件提供房间管理,音视频控制,屏幕共享,成员管理,麦位管理,即时聊天,自定义布局切换等丰富的功能交互,同时支持中英文切换,一键换肤等能力。
本文介绍 TUIRoomKit (Electron) 的接入指引,助力您快速上线企业会议、在线教育、医疗问诊、在线巡视、远程定损等业务场景。





TUIRoomKit Demo 体验

您可以单击 Mac OS版Windows版 下载体验 TUIRoomKit Electron 更多功能。 您可以单击 Github 下载 TUIRoomKit 代码,并参考代码仓库 README.md 文档跑通 TUIRoomKit Electron 示例工程。

环境准备

Node.js 版本:Node.js ≥ 16.19.1(推荐使用官方 LTS 版本,npm 版本请与 node 版本匹配)。
npm 包集成
Vue3 开发环境,集成 @tencentcloud/room-electron-vue3 NPM 包。
Vue2.7 开发环境:集成 @tencentcloud/roomkit-electron-vue2.7 NPM 包。
源码集成
Vue3 + TypeScript 开发环境:从 @tencentcloud/room-electron-vue3 NPM 包拷贝源码。
Vue2.7 + TypeScript 开发环境:从 @tencentcloud/roomkit-electron-vue2.7 NPM 包拷贝源码。

集成 TUIRoomKit 组件

如果您没有 Vue 项目,可以前往 Github 下载 TUIRoomKit 代码,并参考代码仓库 README.md 文档跑通 TUIRoomKit Electron 示例工程。
如果需要在已有项目中集成,请按照以下步骤进行接入。

步骤一:安装依赖

Vue3
Vue2
npm install @tencentcloud/roomkit-electron-vue3 pinia --save
# 注意此处要求 vue版本 >= 2.7.16,如安装失败请检查您的 vue 版本是否支持
npm install @tencentcloud/roomkit-electron-vue2.7 pinia

步骤二:项目工程配置

注册pinia:TUIRoom 使用 Pinia 进行房间数据管理,您需要在项目入口文件中注册 Pinia。项目入口文件为 src/main.ts 文件。
Vue3
Vue2
// src/main.ts 文件
import { createPinia } from 'pinia';

const app = createApp(App);
// 注册 pinia
app.use(createPinia());
app.mount('#app')
// src/main.ts 文件
import { createPinia, PiniaVuePlugin } from 'pinia';

Vue.use(PiniaVuePlugin);
const pinia = createPinia();

new Vue({
pinia,
render: h => h(App),
}).$mount('#app');
配置 vite.config.ts:为了统一代码风格并在 UI 层通过 import 方式引入 trtc-electron-sdk(否则必须通过 require 方式引入),您需要在 packages/renderer/vite.config.ts 中进行配置。请参照以下配置项替换 resolve 中的内容,具体可参考文件 packages/renderer/vite.config.ts
// vite.config.ts
export default defineConfig({
// ...
plugins: [
resolve({
'trtc-electron-sdk': `
const TRTCCloud = require("trtc-electron-sdk");
const TRTCParams = TRTCCloud.TRTCParams;
const TRTCAppScene = TRTCCloud.TRTCAppScene;
const TRTCVideoStreamType = TRTCCloud.TRTCVideoStreamType;
const TRTCScreenCaptureSourceType = TRTCCloud.TRTCScreenCaptureSourceType;
const TRTCVideoEncParam = TRTCCloud.TRTCVideoEncParam;
const Rect = TRTCCloud.Rect;
const TRTCAudioQuality = TRTCCloud.TRTCAudioQuality;
const TRTCScreenCaptureSourceInfo = TRTCCloud.TRTCScreenCaptureSourceInfo;
const TRTCDeviceInfo = TRTCCloud.TRTCDeviceInfo;
const TRTCVideoQosPreference = TRTCCloud.TRTCVideoQosPreference;
const TRTCQualityInfo = TRTCCloud.TRTCQualityInfo;
const TRTCQuality = TRTCCloud.TRTCQuality;
const TRTCStatistics = TRTCCloud.TRTCStatistics;
const TRTCVolumeInfo = TRTCCloud.TRTCVolumeInfo;
const TRTCDeviceType = TRTCCloud.TRTCDeviceType;
const TRTCDeviceState = TRTCCloud.TRTCDeviceState;
const TRTCBeautyStyle = TRTCCloud.TRTCBeautyStyle;
const TRTCVideoResolution = TRTCCloud.TRTCVideoResolution;
const TRTCVideoResolutionMode = TRTCCloud.TRTCVideoResolutionMode;
const TRTCVideoMirrorType = TRTCCloud.TRTCVideoMirrorType;
const TRTCVideoRotation = TRTCCloud.TRTCVideoRotation;
const TRTCVideoFillMode = TRTCCloud.TRTCVideoFillMode;
const TRTCRoleType = TRTCCloud.TRTCRoleType;
const TRTCScreenCaptureProperty = TRTCCloud.TRTCScreenCaptureProperty;
export {
TRTCParams,
TRTCAppScene,
TRTCVideoStreamType,
TRTCScreenCaptureSourceType,
TRTCVideoEncParam,
Rect,
TRTCAudioQuality,
TRTCScreenCaptureSourceInfo,
TRTCDeviceInfo,
TRTCVideoQosPreference,
TRTCQualityInfo,
TRTCStatistics,
TRTCVolumeInfo,
TRTCDeviceType,
TRTCDeviceState,
TRTCBeautyStyle,
TRTCVideoResolution,
TRTCVideoResolutionMode,
TRTCVideoMirrorType,
TRTCVideoRotation,
TRTCVideoFillMode,
TRTCRoleType,
TRTCQuality,
TRTCScreenCaptureProperty,
};
export default TRTCCloud.default;
`,
}),
]
});

步骤三:引用 TUIRoomKit 组件

说明:
引入 ConferenceMainView 组件,组件默认处于 常驻模式(组件始终显示,内部不控制组件的显示与隐藏,若业务端不进行控制,则组件一直保持显示状态)。
Vue3
Vue2
<template>
<ConferenceMainView></ConferenceMainView>
</template>
<script setup>
import { ConferenceMainView } from '@tencentcloud/roomkit-electron-vue3';
</script>
<template>
<ConferenceMainView></ConferenceMainView>
</template>
<script>
import { ConferenceMainView } from '@tencentcloud/roomkit-electron-vue2.7';
export default {
components: {
ConferenceMainView,
},
};
</script>

步骤四:登录 TUIRoomKit 组件

开启会议前需要调用 login 接口进行登录。获取 sdkAppId、userId、userSig 可参见 开通服务
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-electron-vue2.7
import { conference } from '@tencentcloud/roomkit-electron-vue3';
conference.login({
sdkAppId: 0, // Replace with your sdkAppId
userId: '', // Replace with your userId
userSig: '', // Replace with your userSig
});
参数说明 这里详细介绍一下 login 函数中所需要用到的几个关键参数:
sdkAppId:在 开通服务 中的最后一步中获取。
userId:当前用户的 ID,字符串类型,只允许包含英文字母(a-z 和 A-Z)、数字(0-9)、连词符(-)和下划线(_)。
userSig:通过对在 开通服务 中获取的SDKSecretKeySDKAppIDUserID等信息进行加密,就可以得到UserSig,它是一个鉴权用的票据,用于腾讯云识别当前用户是否能够使用TRTC的服务。您可以通过控制台中的 辅助工具 生成一个临时可用的UserSig
更多信息请参见 如何计算及使用 UserSig
注意:
这个步骤也是目前我们收到的开发者反馈最多的步骤,常见问题如下:
sdkAppId 设置错误,国内站的 SDKAppID 一般是以140开头的10位整数。
UserSig 被错配成了加密密钥(SecretKey),UserSig 是用 SecretKey 把 SDKAppID、UserID 以及过期时间等信息加密得来的,而不是直接把 SecretKey 配置成 UserSig。
userId 被设置成“1”、“123”、“111”等简单字符串,由于 TRTC 不支持同一个 UserID 多端登录,所以在多人协作开发时,形如 “1”、“123”、“111” 这样的 UserID 很容易被您的同事占用,导致登录失败,因此我们建议您在调试的时候设置一些辨识度高的 UserID。
Github 中的示例代码使用了 genTestUserSig 函数在本地计算 UserSig 是为了更快地让您跑通当前的接入流程,但该方案会将您的 SecretKey 暴露在代码当中,这并不利于您后续升级和保护您的 SecretKey,所以我们强烈建议您将 UserSig 的计算逻辑放在服务端进行,并在每次使用 TUIRoomKit 组件时向您的服务器请求实时计算出的 UserSig。

步骤五:发起新的会议

会议主持人可以通过调用 start 接口来发起一场新的会议,其他参会议者可以参见 步骤六 的描述,调用 join 接口加入该会议。
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-electron-vue2.7
import { conference } from '@tencentcloud/roomkit-electron-vue3';
const startConference = async () => {
await conference.login({
sdkAppId: 0, // Replace with your sdkAppId
userId: '', // Replace with your userId
userSig: '', // Replace with your userSig
});
await conference.start('123456', {
roomName: 'TestRoom',
isSeatEnabled: false,
isOpenCamera: false,
isOpenMicrophone: false,
});
}
startConference()

步骤六:进入已有会议

参与者可以通过调用 join 接口,填写对应的 roomId 参数,来加入由会议主持人在 步骤五 中发起的会议。
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-electron-vue2.7
import { conference } from '@tencentcloud/roomkit-electron-vue3';
const joinConference = async () => {
await conference.login({
sdkAppId: 0, // Replace with your sdkAppId
userId: '', // Replace with your userId
userSig: '', // Replace with your userSig
});
await conference.join('123456', {
isOpenCamera: false,
isOpenMicrophone: false,
});
}
joinConference()

开发环境运行

1. 执行开发环境命令。(此处以 vue3 + vite 默认项目为例,不同项目 dev 指令可能不同,请根据您自己的项目进行调整)
npm run dev
注意:
运行过程中若 src/TUIRoom 目录中有 eslint 报错,可在 .eslintignore 文件中添加 /src/TUIRoom/ 路径屏蔽 eslint 检查。
2. 根据控制台提示,在浏览器中打开页面 ,如:http://localhost:3000/
3. 体验 TUIRoomKit 组件功能。

生产环境部署

1. 打包 dist 文件。
npm run build
2. 部署 dist 文件到服务器上。
注意:
生产环境要求使用 HTTPS 域名。

其他文档

交流与反馈

您在接入或使用过程有任何疑问或者建议,欢迎联系:info_rtc@tencent.com 。