Conference
  • 개요
  • Web
    • Demo 실행
    • 통합
    • UI 맞춤화
    • Conference Control
    • 룸 내 채팅
    • 클라우드 녹화
    • AI 노이즈 캔슬링
    • 로봇 스트리밍
    • Virtual Background
    • 더 많은 기능
      • 플로팅 윈도우
      • Text Watermark
    • 인터페이스 문서
      • 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 노이즈 캔슬링
    • 로봇 스트리밍
    • 더 많은 기능
      • 플로팅 윈도우
      • Text Watermark
    • 인터페이스 문서
      • RoomKit 인터페이스
      • RoomEngine 인터페이스
        • 인터페이스 개요
        • TUIRoomEvent
        • TUIRoomEngine
        • TUIRoomEngine 정의
    • 자주 받는 질문들
  • Flutter
    • Demo 실행
    • 통합
    • UI 맞춤화
    • 미팅 제어
    • In-Conference Chat
    • 클라우드 녹화
    • AI 노이즈 캔슬링
    • 로봇 스트리밍
    • 더 많은 기능
      • 플로팅 윈도우
    • 인터페이스 문서
      • RoomKit 인터페이스
      • RoomEngine 인터페이스
        • 인터페이스 개요
        • TUIRoomEngine
        • TUIRoomObserver
        • 유형 정의
    • 자주 받는 질문들
  • 개요
    • 개요
  • 서비스 활성화
  • 가격
    • 무료시간
    • 오디오/비디오 TRTC Conference 월정액 패키지
    • 구독 패키지 기간 과금 설명
    • 종량제
      • 오디오 및 비디오 시간 과금 설명
      • 클라우드 녹화 과금 설명
      • 믹스 트랜스코딩 및 CDN 중계 과금 설명
  • 서버 API
    • REST API
      • RESTful API Overview
      • RESTful API List
      • Room Management
        • Create a Room
        • Destroy a Room
        • Update the Room Information
        • Get the Room Information
      • User Management
        • 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
  • Error Code
Conference
이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.

통합

TUIRoomKit is a multiperson audio/video UI component library launched by Tencent Cloud. It offers a rich array of features such as room management, audio and video control, screen sharing, member management, microphone position management, instant messaging, and custom layout switching, among others. It also supports switching between Chinese and English, and one-click skin changing capabilities.
This article introduces the access guidance for TUIRoomKit (Electron) to help you quickly launch business scenarios such as corporate meetings, online education, medical consultations, online patrols, and remote loss assessment.




TUIRoomKit Demo Experience

You can click Mac OS Version and Windows Version to download and experience more features of TUIRoomKit Electron. You can click GitHub to download the TUIRoomKit code, and refer to the README.md document in the code repository to run through the TUIRoomKit Electron sample project.

Environment preparations

Node.js version: Node.js ≥ 16.19.1 (Using the official LTS version is recommended; please ensure the npm version matches the node version).
NPM Package Integration
Vue3 development environment, integrate @tencentcloud/room-electron-vue3 NPM package.
Vue2.7 development environment: Integrate @tencentcloud/roomkit-electron-vue2.7 NPM package.
Source Code Integration
Vue3 + TypeScript development environment: Copy source code from @tencentcloud/room-electron-vue3 NPM package.
Vue2.7 + TypeScript development environment: Copy source code from @tencentcloud/roomkit-electron-vue2.7 NPM package.

Integrating TUIRoomKit Component

If you don't have a Vue project, you can go to GitHub to download the TUIRoomKit code, and refer to the code repository's README.md to run the TUIRoomKit Electron sample project.
If you need to integrate it into an existing project, please follow the steps below.

Step 1: Install dependencies

Vue3
Vue2
npm install @tencentcloud/roomkit-electron-vue3 pinia --save
# Note that Vue version >= 2.7.16 is required here. If installation fails, please check if your Vue version is supported
npm install @tencentcloud/roomkit-electron-vue2.7 pinia

Step 2: Configure the project

Register Pinia: TUIRoom uses Pinia for room data management, so you need to register Pinia in the entry file of the project. The entry file is the src/main.ts file.
Vue3
Vue2
// src/main.ts file
import { createPinia } from 'pinia';

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

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

new Vue({
pinia,
render: h => h(App),
}).$mount('#app');
Configure vite.config.ts: To unify code style and import trtc-electron-sdk through import in the UI layer (otherwise, it must be imported via require), you need to configure in packages/renderer/vite.config.ts. Please replace the content in resolve with the following configuration items, refer to the file packages/renderer/vite.config.ts for details.
// 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;
`,
}),
]
});

Step 3: Reference TUIRoomKit Component

Note:
Introduce the ConferenceMainView component, which is defaulted to Permanent Mode (the component is always displayed, its visibility is not controlled internally. Without business side control, the component will remain visible).
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>

Step 4: Log in to TUIRoomKit Component

Before starting a meeting, you need to call the login interface to log in and get sdkAppId, userId, userSig as described in Activate Service.
// Note the package name. If you are using the vue2 version, please change the package name to @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
});
Parameter Description Here is a detailed introduction to several key parameters required in the login function:
sdkAppId: Obtained in the last step of Activating Service.
userId: The ID of the current user, a string type, can only contain letters (a-z and A-Z), digits (0-9), hyphens (-), and underscores (_).
userSig: By encrypting the information such as SDKSecretKey obtained in Activating Service, SDKAppID, UserID, etc., one can generate UserSig, which is an authentication ticket used by Tencent Cloud to recognize if the current user is eligible to use TRTC services. A temporary UserSig can be generated through the Auxiliary Tools in the console.
For more information, see How to Calculate and Use UserSig.
Note:
This step has received the most feedback from developers, with common issues as follows:
sdkAppId is set incorrectly. For domestic sites, the SDKAppID usually starts with 140 and is a 10-digit integer.
UserSig is mistakenly configured as the encryption key (SecretKey). UserSig is derived from encrypting information like SDKAppID, UserID, and expiration time with the SecretKey, rather than directly setting the SecretKey as UserSig.
userId is set to simple strings like "1", "123", "111". Since TRTC does not support multiple logins with the same UserID, in a collaborative development scenario, UserIDs such as "1", "123", "111" can easily be taken by your colleagues, leading to login failures. Therefore, we recommend using more unique UserIDs during testing.
GitHub sample code uses the genTestUserSig function to compute UserSig locally to expedite the integration process. However, this approach exposes your SecretKey in the code, which is not secure for future upgrades and protecting your SecretKey. Therefore, we strongly suggest moving the UserSig computation logic to the server-side and requesting a realtime computed UserSig from your server each time you use the TUIRoomKit component.

Step Five: Launch a New Meeting

The meeting host can initiate a new meeting by invoking the start interface. Other participants can refer to the description in Step Six and join the meeting by calling the join interface.
// Note the package name. If you are using the vue2 version, please change the package name to @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()

Step Six: Enter an Existing Meeting

Participants can join a meeting initiated by the host in Step Five by invoking the join interface and filling in the corresponding roomId parameter.
// Note the package name. If you are using the vue2 version, please change the package name to @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()

Development Environment Operation

1. Execute the development environment command. (As an example, this uses a vue3 + vite default project, however, the dev command may differ for different projects. Please adjust according to your own project)
npm run dev
Note:
If there are eslint errors in the src/TUIRoom directory during execution, you can add the /src/TUIRoom/ path to the .eslintignore file to ignore the eslint checks.
2. Follow the console prompts to open the page in a browser, e.g., http://localhost:3000/.
3. Experience the TUIRoomKit component features.

Production environment deployment

1. Pack the dist file.
npm run build
2. Deploy the dist file to the server.
Note:
The production environment requires the use of an HTTPS domain name.

Communication and feedback

If you have any needs or feedback, you can contact: info_rtc@tencent.com.