Integrar chamadas dos Serviços de Comunicação do Azure em um aplicativo React

Neste exercício, você adicionará o composto de chamada da interface do usuário do ACS em um aplicativo React para habilitar a realização de chamadas de áudio/vídeo de um aplicativo personalizado em uma reunião do Microsoft Teams.

1. Visite o GitHub e faça login. Se você ainda não tiver uma conta no GitHub, poderá selecionar a opção Inscrever-se para criar uma.

2. Visite o repositório GitHub da Microsoft Cloud.

3. Selecione a opção Fork para adicionar o repositório à sua organização/conta desejada do GitHub.

   

4. Execute o seguinte comando para clonar este repositório para a sua máquina. Substitua <YOUR_ORG_NAME> pelo nome da sua organização/conta do GitHub.

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

5. Abra a pasta do projeto samples/acs-to-teams-meeting no Visual Studio Code.

6. Expanda a pasta client/react.

7. Abra o arquivo package.json no VS Code e observe que os seguintes pacotes ACS estão incluídos:

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

8. Verifique se você tem o npm 10 ou superior instalado abrindo uma janela do terminal e executando o seguinte comando:

   npm --version
   

   Sugestão

   Se você não tiver o npm 10 ou superior instalado, poderá atualizar o npm para a versão mais recente executando npm install -g npm.

9. Abra uma janela do terminal e execute o npm install comando na pasta react para instalar as dependências do aplicativo.

10. Abra App.tsx e reserve um momento para explorar as importações na parte superior do arquivo. Eles lidam com a importação de símbolos de segurança ACS e chamadas de áudio/vídeo que serão usados no aplicativo.

    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';
    

    Observação

    Você verá como o CallComposite componente é usado mais adiante neste exercício. Ele fornece a funcionalidade principal da interface do usuário para os Serviços de Comunicação do Azure para permitir fazer uma chamada de áudio/vídeo do aplicativo em uma reunião do Microsoft Teams.

11. Localize o App componente e execute as seguintes tarefas:

    • Reserve um momento para examinar as useState definições no componente.
    • Substitua as aspas vazias da userIduseState função pelo valor de identidade do usuário ACS copiado no exercício anterior.
    • Substitua as aspas vazias da função tokenuseState pelo valor do token ACS copiado no exercício anterior.
    • Substitua as aspas vazias da teamsMeetingLinkuseState função pelo valor do link de reunião do Teams copiado no exercício anterior.

    // 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>('');
    

    Observação

    Mais adiante neste tutorial, você verá como recuperar o userId, tokene teamsMeetingLink valores dinamicamente.

12. Reserve um momento para explorar as useMemo funções no App componente.

    • A credentialuseMemo função cria uma nova AzureCommunicationTokenCredential instância quando o token tem um valor.
    • A callAdapterArgsuseMemo função retorna um objeto que tem os argumentos que são usados para fazer uma chamada de áudio/vídeo. Observe que usa os valores userId, credential e teamsMeetingLink nos argumentos de chamada do 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]);
    

    Observação

    useMemo é usado neste cenário porque só queremos que o AzureCommunicationTokenCredential objeto e o adaptador de chamada args sejam criados uma vez à medida que os parâmetros necessários são passados. Veja detalhes adicionais sobre useMemo aqui.

13. Quando o credentials e callAdapterArgs estiverem prontos, a linha a seguir trata da criação de um adaptador de chamada ACS usando o useAzureCommunicationCallAdapter gancho React fornecido pelo ACS. O callAdapter objeto será usado posteriormente na interface do usuário chamando o componente composto.

    const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
    

    Observação

    Como useAzureCommunicationCallAdapter é um hook do React, ele não atribuirá um valor a callAdapter até que o valor de callAdapterArgs seja válido.

14. Anteriormente, você atribuiu a identidade do usuário, o token e o link de reunião do Teams aos valores de estado no App componente. Isso funciona bem por enquanto, mas em um exercício posterior você verá como recuperar dinamicamente esses valores. Como você definiu os valores anteriormente, comente o useEffect código na função como mostrado a seguir. Depois de executar o Azure Functions nos próximos exercícios, você revisitará esse código.

    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. Localize o seguinte código JSX. Ele usa o CallComposite símbolo que você viu importado para renderizar a interface do usuário usada para fazer uma chamada de áudio/vídeo do aplicativo React em uma reunião do Teams. O callAdapter que você explorou anteriormente é passado para sua adapter propriedade para fornecer os argumentos necessários.

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

16. Salve o arquivo antes de continuar.

17. Execute npm start na janela do terminal para executar o aplicativo. Certifique-se de executar o comando dentro da pasta react .

18. Após as compilações das aplicações, deverá ver uma interface de chamada do utilizador exibida. Ative a seleção do microfone e da câmera e inicie a chamada. Você deve ver que você está colocado em uma sala de espera. Se participar na reunião que configurou anteriormente no Microsoft Teams, pode permitir que o convidado entre na reunião.

19. Pressione Ctrl + C para parar o aplicativo. Agora que você o executou com êxito, vamos explorar como você pode obter dinamicamente a identidade de usuário e o token do ACS e criar automaticamente uma reunião do Microsoft Teams e retornar a URL de ingresso usando o Microsoft Graph.

Próximo Passo