TUIRoom (Web) 통합

<template>
 <room ref="TUIRoomRef"></room>
</template>

<script setup lang="ts">
 import { ref, onMounted } from 'vue';
 // TUIRoom 컴포넌트를 가져옵니다. 올바른 가져오기 경로를 사용해야 함
 import Room from './TUIRoom/index.vue';
 // 컴포넌트의 메소드를 호출하는 데 사용되는 TUIRoom 컴포넌트 요소 가져오기
 const TUIRoomRef = ref();

  onMounted(async () => {
  // TUIRoom 컴포넌트 초기화
  // 호스트는 방을 만들기 전에 TUIRoom 컴포넌트를 초기화해야 함
  // 참석자는 방에 들어가기 전에 TUIRoom 컴포넌트를 초기화해야 함
  await TUIRoomRef.value.init({
      // sdkAppId 가져오기(1단계 참고)
      sdkAppId: 0,
      // 귀하의 비즈니스에서 사용자의 고유 Id
      userId: '',
      // 로컬 개발 및 디버깅을 위해 https://console.tencentcloud.com/trtc/usersigtool 에서 userSig를 빠르게 생성할 수 있습니다. userSig 와 userId는 일대일 대응 관계임
      userSig: '',
      // 귀하의 비즈니스에서 사용자의 사용자 이름
      userName: '',
      // 비즈니스에 있는 사용자의 프로필 사진에 연결
      userAvatar: '',
      // 화면 공유에 사용되는 사용자의 고유 Id입니다. shareUserId = `share_${userId}`여야 합니다. 화면 공유 기능이 필요하지 않은 경우 이 매개변수 불필요
      shareUserId: '',
      // 이 문서의 1단계 > 3단계를 참고하여 sdkAppId 및 shareUserId 를 사용하여 shareUserSig 발행 
      shareUserSig: '',
  })
   // 기본적으로 방이 생성됩니다. 실제 연결 시 필요에 따라 handleCreateRoom 메소드를 실행할 수 있음
  await handleCreateRoom();
 })

 // 호스트가 방을 만듭니다. 이 메소드는 방을 생성할 때만 호출됨
 async function handleCreateRoom() {
  // roomId는 사용자가 입력한 roomId로 숫자여야 함
  // roomMode에는 ‘FreeSpeech’(자유롭게 말하기) 및 ‘ApplySpeech’(손 들고 말하기) 포함, 기본값은 ‘FreeSpeech’이며 현재 유일하게 지원되는 모드임
  // roomParam은 방에 들어가는 사용자의 기본 동작을 지정함(기본적으로 마이크를 켤지 여부, 기본적으로 카메라를 켤지 여부, 기본 미디어 장치 Id)
  const roomId = 123456;
  const roomMode = 'FreeSpeech';
  const roomParam = {
      isOpenCamera: true,
      isOpenMicrophone: true,
  }
  await TUIRoomRef.value.createRoom(roomId, roomMode, roomParam);
 }

 // 참석자 방 입장. 이 메소드는 참석자가 생성된 방에 들어갈 때 호출됨
 async function handleEnterRoom() {
  // roomId는 사용자가 입력한 roomId로 숫자여야 함
  // roomParam은 방에 들어가는 사용자의 기본 동작을 지정함(기본적으로 마이크를 켤지 여부, 기본적으로 카메라를 켤지 여부, 기본 미디어 장치 Id)
  const roomId = 123456;
  const roomParam = {
      isOpenCamera: true,
      isOpenMicrophone: true,
  }
  await TUIRoomRef.value.enterRoom(roomId, roomParam);
 }
</script>

<style>
html, body {
 width: 100%;
 height: 100%;
 margin: 0;
}

#app {
 width: 100%;
 height: 100%;
}
</style>

npm run dev

npm run serve

npm run build