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

[アーティクル]
11/10/2024

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

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

重要

Azure Communication Services のインライン画像を送信するための機能は、現在プレビュー段階です。

プレビューの API と SDK は、サービスレベルアグリーメントなしに提供されます。運用環境のワークロードには使用しないことをお勧めします。一部の機能はサポート対象ではなく、機能が制限されることがあります。

詳細については、「Microsoft Azure プレビューの追加利用規約」を確認してください。

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

このチュートリアルのコードには 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 からサンプルアプリにアクセスできるようになります。

Azure Communication Services UI ライブラリを示すスクリーンショット。

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

2 つのインライン画像を受信する Azure Communication Services UI ライブラリを示すスクリーンショット。

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

2 つのインライン画像を送信し、メッセージを編集する Azure Communication Services UI ライブラリを示すスクリーンショット。

既知の問題

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

次のステップ

UI ライブラリのその他の部分を確認する

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

次の方法で共有