次の方法で共有

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

  • [アーティクル]

Teamsの 相互運用性チャット ("相互運用チャット") では、Azure Communication Service のエンド ユーザーが Teams ユーザーによって送信されたインライン イメージを受信できるようにします。 現在、Azure Communication Service エンド ユーザーは、Teams ユーザーからのみインライン イメージを受信できます。 詳細については、「UI ライブラリのユース ケース」を参照してください。

重要

インライン イメージ機能には、追加のセットアップなしで CallWithChat コンポジットが付属しています。

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

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

前提条件

背景

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

Azure Communication Service エンド ユーザーが通話を許可されると、通話中に他の参加者とチャットを開始できるようになります。 このチュートリアルでは、相互運用チャットでインライン イメージがどのように機能するかを確認します。

概要

前述のように、最初に Teams 会議に参加する必要があるため、UI ライブラリから ChatWithChat Composite を使用する必要があります。

ストーリーブック ページの基本的な例に従って、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;
};

会議チャット用の複合を開始できるようにするには、次のように TeamsMeetingLinkLocator を渡す必要があります。

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

必要なものはこれですべてです。特にインライン イメージを有効にするために、他のセットアップは必要ありません。

コードの実行

npm run start を実行してみましょう。次のスクリーンショットのように localhost:3000 を使ってサンプル アプリにアクセスできるようになります。

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

下部にあるチャット ボタンをクリックするだけで、チャット パネルが表示されます。Teams ユーザーがイメージを送信すると、次のスクリーンショットのようなものが表示されます。

2 つのインライン イメージを受け取る Azure Communication Services UI ライブラリのスクリーンショット。

Teams 相互運用チャットでは、現在、Teams ユーザーが送信したインライン イメージを受信するできるのは、Azure Communication Service エンド ユーザーのみです。 サポートされている機能の詳細については、「UI ライブラリのユース ケース」を参照してください。

既知の問題

  • 現時点では、UI ライブラリで特定の GIF イメージがサポートされない場合があります。 代わりに、ユーザーは静的イメージを受信する可能性があります。
  • 現時点では、Web UI ライブラリで Teams ユーザーから送信されたクリップ (短いビデオ) はサポートされていません。

次のステップ

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

次のことも実行できます。