문서 개요/
Conference/
Web/
시작하다/
통합/

통합

TUIRoomKit는 Tencent Cloud에서 출시한 다중 사용자 오디오/비디오 UI 컴포넌트입니다. 컴포넌트는 방 관리, 오디오/비디오 제어, 화면 공유, 구성원 관리, 시트 관리, 인스턴스 채팅, 사용자 정의 레이아웃 전환 등 풍부한 기능 인터랙션을 제공함과 동시에 중국어와 영어 변환, 원클릭 테마 변환 등 능력을 제공합니다.
본 문서에서는 당신이 기업 회의, 온라인 교육, 의료 문진, 온라인 검사, 원격 손해평가 등 업무 시나리오의 빠른 출시를 돕기 위해 온라인 TUIRoomKit(Web & H5)의 통합 안내를 소개합니다.




TUIRoomKit Demo 경험

TUIRoomKit 온라인 경험 링크 를 클릭하여 TUIRoomKit의 더 많은 기능을 경험할 수 있습니다. Github를 클릭하여 TUIRoomKit 코드를 다운로드하고, 코드 리포지토리 README.md 파일을 참조하여 TUIRoomKit Web 예시 프로젝트를 실행할 수 있습니다.

환경 준비

Node.js 버전: Node.js ≥ 16.19.1(공식 LTS 버전을 사용하는 것이 좋으며, npm 버전은 node 버전과 일치해야 합니다).
Modern browser, supporting WebRTC APIs.

TUIRoomKit 컴포넌트 통합

설명:
Vue 프로젝트가 없는 경우 직접 Demo 경험을 참고하여 Github 예시 프로젝트를 실행할 수 있습니다.
기존 프로젝트에 통합해야 하는 경우, 아래 단계를 따르시기 바랍니다.

단계 1: 종속성 설치

Vue3
Vue2
npm install @tencentcloud/roomkit-web-vue3 pinia --save
# 여기서 vue 버전 >= 2.7.16으로 요구되므로, 설치 실패 시 vue 버전을 확인하시기 바랍니다.
npm install @tencentcloud/roomkit-web-vue2.7 pinia
방 데이터 관리를 위해 Pinia를 사용하므로 프로젝트 입구 파일에서 Pinia를 등록해야 합니다. 프로젝트 입구 파일은 src/main.ts 파일입니다.
설명:
TUIRoomKit npm 패키지는 회의 전 미리보기 컴포넌트, 회의 중 컴포넌트 및 회의 개시, 회의 참가 및 인터페이스 미세 조정을 제공합니다. 자세한 내용은 TUIRoomKit API를 참고하시기 바랍니다. 이러한 API가 당신의 업무 수요를 충족하지 못한다면, TUIRoomKit 소스 코드 액세스를 위해 TUIRoomKit 소스 코드 내보내기를 참고할 수 있습니다.

단계 2: 프로젝트 엔지니어링 구성

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');

단계 3: TUIRoomKit 컴포넌트 가져오기

설명:
ConferenceMainView 컴포넌트를 가져오며, 컴포넌트는 기본적으로 영구 모드입니다(컴포넌트는 항상 표시되며, 내부에서 컴포넌트의 표시와 숨기기를 제어하지 않으며, 업무 측에서 제어하지 않으면 컴포넌트는 항상 표시 상태를 유지합니다).
Vue3
Vue2
<template>
  <ConferenceMainView></ConferenceMainView>
</template>
<script setup>
import { ConferenceMainView } from '@tencentcloud/roomkit-web-vue3';
</script>
<template>
  <ConferenceMainView></ConferenceMainView>
</template>
<script>
import { ConferenceMainView } from '@tencentcloud/roomkit-web-vue2.7';
export default {
  components: {
    ConferenceMainView,
  },
};
</script>

단계 4: TUIRoomKit 컴포넌트 로그인

회의 시작 전에 로그인을 위해 login 인터페이스를 호출해야 합니다. sdkAppId, userId, userSig를 획득하려면 서비스 활성화 를 참고하시기 바랍니다.
import { conference } from '@tencentcloud/roomkit-web-vue3';
await conference.login({    
  sdkAppId: 0,  // Replace with your sdkAppId
  userId: '',  // Replace with your userId
  userSig: '',  // Replace with your userSig
});
매개변수 설명 여기에서 login 함수에 필요한 몇몇 핵심 매개변수를 자세하게 설명하도록 합니다.
sdkAppId: 서비스 활성화의 마지막 단계에서 획득합니다.
userId: 현재 사용자의 ID로 문자열 유형이며 영어 문자(az 및 AZ), 숫자(0~9), 하이픈(-) 및 밑줄(_)만 허용합니다.
userSig: 서비스 활성화에서 획득한 SDKSecretKey로 SDKAppID, UserID 등 정보를 암호화하여 얻을 수 있으며, UserSig는 Tencent Cloud에서 현재 사용자가 TRTC의 서비스를 이용할 수 있는지 여부를 식별하는 데 사용되는 인증용 티켓입니다. 콘솔의 보조 툴을 통해 하나의 임시 사용 가능한 UserSig를 생성할 수 있습니다.
자세한 내용은 UserSig 계산 및 사용 방법을 참고하시기 바랍니다.
주의사항:
이 단계는 현재까지 저희가 개발자들로부터 가장 많은 피드백을 받은 단계입니다. 자주 묻는 질문들은 다음과 같습니다.
sdkAppId 설정 오류: 국내 사이트의 SDKAppID는 일반적으로 140으로 시작하는 10자리 정수입니다.
UserSig가 암호 키(SecretKey)와 일치하지 않음: UserSig는 SecretKey를 UserSig에 직접 구성하는 대신 SecretKey를 사용하여 SDKappID, UserID, 만료 시간 등의 정보를 암호화하여 가져옵니다.
userId가 ‘1’, ‘123’, ‘111’ 등과 같은 간단한 문자열로 설정됨: TRTC는 동일한 UserID가 여러 장치에서 로그인되는 것을 지원하지 않습니다. 따라서 여러 사람이 공동 개발을 할 때 ‘1’, ‘123’, ‘111’과 같은 UserID는 타인에 의해 쉽게 사용되어 로그인 실패가 발생하기 때문에 디버깅 중에 식별성이 높은 UserID를 설정하는 것이 좋습니다.

Github 중의 예시 코드는 genTestUserSig 함수를 사용하여 로컬에서 UserSig를 계산함으로써 현재 액세스 절차를 더 빠르게 실행할 수 있지만, 이 솔루션은 당신의 SecretKey를 코드에 노출시키므로 당신의 후속 SecretKey 업그레이드 및 보호에 불리합니다. 따라서 저희는 UserSig의 계산 논리를 서버 측에 두고 매번 TUIRoomKit 컴포넌트를 사용할 때마다 당신의 서버에 실시간으로 계산된 UserSig를 요청하는 것을 권장합니다.

단계 5: 새 회의 개시

회의 호스트는 start 인터페이스를 호출하여 새 회의를 개시할 수 있고, 다른 참가자들은 단계 6의 설명을 참고하여 join 인터페이스를 호출하여 이 회의에 참가할 수 있습니다.
// 패키지의 이름에 주의하며, vue2 버전을 사용하는 경우 패키지 이름을 @tencentcloud/roomkit-web-vue2.7로 수정하시기 바랍니다.
import { conference } from '@tencentcloud/roomkit-web-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()

단계 6: 기존 회의에 들어가기

참가자는 join인터페이스를 호출함으로써 대응되는 roomId 매개변수를 입력하여 회의 호스트가 단계 5에서 개시한 회의에 참가할 수 있습니다.
// 패키지의 이름에 주의하며, vue2 버전을 사용하는 경우 패키지 이름을 @tencentcloud/roomkit-web-vue2.7로 수정하시기 바랍니다.
import { conference } from '@tencentcloud/roomkit-web-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
2. 콘솔 프롬프트에 따라 브라우저에서 페이지를 엽니다. 예: ：http://localhost:3000/
3. TUIRoomKit 컴포넌트 기능을 경험합니다.

생산 환경 배치

1. dist 파일을 패키징합니다.
npm run build
2. dist 파일을 서버에 배치합니다.
주의사항:
생산 환경은 HTTPS 도메인을 사용해야 합니다.

기타 문서

TUIRoomKit
TUIRoom Demo 빠른 실행
인터페이스 맞춤화 (TUIRoomKit)
자주 받는 질문들

교류와 피드백

액세스 또는 사용 중에 질문 또는 건의가 있으면 info_rtc@tencent.com으로 연락주시기 바랍니다.
WebRTC Trtc Logo
Copyright © 2013-2025 Tencent RTC. All Rights Reserved.
  1. 개인정보 처리방침
  3. 법적
  5. 쿠키 정책
  7. Tencent Cloud