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

<script setup lang="ts">
 import { ref, onMounted } from 'vue';
 // TUIRoomコンポーネントをインポートします。インポートパスが正しいことを確認してください
 import Room from './TUIRoom/index.vue';
 // TUIRoomコンポーネントのメソッドを呼び出すために、TUIRoomコンポーネント要素を取得します
 const TUIRoomRef = ref();

  onMounted(async () => {
  // TUIRoomコンポーネントの初期化
  // キャスターはルームを作成する前にTUIRoomコンポーネントを初期化してください
  // 一般メンバーは、ルームに参加する前にTUIRoomコンポーネントを初期化してください
  await TUIRoomRef.value.init({
      // sdkAppIdを取得するにはステップ1をご参照ください
      sdkAppId: 0,
      // ビジネスにおけるユーザーの一意の識別ID
      userId: '',
      // ローカル開発デバッグは、userSigをhttps://console.tencentcloud.com/trtc/usersigtoolページにすばやく生成します。userSigとuserIdは1対1で対応していることに注意してください
      userSig: '',
      // ユーザーがビジネスで使用するニックネーム
      userName: '',
      // ユーザーがビジネスで使用するアバターへのリンク
      userAvatar: '',
      // 画面共有のためにユーザーが使用する一意のID。shareUserId=`share_${userId}`が必要です。画面共有機能が要求されない場合は渡す必要がありません
      shareUserId: '',
      // このドキュメントのステップ1>3を参照し、sdkAppIdとshareUserIdを使用してshareUserSigを発行してください 
      shareUserSig: '',
  })
   // デフォルトではルームの作成が実行され、実際のインポートはオンデマンドでhandleCreateRoomメソッドが実行されます
  await handleCreateRoom();
 })

 // キャスターがルームを作成します。このメソッドはルームが作成されたときにのみ呼び出されます
 async function handleCreateRoom() {
  // roomIdはユーザーが参加するルーム番号です。roomIdタイプはnumber型が必要です
  // roomModeは、'FreeSpeech'（自由発言モード）と'ApplySpeech'（举手発言モード）の2モードを含み、デフォルトは'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タイプはnumber型が必要です
  // 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