다음을 통해 공유

React 앱에 Azure Communication Services 호출 통합

이 연습에서는 ACS UI 통화 복합을 React 앱에 추가하여 사용자 지정 앱에서 Microsoft Teams 모임으로 오디오/비디오 호출을 수행할 수 있도록 합니다.

React의 ACS

  1. GitHub를 방문하여 로그인합니다. GitHub 계정이 아직 없는 경우 등록 옵션을 선택하여 만들 수 있습니다.

  2. Microsoft Cloud GitHub 리포지토리를 방문하세요.

  3. 포크 옵션을 선택하여 원하는 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을 실행npm install -g 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 함수를 살펴보십시오.

    • 이 함수는 credentialuseMemo 토큰에 값이 있으면 새 AzureCommunicationTokenCredential 인스턴스를 만듭니다.
    • 이 함수는 callAdapterArgsuseMemo 오디오/비디오 호출에 사용되는 인수가 있는 개체를 반환합니다. userId, credential, 및 teamsMeetingLink 값을 ACS 호출 인수에서 사용하는 것을 주의하십시오.
    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 준비가 되면 다음 줄은 ACS에서 제공하는 React 후크를 사용하여 useAzureCommunicationCallAdapter ACS 호출 어댑터를 만드는 것을 처리합니다. callAdapter 개체는 나중에 UI에서 복합 구성 요소를 호출할 때 사용됩니다.

    const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);

    비고

    useAzureCommunicationCallAdapter는 React 후크이므로, callAdapter 값이 유효할 때까지 callAdapterArgs에 값을 할당하지 않습니다.

  14. 이전에 구성 요소의 상태 값에 사용자 ID, 토큰 및 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 코드를 찾습니다. 사용자가 React 앱에서 Teams 회의로 오디오/비디오 통화를 걸 때 사용하는 사용자 인터페이스를 렌더링하기 위해 가져온 CallComposite 기호를 사용합니다. 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