Overview/TUIRoom(Web)の統合/TUIRoom(Web)の統合コンポーネントの説明TUIRoomは、UIを含むオープンソースのオーディオビデオコンポーネントであり、TUIRoomの統合により、業務にオーディオビデオルーム、画面共有、チャットなどの機能を速やかに立ち上げることができます。Web側のTUIRoomの基本機能は下図のとおりです。CloudのTRTCとIMという2つの基本的なPaaSサービスを同時に使用し、TRTCをアクティブにした後、IMサービスを同期的にアクティブにすることができます。Messagingの料金説明をご参照ください。SDK体験版もアクティブになりますs。﻿TUIRoomオンラインリンクをクリックすると、TUIRoomのその他の機能を体験できます。Webデモプロジェクトをクイックスタートできます。Web側のTUIRoomコンポーネントを既存のビジネスに統合する場合は、このドキュメントをご参照ください。Plus+SCSSを使用して開発されており、インポート先のプロジェクトにはVue3+TSテクノロジースタックが必要です。Messagingサービスをベースに開発されたものです。Cloudアカウントの登録を行ってください。クリックし、新たなアプリケーションを作成します。﻿2.TRTCキー情報およびキー情報の取得3.アプリケーション管理>アプリケーション情報でSDKAppID情報を取得します。SDKAppIDは、TRTCのアプリケーションIDであり、サービス分離のために使用され、すなわち、異なるSDKAppIDによる通話が相互に通じません。﻿4.アプリケーション管理>クイックマスターでアプリケーションのsecretKey情報を取得します。SecretKeyはTRTCのアプリケーションキーであり、SDKAppIDとペアで使用してください。TRTCサービスを正当に使用するための認証用チケットUserSigをチェックアウトします。Cloudによって設計されたセキュリティ保護された署名です。TUIRoomを初期化するには、UserSigパラメータを提供してください。デバッグスタート段階でuserSigを発行する方法については、デバッグスタート段階でのUserSigの計算方法をご参照ください。本番環境でuserSigを発行する方法については、本番環境でのUserSigの計算方法をご参照ください。Githubをクリックして、TUIRoomウェアハウスコードをクローンまたはダウンロードします。TSプロジェクトを開き、ViteとWebpackのパッケージ方式をサポートします。TSのプロジェクトがない場合、以下のいずれかの方法を選択して、テンプレートプロジェクトを生成することができます。vueご注意:テンプレートプロジェクトスクリプトの生成を実行する場合、ステップ1で直接リターンし、ステップ2でVueを選択し、ステップ3でvue-tsを選択します。TSテンプレートプロジェクトの生成に成功したら、以下のスクリプトを実行します。vue-cliをインストールします。featuresを選択し、残りの設定オプションは画像を参照します。TSテンプレートプロジェクトの生成に成功したら、以下のスクリプトを実行します。serve3.TUIRoom/Web/src/TUIRoomフォルダを既存のプロジェクトsrc/ディレクトリにコピーします。ページでTUIRoomコンポーネントを参照します。例:TUIRoomコンポーネントをApp.vueコンポーネントにインポートします。TUIRoomコンポーネントは、ユーザーをキャスターロールと一般メンバーロールに分けます。コンポーネントは外部にinit、createRoom、enterRoomの各メソッドを提供します。キャスターと一般メンバーはinitメソッドを使用してTUIRoomコンポーネントの適用とユーザーデータを初期化できます。キャスターはcreateRoomメソッドを使用してルームを作成して参加します。一般メンバーはenterRoomメソッドを使用してキャスターが作成したルームに参加できます。TUIRoomコンポーネントをインポートします。ローカル開発デバッグは、userSigをhttps://console.tencentcloud.com/trtc/usersigtoolページにすばやく生成します。画面共有のためにユーザーが使用する一意のID。shareUserId=`share_${userId}`が必要です。キャスターがルームを作成します。roomIdはユーザーが参加するルーム番号です。roomModeは、'FreeSpeech'(自由発言モード)と'ApplySpeech'(举手発言モード)の2モードを含み、デフォルトは'FreeSpeech'です。一般メンバーがルームに参加します。roomIdはユーザーが参加するルーム番号です。100%;}</style>ご注意:ページで上記のコードをコピーした後、TUIRoomインターフェースのパラメータを実際のデータに変更する必要があります。依存関係のインストール開発環境の依存関係をインストールします。-D本番環境の依存関係をインストールします。TUIRoomはPiniaを使用してルームのデータ管理を行います。Piniaをプロジェクトエントリファイルに登録してください。プロジェクトエントリファイルはsrc/main.tsファイルです。UIコンポーネントを使用します。すべてのelement-plusコンポーネントがインポートされないようにするには、vite.config.tsでelement-plusコンポーネントをオンデマンドでロードするように設定してください。ご注意:以下の設定項目は増分設定です。存在するVite設定項目を削除しないでください。コンポーネントがスタイルを正しく表示するためには、エントリファイルsrc/main.tsにelement-plusコンポーネントスタイルをロードしてください。依存関係のインストール開発環境の依存関係をインストールします。-D本番環境の依存関係をインストールします。TUIRoomはPiniaを使用してルームのデータ管理を行います。Piniaをプロジェクトエントリファイルに登録してください。プロジェクトエントリファイルはsrc/main.tsファイルです。UIコンポーネントを使用します。すべてのelement-plusコンポーネントをインポートしてしまわないように、vue.config.jsで、element-plusコンポーネントを必要に応じてロードするように設定しておく必要があります。ご注意:以下の設定項目は増分設定です。存在するvue.config.js設定項目を削除しないでください。コンポーネントがスタイルを正しく表示するためには、エントリファイルsrc/main.tsにelement-plusコンポーネントスタイルをロードしてください。ts宣言ファイルの設定src/shims-vue.d.tsファイルに以下の設定を追加します。any;ステップ5:開発環境の実行コンソールで開発環境実行スクリプトを実行し、ブラウザを使用してTUIRoomを含むページを開くと、ページ内でTUIRoomコンポーネントを使用できます。TSプロジェクトを生成する場合は、次の事項を行う必要があります。開発環境コマンドを実行します。ブラウザでページhttp://localhost:3000/を開きます。ご注意:TUIRoomはオンデマンドでelement-plusコンポーネントをインポートするため、開発環境のルーティングページが最初にロードされたときの反応が遅くなり、element-plusがオンデマンドでロードされるのを待つと正常に機能するようになります。element-plusのオンデマンドロードは、パッケージング後のページロードには影響しません。TUIRoomコンポーネント機能を体験します。TSプロジェクトを生成する場合は、次の事項を行う必要があります。開発環境コマンドを実行します。ブラウザでhttp://localhost:8080/のページを開きますご注意:実行中、src/TUIRoomディレクトリでeslintエラーが発生した場合、.eslintignoreファイルに/src/TUIRoomのパスを追加すると、eslintチェックをブロックできます。TUIRoomコンポーネント機能を体験します。build説明:実際のパッケージコマンドについてはpackage.jsonファイルをご確認ください。distファイルのサーバーへのデプロイご注意:本番環境ではHTTPSドメイン名を使用する必要があります。APITUIRoomインターフェースinitTUIRoomデータを初期化します。TUIRoomを使用するすべてのユーザーはinitメソッドを呼び出してください。TUIRoomRef.value.init(roomData);パラメータは下表に示すとおりです。パラメータタイプ意味roomDataobject﻿roomData.sdkAppIdnumberお客様のSDKAppIdroomData.userIdstringユーザーの唯一IDroomData.userSigstringユーザーのUserSigroomData.userNamestringユーザーのニックネームroomData.userAvatarstringユーザーのプロフィール写真roomData.shareUserIdstring非必須。ユーザーが画面共有を行うUserIdです。shareUserId=share_${userId}が要求され、画面共有機能がない場合は渡されませんroomData.shareUserSigstring非必須。ユーザーが画面共有を行うUserSigcreateRoomキャスターがルームを作成します。roomParam);パラメータは下表に示すとおりです。パラメータタイプ意味roomIdnumberルームIDroomModestringルームモードです。'FreeSpeech'(自由発言モード)と'ApplySpeech'(举手発言モード)を含み、デフォルトは'FreeSpeech'です。現在、自由発言モードだけをサポートしますroomParamObject非必須roomParam.isOpenCamerastring非必須。入室はカメラをオンにするかどうか。デフォルトはオフですroomParam.isOpenMicrophonestring非必須。入室はマイクをオンにするかどうか。デフォルトはオフですroomParam.defaultCameraIdstring非必須。デフォルトはカメラ装置のIDroomParam.defaultMicrophoneIdstring非必須。デフォルトはマイク装置のIDroomParam.defaultSpeakerIdString非必須。デフォルトはスピーカー装置のIDenterRoom一般メンバーがルームに参加します。roomParam);パラメータは下表に示すとおりです。パラメータタイプ意味roomIdnumberルームIDroomParamObject非必須roomParam.isOpenCamerastring非必須。入室はカメラをオンにするかどうか。デフォルトはオフですroomParam.isOpenMicrophonestring非必須。入室はマイクをオンにするかどうか。デフォルトはオフですroomParam.defaultCameraIdstring非必須。デフォルトはカメラ装置のIDroomParam.defaultMicrophoneIdstring非必須。デフォルトはマイク装置のIDroomParam.defaultSpeakerIdString非必須。デフォルトはスピーカー装置のIDTUIRoomイベントonRoomCreateルーム作成のコールバック。TUIRoomコンポーネントをインポートします。}</script>onRoomEnter入室コールバック。TUIRoomコンポーネントをインポートします。}</script>onRoomDestoryキャスターがルームを廃棄する通知。TUIRoomコンポーネントをインポートします。}</script>onRoomExit一般メンバーが退室する通知。TUIRoomコンポーネントをインポートします。}</script>onKickOff一般メンバーがキャスターにルームからキックアウトされたときの通知です。TUIRoomコンポーネントをインポートします。