通話エクスペリエンスを拡張する
Microsoft Teams Virtual Appointment Booking または Microsoft Graph Virtual Appointment API を使って作成された、そのまま使用できる仮想予定エクスペリエンスを使って、コンシューマーは仮想予定の Microsoft でホストされた仮想予定エクスペリエンスに参加できます。 Microsoft Teams Premium をお持ちの場合は、エクスペリエンス全体で使われる画像、ロゴ、色を選べる会議テーマを使って、エクスペリエンスをさらにカスタマイズできます。 Azure Communication Services は、ソリューションをセルフホストしたり、エクスペリエンスをカスタマイズしたりすることを望む開発者の役に立ちます。
Azure Communication Services には、次の 3 つのカスタマイズ オプションが用意されています。
- すぐに使用できるユーザー インターフェイスの複合を使って、ユーザー インターフェイスをカスタマイズします。
- UI ライブラリのコンポーネントと複合を使って、独自のレイアウトを構築します。
- ソフトウェア開発キットを使用して独自のユーザー インターフェイスを構築します
[前提条件]
この記事を読むには、次のトピックを理解している必要があります。
カスタマイズ可能なすぐに使用できるユーザー インターフェイスの複合
Azure Communication Service のユーザー インターフェイス ライブラリによって提供される、すぐに使用できる会議複合を統合できます。 この複合は、Web アプリケーションに統合できるすぐに使える React コンポーネントを提供します。 さまざまな Web フレームワークでのこの複合の使用について詳しくは、こちらをご覧ください。
- まず、アプリケーションのユーザーに関する詳細を指定します。 これを行うには、AzureCommunicationCallAdapterArgs を作成して、ユーザー ID、アクセス トークン、表示名、Teams 会議 URL に関する情報を保持します。
const callAdapterArgs = {
userId: new CommunicationUserIdentifier(<USER_ID>'),
displayName: “Adele Vance”,
credential: new AzureCommunicationTokenCredential('<TOKEN>'),
locator: { meetingLink: '<TEAMS_MEETING_URL>'},
endpoint: '<AZURE_COMMUNICATION_SERVICE_ENDPOINT_URL>';
}
- useAzureCommunicationCallAdapter を使ってカスタム React フックを作成し、通話アダプターを作成します。
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
- 会議エクスペリエンスを提供する React コンポーネント CallComposite を返します。
return (
<div>
<CallWithChatComposite
adapter={callAdapter}
/>
</div>
);
さらに、カスタマイズとブランド化のために独自のテーマを使ってユーザー インターフェイスをカスタマイズしたり、デスクトップまたはモバイル用のレイアウトを最適化したりできます。 レイアウトをさらにカスタマイズする場合は、後のセクションで説明するように、既存のユーザー インターフェイス コンポーネントを利用できます。
ユーザー インターフェイス コンポーネントを使用して独自のレイアウトを構築する
Azure Communication Services ユーザー インターフェイス ライブラリを使うと、個々のコンポーネントにアクセスして、そのユーザー インターフェイスとその動作をカスタマイズできます。 次の図では、使用できる個々のコンポーネントがはっきりわかるように示されています。
次の表では、個々のコンポーネントについて詳しく説明します。
| コンポーネント | 説明 |
|---|---|
| Grid レイアウト | ビデオ タイルを NxN のグリッドに整理するためのグリッド コンポーネント |
| ビデオ タイル | 使用可能な場合はビデオ ストリームを表示し、ない場合は既定の静的コンポーネントを表示するコンポーネント |
| コントロール バー | ミュートや共有画面など、特定の呼び出しアクションに接続するための DefaultButtons を整理するためのコンテナー |
| ビデオ ギャラリー | 参加者が増える度に動的に変更されるターンキーのビデオ ギャラリー コンポーネント |
チャット エクスペリエンスをカスタマイズすることもできます。 次の図では、チャットの個々のコンポーネントがはっきりわかるように示されています。
次の表では、説明と個々のコンポーネントへのリンクを示します
| コンポーネント | 説明 |
|---|---|
| メッセージ スレッド | チャット メッセージ、システム メッセージ、カスタム メッセージを表示するコンテナー |
| 送信ボックス | 不連続な [送信] ボタンを持つテキスト入力コンポーネント |
| メッセージの状態インジケーター | 送信されたメッセージの状態を示す複数状態メッセージ ステータス インジケーター コンポーネント |
| 入力インジケーター | スレッドで現在入力中の参加者を表示するテキスト コンポーネント |
コントロール バー コンポーネントを使って、カメラとマイクのボタンのみをこの順序で表示し、それらのボタンが選ばれた後で実行されるアクションを制御する方法を見てみましょう。
export const AllButtonsControlBarExample: () => JSX.Element = () => {
return (
<FluentThemeProvider>
<ControlBar layout={'horizontal'}>
<CameraButton
onClick={() => { /*handle onClick*/ }}
/>
<MicrophoneButton
onClick={() => { /*handle onClick*/ }}
/>
</ControlBar>
</FluentThemeProvider>
)}
さらにカスタマイズするには、他の定義済みボタンを追加したり、その色、アイコン、または順序を変更したりできます。 既存のユーザー インターフェイス コンポーネントを使用したり、エクスペリエンスをさらに細かく制御したりしたい場合は、基になるソフトウェア開発キット (SDK) を使って、独自のユーザー インターフェイスを構築できます。
ソフトウェア開発キットを使用して独自のユーザー インターフェイスを構築する
Azure Communication Services では、仮想予定エクスペリエンスを構築するためのチャットと通話の SDK が提供されています。 このエクスペリエンスは、認証、通話、チャットという 3 つの主要部分で構成されています。 それぞれに専用のクイックスタートと GitHub サンプルがありますが、以下のコード サンプルではエクスペリエンスを有効にする方法を示します。 ユーザーの認証には、Azure Communication Services のユーザーを作成するか既存ユーザーを選択して、トークンを発行する必要があります。 接続文字列を使って CommunicationIdentityClient を作成できます。 connectionstring をクライアントと共有するのは安全ではないので、このロジックはバックエンドで実装することをお勧めします。
var client = new CommunicationIdentityClient(connectionString);
CreateUserAsync メソッドを使って、Azure Communication Services リソースに関連付けられている Azure Communication Services ユーザーを作成します。
var identityResponse = await client.CreateUserAsync();
var identity = identityResponse.Value;
チャットと通話のスコープで、Azure Communication Services ユーザーに関連付けられたアクセス トークンを発行します。
var tokenResponse = await client.GetTokenAsync(identity, scopes: new [] { CommunicationTokenScope.VoIP, CommunicationTokenScope.Chat });
var token = tokenResponse.Value.Token;
これで、有効な Azure Communication Services ユーザーと、このユーザーに割り当てられたアクセス トークンを用意できました。 これで、通話エクスペリエンスを統合できます。 この部分はクライアント側で実装します。この例では、プロパティがバックエンドからクライアントに伝達されていると仮定します。 それを行う方法は、次のチュートリアルで示されています。 最初に、SDK を開始して CallAgent とデバイス マネージャーにアクセスできるようにする CallClient を作成します。
const callClient = new CallClient();
Create CallAgent from the client and define the display name of the user.
tokenCredential = new AzureCommunicationTokenCredential(token);
callAgent = await callClient.createCallAgent(tokenCredential, {displayName: 'Adele Vance'})
Teams 会議 URL に基づいて、仮想予定に関連付けられている Microsoft Teams 会議に参加します。
var meetingLocator = new TeamsMeetingLinkLocator("<TEAMS_MEETING_URL>");
callAgent.join(meetingLocator , new JoinCallOptions());
これらの手順を使って、Teams 会議に参加できます。 その後、スピーカー、マイク、カメラ、個々のビデオ ストリームの管理を使って、これらの手順を拡張できます。 その後、必要に応じて、仮想予定エクスペリエンスにチャットを統合することもできます。
SDK を開始して通知と ChatThreadClient にアクセスできるようにする ChatClient を作成します。
const chatClient = new ChatClient(
endpointUrl,
new AzureCommunicationTokenCredential(token)
);
Azure Communication Services ユーザーに対するリアルタイム チャット通知の受信をサブスクライブします。
await chatClient.startRealtimeNotifications();
メッセージを受信したときのイベントをサブスクライブします。
// subscribe to new message notifications
chatClient.on("chatMessageReceived", (e) => { /*Render message*/})
特定のチャット スレッドに関連する操作用にクライアントを開始する ChatThreadClient を作成します。
chatThreadClient = await chatClient.getChatThreadClient(threadIdInput.value);
仮想予定に関連付けられている Teams 会議チャットでチャット メッセージを送信します。
let sendMessageRequest = { content: 'Hello world!' };
let sendMessageOptions = { senderDisplayName : 'Adele Vance' };
let sendChatMessageResult = await chatThreadClient.sendMessage(sendMessageRequest, sendMessageOptions);
3 つのフェーズすべてに、オーディオ、ビデオ、画面共有、チャットで仮想予定に参加できるユーザーがいます。 このアプローチにより、ユーザー インターフェイスと個々のアクションの動作を完全に制御できます。
次のステップ
- 仮想予定に対する拡張オプションを学習する。
- 予定の前後をカスタマイズする方法を学習する
- 事前通話エクスペリエンスをカスタマイズする方法を学習する
- 通話エクスペリエンスをカスタマイズする方法を学習する