tencent cloud

フィードバック

TUIRoom(Web)の統合

最終更新日:2022-08-08 16:17:53

    コンポーネントの説明

    TUIRoomは、UIを含むオープンソースオーディオビデオコンポーネントです。TUIRoomを統合することにより、ビジネスにおいて、オーディオビデオルーム、画面共有、チャットなどの機能を速やかにオンラインにすることができます。Web端末TUIRoomコンポーネントの基本機能は次のとおりです。

    説明:

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

    TUIRoomオンラインリンクをクリックすると、TUIRoomのその他の機能を体験することができます。
    GithubをクリックしてTUIRoomのコードをダウンロードし、TUIRoom Webデモプロジェクトクイックスタートのドキュメントを参照し、TUIRoom Webデモプロジェクトをクイックスタートすることができます。
    現在の業務でWeb端末のTUIRoomコンポーネントを統合する必要がある場合は、こちらのドキュメントをご参照ください。

    コンポーネントの統合

    TUIRoomコンポーネントはVue3 + TS + Pinia + Element Plus + SCSSを使用して開発されています。プロジェクトの統合には、Vue3 + TSの技術スタックを使用する必要があります。

    ステップ1: Tencent Cloud TRTCおよびIMサービスのアクティブ化

    TUIRoomは、Tencent Cloud TRTCとIMサービスをベースに開発されています。

    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パラメータの提供が必要です。

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

    1. Githubをクリックし、TUIRoomリポジトリのコードをクローンまたはダウンロードします。
    2. ビジネスサイドで既存のVue3 + TSプロジェクトを開き、ViteとWebpackのパッケージ方式をサポートします。Vue3 + 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
      

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

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

    1. ページ内にTUIRoomコンポーネントをインポートします。例えば、App.vueコンポーネントにTUIRoomコンポーネントをインポートします。
      • TUIRoomコンポーネントはユーザーをキャスターロールと一般メンバーロールに区分します。コンポーネントは外部に対しinitcreateRoomenterRoomのメソッドを提供します。
      • キャスターと一般メンバーは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: '',
        // ローカル開発デバッグの場合は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のタイプは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コンポーネントをインポートした後、プロジェクトが正常に実行されることを確認するため、次の設定を行います。

    1. 依存のインストール
    • 開発環境の依存をインストールします。
      npm install sass typescript unplugin-auto-import unplugin-vue-components -S -D
      
    • 本番環境の依存をインストールします。
      npm install element-plus events mitt pinia rtc-beauty-plugin tim-js-sdk trtc-js-sdk tsignaling -S
      
    1. Piniaの登録
      TUIRoomはPiniaを使用してルームデータの管理を行うため、プロジェクトのエントリーファイルでPiniaの登録を行う必要があります。プロジェクトのエントリーファイルはsrc/main.tsファイルです。
      // src/main.tsファイル
      import { createPinia } from 'pinia';
      const app = createApp(App);
      // Piniaの登録
      app.use(createPinia()); 
      app.mount('#app');
      
    2. element-plusを必要に応じてインポートするよう設定
    • TUIRoomはelement-plus UIコンポーネントを使用します。すべてのelement-plusコンポーネントをインポートしてしまわないように、vite.config.tsで、element-plusコンポーネントを必要に応じてロードするように設定しておく必要があります。
      注意

      以下の設定項目は増分設定です。すでに存在するVite設定項目を削除しないでください。


      // 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 *;
              `,
          },
      },
      },
      });
      
    • また、element-plusに付帯するUIコンポーネントがスタイルを正常に表示できるようにするため、エントリーファイルsrc/main.tsでelement-plusコンポーネントスタイルをロードする必要があります。
      // src/main.ts
      import 'element-plus/theme-chalk/el-message.css';
      import 'element-plus/theme-chalk/el-message-box.css';
      

    ステップ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
      
    1. ブラウザでhttp://localhost:8080/のページを開きます

      注意:

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

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

    付録:TUIRoom API

    TUIRoomインターフェース

    init

    TUIRoomデータを初期化します。TUIRoomを使用するすべてのユーザーはinitメソッドを呼び出す必要があります。

    TUIRoomRef.value.init(roomData);
    

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

    パラメータ タイプ 意味
    roomData object
    roomData.sdkAppId number お客様のSDKAppId
    roomData.userId string ユーザーの固有ID
    roomData.userSig string ユーザーのUserSig
    roomData.userName string ユーザーのニックネーム
    roomData.userAvatar string ユーザーのプロフィール画像
    roomData.shareUserId string 任意入力。ユーザーが画面共有を行う際のUserIdであり、shareUserId = share_${userId}である必要があります。画面共有機能がなければ渡さなくても結構です
    roomData.shareUserSig string 任意入力。ユーザーが画面共有を行う際のUserSig

    createRoom

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

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

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

    パラメータ タイプ 意味
    roomId number ルームID
    roomMode string ルームモード。'FreeSpeech'(自由発言モード)と'ApplySpeech'(挙手発言モード)があり、デフォルトでは'FreeSpeech'です。現在は自由発言モードのみサポートされていますのでご注意ください
    roomParam Object 任意入力
    roomParam.isOpenCamera string 任意入力。入室時にカメラをオンにするかどうか。デフォルトではオフ
    roomParam.isOpenMicrophone string 任意入力。入室時にマイクをオンにするかどうか。デフォルトではオフ
    roomParam.defaultCameraId string 任意入力。デフォルトのカメラデバイスID
    roomParam.defaultMicrophoneId string 任意入力。デフォルトのマイクデバイスID
    roomParam.defaultSpeakerId String 任意入力。デフォルトのスピーカーデバイスID

    enterRoom

    一般メンバーが入室します。

    TUIRoomRef.value.enterRoom(roomId, roomParam);
    

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

    パラメータ タイプ 意味
    roomId number ルームID
    roomParam Object 任意入力
    roomParam.isOpenCamera string 任意入力。入室時にカメラをオンにするかどうか。デフォルトではオフ
    roomParam.isOpenMicrophone string 任意入力。入室時にマイクをオンにするかどうか。デフォルトではオフ
    roomParam.defaultCameraId string 任意入力。デフォルトではカメラデバイスID
    roomParam.defaultMicrophoneId string 任意入力。デフォルトではマイクデバイスID
    roomParam.defaultSpeakerId String 任意入力。デフォルトではスピーカーデバイスID

    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>
    
    お問い合わせ

    カスタマーサービスをご提供できるため、ぜひお気軽にお問い合わせくださいませ。

    テクニカルサポート

    さらにサポートが必要な場合は、サポートチケットを送信して弊社サポートチームにお問い合わせください。24時間365日のサポートをご提供します。

    電話サポート(24 時間365日対応)