tencent cloud

コンポーネントの説明

TUIRoomは、UIを含むオープンソースのオーディオビデオコンポーネントであり、TUIRoomの統合により、業務にオーディオビデオルーム、画面共有、チャットなどの機能を速やかに立ち上げることができます。Web側のTUIRoomの基本機能は下図のとおりです。

説明：

TUIKitシリーズコンポーネントはTencent CloudのTRTCとIMという2つの基本的なPaaSサービスを同時に使用し、TRTCをアクティブにした後、IMサービスを同期的にアクティブにすることができます。IMサービスの課金ルールの詳細については、Instant Messagingの料金説明をご参照ください。TRTCをアクティブにすると、デフォルトでは、100DAUまでサポートするIM SDK体験版もアクティブになりますs。

TUIRoomオンラインリンクをクリックすると、TUIRoomのその他の機能を体験できます。
GithubをクリックしてTUIRoomコードをダウンロードし、TUIRoom Webデモプロジェクトのクイックスタートドキュメントを参照してTUIRoom Webデモプロジェクトをクイックスタートできます。
Web側のTUIRoomコンポーネントを既存のビジネスに統合する場合は、このドキュメントをご参照ください。

コンポーネントの統合

TUIRoomコンポーネントは、Vue3+TS+Pinia+Element Plus+SCSSを使用して開発されており、インポート先のプロジェクトにはVue3+TSテクノロジースタックが必要です。

ステップ1：Tencent Cloud TRTCとInstant Messagingサービスを有効化します

TUIRoomは、Tencent Cloud TRTCとInstant Messagingサービスをベースに開発されたものです。

ステップ1. TRTCアプリケーションを作成します

• Tencent Cloudアカウントがない場合は、Tencent Cloudアカウントの登録を行ってください。
• TRTCコンソール で、アプリケーション管理>アプリケーションの作成 をクリックし、新たなアプリケーションを作成します。
  

2. TRTCキー情報およびキー情報の取得

3. アプリケーション管理>アプリケーション情報でSDKAppID情報を取得します。SDKAppIDは、TRTCのアプリケーションIDであり、サービス分離のために使用され、すなわち、異なるSDKAppIDによる通話が相互に通じません。
   

4. アプリケーション管理>クイックマスターでアプリケーションのsecretKey情報を取得します。SecretKeyはTRTCのアプリケーションキーであり、SDKAppIDとペアで使用してください。TRTCサービスを正当に使用するための認証用チケットUserSigをチェックアウトします。
   

5. UserSigの発行
   UserSigとは、悪意ある攻撃者によるクラウドサービスの使用権の盗用を防ぐために、Tencent Cloudによって設計されたセキュリティ保護された署名です。TUIRoomを初期化するには、UserSigパラメータを提供してください。

   • デバッグスタート段階でuserSigを発行する方法については、デバッグスタート段階でのUserSigの計算方法をご参照ください。
   • 本番環境でuserSigを発行する方法については、本番環境でのUserSigの計算方法をご参照ください。

ステップ2：TUIRoomコンポーネントのダウンロードとコピー

1. Githubをクリックして、TUIRoomウェアハウスコードをクローンまたはダウンロードします。
2. ビジネスサイドで既存のVue3 + TSプロジェクトを開き、ViteとWebpackのパッケージ方式をサポートします。Vue3 + TSのプロジェクトがない場合、以下のいずれかの方法を選択して、テンプレートプロジェクトを生成することができます。
   • Vue3 + Vite + TSのテンプレートプロジェクトの生成
   • Vue3 + Webpack + TSテンプレートプロジェクトの生成

   npm create vite@latest TUIRoom-demo -- --template vue
   

   
   

   注意

   テンプレートプロジェクトスクリプトの生成を実行する場合、ステップ1で直接リターンし、ステップ2でVueを選択し、ステップ3でvue-tsを選択します。

   Vue3 + Vite + TSテンプレートプロジェクトの生成に成功したら、以下のスクリプトを実行します。
   

   cd TUIRoom-demo
   npm install
   npm run dev
   

   // vue-cliをインストールします。Vue CLI 4.xはNode.jsのv10以上のバージョンが必要なのでご注意ください
   npm install -g @vue/cli
   ::: Vue3 + Webpack + TSテンプレートプロジェクトの作成
   vue create TUIRoom-demo
   

   
   

   注意

   テンプレートプロジェクトスクリプトの生成を実行する場合、テンプレートの生成方式としてManually select featuresを選択し、残りの設定オプションは画像を参照します。

   

   Vue3 + Webpack + TSテンプレートプロジェクトの生成に成功したら、以下のスクリプトを実行します。
   

   cd TUIRoom-demo
   npm run serve
   

3. TUIRoom/Web/src/TUIRoomフォルダを既存のプロジェクトsrc/ディレクトリにコピーします。

ステップ3：TUIRoomコンポーネントのインポート

1. ページでTUIRoomコンポーネントを参照します。例：TUIRoomコンポーネントをApp.vueコンポーネントにインポートします。
   • TUIRoomコンポーネントは、ユーザーをキャスターロールと一般メンバーロールに分けます。コンポーネントは外部にinit、createRoom、enterRoomの各メソッドを提供します。
   • キャスターと一般メンバーはinitメソッドを使用してTUIRoomコンポーネントの適用とユーザーデータを初期化できます。キャスターはcreateRoomメソッドを使用してルームを作成して参加します。一般メンバーはenterRoomメソッドを使用してキャスターが作成したルームに参加できます。

     <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>
     

注意：

ページで上記のコードをコピーした後、TUIRoomインターフェースのパラメータを実際のデータに変更する必要があります。

ステップ4：開発環境の設定

TUIRoomコンポーネントがインポートされたら、プロジェクトが正常に機能するように、次の設定を行ってください

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
// ...
plugins: [
AutoImport({
    resolvers: [ElementPlusResolver()],
}),
Components({
    resolvers: [ElementPlusResolver({
        importStyle: 'sass',
    })],
}),
],
css: {
preprocessorOptions: {
    scss: {
        // ...
        additionalData: `
            @use "./src/TUIRoom/assets/style/element.scss" as *;
        `,
    },
},
},
});

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const ElementPlus = require('unplugin-element-plus/webpack')
module.exports = defineConfig({
transpileDependencies: true,
css: {
  loaderOptions: {
    scss: {
      additionalData: '@use "./src/TUIRoom/assets/style/element.scss" as *;'
    }
  }
},
configureWebpack: {
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
    }),
    // 必要に応じてインポート時のテーマカラーをカスタマイズ
    ElementPlus({
      useSource: true
    })
  ]
}
})

ステップ5：開発環境の実行

コンソールで開発環境実行スクリプトを実行し、ブラウザを使用してTUIRoomを含むページを開くと、ページ内でTUIRoomコンポーネントを使用できます。

• ステップ2のスクリプトを使用してVue + Vite + TSプロジェクトを生成する場合は、次の事項を行う必要があります。

1. 開発環境コマンドを実行します。

   npm run dev
   

2. ブラウザでページhttp://localhost:3000/を開きます。

   注意：

   TUIRoomはオンデマンドでelement-plusコンポーネントをインポートするため、開発環境のルーティングページが最初にロードされたときの反応が遅くなり、element-plusがオンデマンドでロードされるのを待つと正常に機能するようになります。element-plusのオンデマンドロードは、パッケージング後のページロードには影響しません。

3. TUIRoomコンポーネント機能を体験します。

• ステップ2のスクリプトを使用してVue + Webpack + TSプロジェクトを生成する場合は、次の事項を行う必要があります。

1. 開発環境コマンドを実行します。

   npm run serve
   

2. ブラウザでhttp://localhost:8080/のページを開きます

   注意：

   実行中、src/TUIRoomディレクトリでeslintエラーが発生した場合、.eslintignoreファイルに/src/TUIRoomのパスを追加すると、eslintチェックをブロックできます。

3. TUIRoomコンポーネント機能を体験します。

ステップ6：本番環境のデプロイ

1. distファイルのパッケージ

npm run build

説明：

実際のパッケージコマンドについてはpackage.jsonファイルをご確認ください。

2. distファイルのサーバーへのデプロイ

注意：

本番環境ではHTTPSドメイン名を使用する必要があります。

付録：TUIRoom API

TUIRoomインターフェース

init

TUIRoomデータを初期化します。TUIRoomを使用するすべてのユーザーはinitメソッドを呼び出してください。

TUIRoomRef.value.init(roomData);

パラメータは下表に示すとおりです。

createRoom

キャスターがルームを作成します。

TUIRoomRef.value.createRoom(roomId, roomMode, roomParam);

パラメータは下表に示すとおりです。

enterRoom

一般メンバーがルームに参加します。

TUIRoomRef.value.enterRoom(roomId, roomParam);

パラメータは下表に示すとおりです。

TUIRoomイベント

onRoomCreate

ルーム作成のコールバック。

<template>
 <room ref="TUIRoomRef" @on-room-create="handleRoomCreate"></room>
</template>
<script setup lang="ts">
 // TUIRoomコンポーネントをインポートします。インポートパスが正しいことを確認してください
 import Room from './TUIRoom/index.vue';
 
 function handleRoomCreate(info) {
   if (info.code === 0) {
     console.log('ルーム作成成功')
   }
 }
</script>

onRoomEnter

入室コールバック。

<template>
 <room ref="TUIRoomRef" @on-room-enter="handleRoomEnter"></room>
</template>
<script setup lang="ts">
 // TUIRoomコンポーネントをインポートします。インポートパスが正しいことを確認してください
 import Room from './TUIRoom/index.vue';
 
 function handleRoomEnter(info) {
   if (info.code === 0) {
     console.log('入室成功')
   }
 }
</script>

onRoomDestory

キャスターがルームを廃棄する通知。

<template>
 <room ref="TUIRoomRef" @on-room-destory="handleRoomDestory"></room>
</template>
<script setup lang="ts">
 // TUIRoomコンポーネントをインポートします。インポートパスが正しいことを確認してください
 import Room from './TUIRoom/index.vue';
 
 function handleRoomDestory(info) {
   if (info.code === 0) {
     console.log('キャスターが廃棄することに成功しました')
   }
 }
</script>

onRoomExit

一般メンバーが退室する通知。

<template>
<room ref="TUIRoomRef" @on-room-exit="handleRoomExit"></room>
</template>
<script setup lang="ts">
// TUIRoomコンポーネントをインポートします。インポートパスが正しいことを確認してください
import Room from './TUIRoom/index.vue';

function handleRoomExit(info) {
  if (info.code === 0) {
    console.log('一般メンバーが退室することに成功しました')
  }
}
</script>

onKickOff

一般メンバーがキャスターにルームからキックアウトされたときの通知です。

<template>
<room ref="TUIRoomRef" @on-kick-off="handleKickOff"></room>
</template>
<script setup lang="ts">
// TUIRoomコンポーネントをインポートします。インポートパスが正しいことを確認してください
import Room from './TUIRoom/index.vue';

function handleKickOff(info) {
  if (info.code === 0) {
    console.log('一般メンバーがキャスターにルームからキックアウト')
  }
}
</script>