Teams の相互運用性チャットで UI ライブラリを使用してインライン画像を有効にする

Teams の相互運用性チャット ("相互運用チャット") では、Azure Communication Services ユーザーが Teams ユーザーによって送信されたインライン画像を受信できるようにすることができます。 リッチ テキスト エディターが有効になっている場合、Azure Communication Services ユーザーは Teams ユーザーにインライン画像を送信できます。 詳細については、「UI ライブラリのユース ケース」を参照してください。

Azure Communication Services のインライン画像を受信するための機能は、CallWithChat コンポジットによって追加のセットアップなしで利用できます。 Azure Communication Services のインライン画像を送信するための機能を有効にするには、CallWithChatCompositeOptions の下で richTextEditor を true に設定します。

コードをダウンロードする

このチュートリアルのコードには GitHub でアクセスしてください。

前提条件

• アクティブなサブスクリプションが含まれる Azure アカウント。 詳細については、アカウントの無料作成に関するページを参照してください。
• サポートされているプラットフォームのいずれかにインストールされた Visual Studio Code。
• Node.js、アクティブな長期サポート (LTS) バージョン、およびメンテナンス LTS バージョン。 node --version コマンドを使用して、現在のバージョンを確認してください。
• アクティブな Azure Communication Services リソースと接続文字列。 詳細については、Azure Communication Services リソースの作成に関するページを参照してください。
• UI ライブラリ バージョン 1.15.0 またはインライン画像を受信するための最新バージョン。 UI ライブラリ バージョン 1.19.0-beta.1 またはインライン画像を送信するための最新のベータ版を使用します。
• Teams 会議が作成済みで、会議リンクが準備済みであること。
• ChatWithChat コンポジットのしくみを理解していること。

背景

まず第一に、Teams の相互運用性チャットが現在 Teams 会議に参加している必要があります。 Teams ユーザーがオンライン会議を作成すると、チャット スレッドが作成され、その会議に関連付けられます。 Azure Communication Services ユーザーがチャットに参加し、メッセージの送受信を開始できるようにするには、会議の参加者 (Teams ユーザー) が最初にそれらのユーザーの通話への参加を許可する必要があります。 それ以外の場合は、チャットにアクセスできません。

Azure Communication Services ユーザーは、通話が許可されると、通話のその他の参加者とのチャットを開始できるようになります。 このチュートリアルでは、相互運用性チャット内でインライン画像を送受信するための機能がどのように機能するかを学習します。

概要

最初に Teams 会議に参加する必要があるため、UI ライブラリの ChatWithChat コンポジットを使用する必要があります。

ストーリーブック ページの基本的な例に従って、ChatWithChat コンポジットを作成してみましょう。

サンプル コードでは、次のコード スニペットとして定義されている CallWithChatExampleProps が必要です。

export type CallWithChatExampleProps = {
  // Props needed for the construction of the CallWithChatAdapter
  userId: CommunicationUserIdentifier;
  token: string;
  displayName: string;
  endpointUrl: string;
  locator: TeamsMeetingLinkLocator | CallAndChatLocator;

  // Props to customize the CallWithChatComposite experience
  fluentTheme?: PartialTheme | Theme;
  compositeOptions?: CallWithChatCompositeOptions;
  callInvitationURL?: string;
};

インライン画像の受信を有効にするためには、特定のセットアップは必要ありません。 ただし、インライン画像を送信するには、CallWithChatExampleProps を通して richTextEditor 関数を有効にする必要があります。 これを有効にする方法についてのコード スニペットを以下に示します。

<CallWithChatExperience
  // ...any other call with chat props
  compositeOptions={{ richTextEditor: true }}
/>

会議チャットのコンポジットを開始するには、次のように TeamsMeetingLinkLocator を渡す必要があります。

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

その他のセットアップは必要ありません。

コードの実行

npm run start を実行してみましょう。 すると、localhost:3000 からサンプル アプリにアクセスできるようになります。

ペインの下部にあるチャット ボタンを選択して、チャット ペインを開きます。 この状態で、Teams ユーザーが画像を送信すると、自分の画面が次のスクリーンショットのようになるはずです。

インライン画像を送信する機能が有効になっている場合は、次のスクリーンショットのようなものが表示されるはずです。

既知の問題

• 現時点で、UI ライブラリでは特定の GIF 画像がサポートされていない場合があります。 代わりに、ユーザーは静的イメージを受信する可能性があります。
• 現時点で、Web UI ライブラリでは Teams ユーザーから送信されたクリップ (短いビデオ) はサポートされていません。
• 特定の Android デバイスでは、単一画像を貼り付けるには、リッチ テキスト エディターを押しながら [貼り付け] を選択する必要があります。 キーボードを使用したクリップボード ビューからの選択はサポートされていない場合があります。

次のステップ

次の記事もご覧ください。

• UI ライブラリのユース ケースを確認する
• チャットをアプリに追加する
• ユーザー アクセス トークンを作成する
• クライアントとサーバーのアーキテクチャについて学習する
• 認証について学習する
• Azure Communication Services Chat で UI ライブラリを使用してファイル共有を追加する
• Teams の相互運用性チャットで UI ライブラリを使用してファイル共有を追加する