共用方式為

將 Azure 通訊服務通話整合到 React 應用程式中

在本練習中，您會將 ACS UI 通話複合 新增至 React 應用程式中，以啟用從自定義應用程式進行音訊/視訊通話至 Microsoft Teams 會議。

React 中的 ACS

  1. 請流覽 GitHub 並登入。 如果您還沒有 GitHub 帳戶，您可以選取 [ 註冊 ] 選項來建立帳戶。

  2. 請流覽 Microsoft Cloud GitHub 存放庫。

  3. 選取 [分支 ] 選項，將存放庫新增至您想要的 GitHub 組織/帳戶。

    分叉存放庫

  4. 執行下列命令，將此存放庫複製到您的電腦。 以您的 GitHub 組織/帳戶名稱取代 <YOUR_ORG_NAME> 。

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

  5. 在 Visual Studio Code 中開啟 samples/acs-to-teams-meeting 項目資料夾。

  6. 展開 client/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 元件的使用方式。 它提供 Azure 通訊服務的核心 UI 功能，讓從應用程式進行音訊/視訊通話至 Microsoft Teams 會議。

  11. App找出元件並執行下列工作：

    • 花點時間檢查 useState 元件中的定義。
    • 將userIduseState函數中的空白引號替換為您在上一個練習中複製的 ACS 用戶識別值。
    • 將函式 tokenuseState 的空引號替換為您在上一個練習中複製的 ACS 令牌值。
    • 將函式 teamsMeetingLinkuseState 的空白引號取代為您在上一個練習中複製的 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 函式。

    • 此 credentialuseMemo 函式會在令牌具有值之後建立新的 AzureCommunicationTokenCredential 實例。
    • 函 callAdapterArgsuseMemo 式會傳回 物件，該物件具有用來進行音訊/視訊呼叫的自變數。 請注意，這是在 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 在傳入必要的參數時建立 對象和呼叫配接器自變數一次。 請在這裡檢視 useMemo 的其他詳細數據。

  13. credentials和callAdapterArgs準備就緒後，以下程式碼行會使用useAzureCommunicationCallAdapter ACS 提供的 React Hook 來建立 ACS 通話配接器。 稍後在使用者介面呼叫複合元件時將使用callAdapter物件。

    const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);

    備註

    因為 useAzureCommunicationCallAdapter 是 React 鉤子，所以在callAdapter 的值有效之前，不會將值指派給 callAdapterArgs 。

  14. 稍早您已將使用者身分識別、令牌和 Teams 會議連結指派給元件中的 App 狀態值。 這目前正常運作，但在稍後的練習中，您將瞭解如何動態擷取這些值。 由於您稍早設定值，因此請將函式中的 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. 應用程式完成建置之後，您應該會看到顯示的呼叫用戶界面。 啟用並選擇您的麥克風和相機，並發起通話。 您應該會看到您被安置在候診室。 如果您加入稍早在 Microsoft Teams 中設定的會議，則可以允許來賓進入會議。

  19. 按 Ctrl + C 以停止應用程式。 既然您已成功執行它，讓我們來探索如何動態取得 ACS 使用者身分識別和令牌，並自動建立Microsoft Teams 會議，並使用 Microsoft Graph 傳回加入 URL。

後續步驟

使用 Microsoft Graph 動態建立 Microsoft Teams 會議

  • Last updated on