次の方法で共有

Azure Communication Services 呼び出しを React アプリに統合する

この演習では、カスタム アプリから Microsoft Teams 会議に音声/ビデオ通話を行えるように、ACS UI コーリングコンポジット を React アプリに追加します。

React の ACS

  1. GitHub にアクセスしてサインインします。 GitHub アカウントをまだお持ちでない場合は、[ サインアップ ] オプションを選択して作成できます。

  2. Microsoft Cloud GitHub リポジトリにアクセスします。

  3. Fork オプションを選択して、目的の GitHub 組織/アカウントにリポジトリを追加します。

    リポジトリをフォークする

  4. 次のコマンドを実行して、このリポジトリをマシンに複製します。 <YOUR_ORG_NAME>を GitHub の組織/アカウント名に置き換えます。

    git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud

  5. Visual Studio Code で サンプル/acs-to-teams-meeting プロジェクト フォルダーを開きます。

  6. クライアント/react フォルダーを展開します。

  7. VS Code で package.json ファイルを開き、次の ACS パッケージが含まれていることに注意してください。

    @azure/communication-common 
@azure/communication-react

  8. ターミナル ウィンドウを開き、次のコマンドを実行して 、npm 10 以上がインストールされていることを再確認します。

    npm --version

    ヒント

    npm 10 以上がインストールされていない場合は、npm install -g npmを実行して npm を最新バージョンに更新できます。

  9. ターミナル ウィンドウを開き、npm install フォルダーで コマンドを実行して、アプリケーションの依存関係をインストールします。

  10. App.tsx を開き、ファイルの先頭にあるインポートを調べるのに少し時間がかかります。 これらは、アプリで使用される ACS セキュリティおよびオーディオ/ビデオ呼び出しシンボルのインポートを処理します。

    import { 
    AzureCommunicationTokenCredential,
    CommunicationUserIdentifier 
} from '@azure/communication-common';
import {  
  CallComposite, 
  fromFlatCommunicationIdentifier, 
  useAzureCommunicationCallAdapter 
} from '@azure/communication-react';
import React, { useState, useMemo, useEffect } from 'react';
import './App.css';

    注

    CallComposite コンポーネントの使用方法については、この演習の後半で説明します。 アプリからMicrosoft Teams会議への音声/ビデオ通話を可能にする Azure Communication Services の主要な UI 機能を提供します。

  11. App コンポーネントを見つけて、次のタスクを実行します。

    • 少し時間を取って、コンポーネント内の useState 定義を調べます。
    • userId useState関数の空の引用符を、前の演習でコピーした ACS ユーザー ID 値に置き換えます。
    • token useState関数の空の引用符を、前の演習でコピーした ACS トークン値に置き換えます。
    • teamsMeetingLink useState関数の空の引用符を、前の演習でコピーした Teams 会議リンクの値に置き換えます。
    // Replace '' with the ACS user identity value
const [userId, setUserId] = useState<string>('');

// Replace '' with the ACS token value
const [token, setToken] = useState<string>('');

// Replace '' with the Teams meeting link value
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');

    注

    このチュートリアルの後半では、 userId、 token、および teamsMeetingLink の値を動的に取得する方法について説明します。

  12. 少し時間を取って、useMemo コンポーネントのApp関数を調べてみましょう。

    • credential useMemo関数は、トークンに値が設定されると、新しいAzureCommunicationTokenCredential インスタンスを作成します。
    • callAdapterArgs useMemo関数は、オーディオ/ビデオ呼び出しを行うために使用される引数を持つオブジェクトを返します。 ACS 呼び出し引数の userId、 credential、および teamsMeetingLink の値が使用されていることに注意してください。
    const credential = useMemo(() => {
    if (token) {
        return new AzureCommunicationTokenCredential(token)
    }
    return;
}, [token]);

const callAdapterArgs = useMemo(() => {
    if (userId && credential && displayName && teamsMeetingLink) {
        return {
            userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,
            displayName,
            credential,
            locator: { meetingLink: teamsMeetingLink },
        }
    }
    return {};
}, [userId, credential, displayName, teamsMeetingLink]);

    注

    useMemo は、必要なパラメーターが渡されるときに、 AzureCommunicationTokenCredential オブジェクトと呼び出しアダプターの引数を 1 回だけ作成する必要があるため、このシナリオで使用されます。 useMemo に関するその他の詳細 については、こちらをご覧ください。

  13. credentialsとcallAdapterArgsの準備ができたら、次の行は ACS によって提供される useAzureCommunicationCallAdapter React フックを使用して ACS コール アダプタを作成します。 callAdapter オブジェクトは、後で複合コンポーネントを呼び出す UI で使用されます。

    const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);

    注

    useAzureCommunicationCallAdapterは React フックであるため、callAdapter値が有効になるまで、callAdapterArgsに値が割り当てられません。

  14. 以前に、 App コンポーネントの状態値へのユーザー ID、トークン、および Teams 会議リンクを割り当てた。 現時点では問題ありませんが、後の演習では、これらの値を動的に取得する方法について説明します。 前に値を設定したので、次に示すように、 useEffect 関数のコードをコメント アウトします。 次の演習で Azure Functions を実行したら、このコードを見直します。

    useEffect(() => {
    /* Commenting out for now

    const init = async () => {
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        let user = await res.json();
        setUserId(user.userId);
        setToken(user.token);

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        let link = await res.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);
    }
    init();

    */
}, []);

  15. 次の JSX コードを見つけます。 インポートした CallComposite 記号を使用して、React アプリから Teams 会議に音声/ビデオ通話を行うために使用されるユーザー インターフェイスをレンダリングします。 前に調べた callAdapter は、必要な引数を指定するために、 adapter プロパティに渡されます。

    if (callAdapter) {
    return (
        <div>
            <h1>Contact Customer Service</h1>
            <div className="wrapper">
                <CallComposite
                    adapter={callAdapter} 
                />
            </div>
        </div>
    );
}

  16. 続行する前にファイルを保存します。

  17. ターミナル ウィンドウで npm start を実行して、アプリケーションを実行します。 react フォルダー内でコマンドを実行していることを確認します。

  18. アプリケーションがビルドされると、呼び出し元の UI が表示されます。 マイクとカメラの選択を有効にして、通話を開始します。 待合室に配置されていることがわかります。 Microsoft Teamsで前に設定した会議に参加する場合は、ゲストに会議への参加を許可できます。

  19. Ctrl + C キーを押してアプリケーションを停止します。 これで正常に実行できたので、ACS ユーザー ID とトークンを動的に取得し、Microsoft Teams会議を自動的に作成し、Microsoft Graph を使用して参加 URL を返す方法について説明します。

次の手順

Microsoft Graph を使用してMicrosoft Teams会議を動的に作成する

  • Last updated on