Integrar o Serviço de Chamadas do Azure Communication Services em um aplicativo React

Neste exercício, você adicionará a composição de chamada da interface do usuário do ACS a 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.

ACS no React

Visite o GitHub e entre. Se você ainda não tiver uma conta do GitHub, poderá selecionar a opção Inscrever-se para criar uma.
Visite o Repositório GitHub do Microsoft Cloud.
Selecione a opção Fork para adicionar o repositório à sua organização/conta do GitHub desejada.
Execute o comando a seguir para clonar esse repositório em seu computador. Substitua <YOUR_ORG_NAME> pelo nome da sua organização/conta do GitHub.
```
git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud
```
Abra a pasta do projeto samples/acs-to-teams-meeting no Visual Studio Code.
Expanda a pasta cliente/react .
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
```
Verifique se você tem o npm 10 ou superior instalado abrindo uma janela do terminal e executando o seguinte comando:
```
npm --version
```
Dica

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.
Abra uma janela de terminal e execute o npm install comando na pasta react para instalar as dependências do aplicativo.
Abra App.tsx e reserve um momento para explorar as importações na parte superior do arquivo. Eles controlam a importação de símbolos de segurança e chamada de áudio/vídeo do ACS que serão utilizados 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 posteriormente neste exercício. Ele fornece a funcionalidade central da interface do usuário dos Serviços de Comunicação do Azure para habilitar a realização de chamadas de áudio/vídeo do aplicativo em uma reunião do Microsoft Teams.
Localize o App componente e execute as seguintes tarefas:
- Reserve um momento para examinar as useState definições no componente.
- Substitua as aspas userIduseState vazias da função pelo valor de identidade do usuário do ACS copiado no exercício anterior.
- Substitua as aspas tokenuseState vazias da função pelo valor do token ACS copiado no exercício anterior.
- Substitua as aspas teamsMeetingLinkuseState vazias da 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 os valores userId, token e teamsMeetingLink dinamicamente.
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 usados para fazer uma chamada de áudio/vídeo. Observe que ela 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 nesse cenário porque só queremos que o AzureCommunicationTokenCredential objeto e os args do adaptador de chamada sejam criados uma vez que os parâmetros necessários sejam passados. Veja detalhes adicionais sobre useMemo aqui.
Quando os elementos credentials e callAdapterArgs estiverem prontos, a linha a seguir tratará da criação de um adaptador de chamada ACS utilizando o gancho React fornecido pelo ACS. O callAdapter objeto será usado posteriormente no componente composto de chamada da interface do usuário.
```
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
```
Observação

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

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 código na função conforme mostrado a seguir useEffect. 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();

    */
}, []);

Localize o código JSX a seguir. 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>
    );
}
```
Salve o arquivo antes de continuar.
Execute npm start na janela do terminal para executar o aplicativo. Verifique se você executa o comando dentro da pasta react .
Depois da compilação dos aplicativos, você verá a interface de chamadas exibida. Habilite a seleção do microfone e da câmera e inicie a chamada. Você verá que está em uma sala de espera. Se você participar da reunião configurada anteriormente no Microsoft Teams, poderá permitir que o convidado entre na reunião.
Pressione Ctrl + C para interromper o aplicativo. Agora que você o executou com êxito, vamos explorar como você pode obter dinamicamente a identidade e o token do usuário do ACS e criar automaticamente uma reunião do Microsoft Teams e retornar a URL de junção usando o Microsoft Graph.

Próxima Etapa

Criar dinamicamente uma reunião do Microsoft Teams usando o Microsoft Graph

Comentários

Esta página foi útil?

Last updated on 2025-06-12

Compartilhar via

Integrar o Serviço de Chamadas do Azure Communication Services em um aplicativo React

Próxima Etapa

Comentários

Recursos adicionais