Exercício - Adicionar código de chamada de voz

  • 3 minutos

Nesta unidade, você adiciona mais código ao aplicativo Web criado na unidade anterior. Este aplicativo permite que você faça chamadas de voz usando os Serviços de Comunicação do Azure.

Adicionar elementos HTML de entrada

Para fazer uma chamada, você precisa de duas informações importantes:

  1. Um token de acesso de usuário dos Serviços de Comunicação do Azure para o usuário que faz a chamada. Esse token identifica e autoriza o usuário a entrar em contato com o serviço e iniciar chamadas de voz.
  2. Quem o usuário deseja chamar (representado por uma ID de usuário dos Serviços de Comunicação do Azure).

Para obter essas informações do usuário, use algumas entradas de formulário HTML padrão. Adicione estas entradas ao nosso ficheiro index.html :

  1. Abra o arquivo index.html em um editor de texto.

  2. Adicione o seguinte HTML no corpo do arquivo HTML, após o <!-- Calling HTML here --> comentário:

    <input 
    id="token-input"
    type="text"
    placeholder="Your User access token"
/>
<button id="token-submit" type="button">
    Submit
</button>
<br /><br />
<input 
    id="callee-id-input"
    type="text"
    placeholder="Who would you like to call?"
    style="margin-bottom:1em; width: 200px; display: block;"
/>

O primeiro elemento de entrada é para o token do usuário que faz a chamada. O botão de envio é usado para instanciar alguns objetos dos Serviços de Comunicação do Azure depois que o token é fornecido. A segunda entrada é para inserir o ID de usuário da pessoa que queremos ligar.

Adicionar botões básicos de ação de chamada

Você também precisa de botões para algumas ações básicas de chamada que permitem ao usuário controlar a chamada:

  1. Iniciar chamada
  2. Desligar

Então, vamos também adicionar esses botões abaixo das entradas da etapa anterior:

<button id="call-button" type="button" disabled="true">
    Start Call
</button>
&nbsp;
<button id="hang-up-button" type="button" disabled="true">
    Hang Up
</button>

Testar o HTML

Agora que o HTML foi inserido, você concluiu a maior parte do código para este aplicativo. Se executar a aplicação introduzindo o mesmo comando a partir da unidade anterior (npx parcel index.html) e, em seguida, abrir a aplicação, deverá ver a seguinte aplicação no navegador.

Captura de ecrã da aplicação Web em branco apresentada num browser.

Este aplicativo não parece muito, mas contém todos os elementos visuais que você precisa para criar um aplicativo de chamada de voz. Agora você terminou de inserir o código HTML do seu aplicativo. O resto do código é JavaScript.

Importar algumas dependências

A primeira etapa dentro do arquivo app.js é importar as dependências para fazer chamadas dos Serviços de Comunicação do Azure. Essas dependências vêm dos SDKs instalados anteriormente usando npm. Para importá-los, adicione as seguintes linhas ao arquivo app.js :

import { CallClient } from "@azure/communication-calling";
import { AzureCommunicationTokenCredential } from '@azure/communication-common';

A primeira importação é uma CallClient para ser usada mais tarde para realmente fazer nossas chamadas. Ele lida com microfones, áudio e muito mais para você. A segunda importação, AzureCommunicationTokenCredential, é usada para lidar com os requisitos de autenticação para os Serviços de Comunicação do Azure. A autenticação garante que você saiba quem é um usuário quando ele faz uma chamada.

Obter referências ao código HTML

Anteriormente, você criou elementos HTML para os usuários usarem para controlar o aplicativo. Para ouvir o usuário interagindo com ele, você precisa obter referências aos elementos em seu JavaScript.

Você também precisa de algumas variáveis para armazenar alguns itens, que são usados em todo o nosso código. Adicione o seguinte código ao app.js após as instruções de importação:

const userToken = document.getElementById("token-input"); 
const submitToken = document.getElementById("token-submit");

const calleeInput = document.getElementById("callee-id-input");

const callButton = document.getElementById("call-button");
const hangUpButton = document.getElementById("hang-up-button");

let call;
let callAgent;
let tokenCredential;

Manipular autenticação

Agora que você concluiu algumas configurações básicas, você pode começar a criar algumas funcionalidades. A primeira coisa que você precisa funcionalmente é lidar com a autenticação. A autenticação é manipulada pelo usuário inserindo um token de usuário no elemento de entrada de token que você criou e, em seguida, clicando em seu "token de envio". Para lidar com esse processo dentro do seu código, registre um manipulador de clique para esse botão de envio de token, que processa o token de usuário. Você pode adicionar este código após as definições de variáveis da seção anterior:

submitToken.addEventListener("click", async () => {
  const callClient = new CallClient();
  const userTokenCredential = userToken.value;

  try {
    tokenCredential = new AzureCommunicationTokenCredential(userTokenCredential);
    callAgent = await callClient.createCallAgent(tokenCredential);
    callAgent.on('incomingCall', incomingCallHandler);

    callButton.disabled = false;
    submitToken.disabled = true;
  } catch(error) {
    window.alert("Please submit a valid token!");
  }
});

Este código executa as seguintes ações:

  1. Cria um cliente de chamada dos Serviços de Comunicação do Azure.
  2. Recupera o token de usuário do elemento de entrada de token e cria um AzureCommunicationTokenCredential a partir dele. Essa credencial é usada para fazer e lidar com todas as chamadas.
  3. Cria um CallAgent, que você usa para fazer e receber chamadas.
  4. Registra um manipulador de chamadas de entrada, que você escreverá em breve.
  5. Atualiza alguns dos nossos botões para que o usuário possa prosseguir.

Fazer chamadas

Agora que a autenticação está fora do caminho, você pode começar com algumas funcionalidades reais. Vamos começar permitindo que o usuário faça uma chamada:

callButton.addEventListener("click", () => {
  // start a call
  const userToCall = calleeInput.value;
  call = callAgent.startCall(
    [{ id: userToCall }],
    {}
  );

  // toggle button states
  hangUpButton.disabled = false;
  callButton.disabled = true;
});

Esse código registra um manipulador de clique no botão Iniciar chamada . Ele recupera o ID do destinatário do elemento de entrada correspondente e, em seguida, usa o Call Agent para fazer uma chamada.

Desligar

Depois que uma chamada é aberta, você precisa permitir que o usuário desligue:

hangUpButton.addEventListener("click", () => {
  // end the current call
  call.hangUp({ forEveryone: true });

  // toggle button states
  hangUpButton.disabled = true;
  callButton.disabled = false;
});

Esse código registra um manipulador de cliques no botão Desligar e, em seguida, apenas instrui a chamada a desligar.

Receba uma chamada

Agora que você pode fazer uma chamada, você também precisa lidar com o recebimento de uma chamada. Para lidar com o recebimento de uma chamada, crie o manipulador de chamadas de entrada, que foi mencionado anteriormente:

const incomingCallHandler = async (args) => {
  const incomingCall = args.incomingCall;

  // Accept the call
  await incomingCall.accept();

  // Subscribe to callEnded event and get the call end reason
  incomingCall.on('callEnded', args => {
      console.log(args.callEndReason);
  });
};

Testar o aplicativo concluído

O código JavaScript também é feito agora. Execute o aplicativo usando o mesmo comando da unidade anterior (npx parcel index.html) e, em seguida, abra o aplicativo no navegador. Agora você tem um aplicativo de chamadas básico funcional!

Obter credenciais de teste

Para testar realmente fazer uma chamada, você precisa de algumas credenciais. Você pode obter credenciais do portal do Azure. Abra seu recurso dos Serviços de Comunicação do Azure no portal do Azure e selecione Configurações>Identidades & Tokens de Acesso do Usuário no menu do serviço de comunicação:

Captura de ecrã do portal do Azure, mostrando a opção de menu Identidades & Tokens de Acesso de Utilizador realçada.

Na página exibida, você pode gerar credenciais de teste. Para este aplicativo, você só precisa da permissão de chamada de voz e vídeo (VOIP), então marque essa opção e, em seguida, selecione Gerar:

Captura de tela da janela de geração de token na qual a opção VOIP está marcada.

Você obtém uma única identidade dos Serviços de Comunicação do Azure que é adequada para teste. Certifique-se de copiar os valores de token de Identidade e Acesso de Usuário para algum lugar seguro para teste, como um documento de texto.

Captura de tela da janela de geração de token na qual as credenciais de teste são exibidas.

Se você quiser tentar chamar outro usuário, gere um conjunto extra de credenciais selecionando Gerar novamente. Novos valores são criados nos campos Identidade e Token de Acesso do Usuário.

O primeiro conjunto de credenciais é usado para o usuário chamador e o segundo conjunto é usado para o usuário recetor.

Em um aplicativo do mundo real, você deve usar os sistemas de identidade e bibliotecas de cliente para criar e armazenar essas credenciais. Dessa forma, um usuário do mundo real não precisa copiar e inserir manualmente esses itens. Para mais informações sobre este conceito, abra os links no final deste módulo.

Ligue para o Echo Bot

Os Serviços de Comunicação do Azure têm um Echo Bot, que pode chamar para testar o microfone. Echo Bot é compatível com este aplicativo. Para chamar o Echo Bot:

  1. Abra o aplicativo em seu navegador.
  2. Cole um token salvo no elemento de entrada do token do usuário.
  3. Selecione o botão Submeter.
  4. Insira o ID de usuário do Echo Bot (8:echo123).
  5. Selecione Iniciar chamada.

Seu navegador pode solicitar algumas caixas de diálogo de permissão de microfone, portanto, certifique-se de aceitá-las. Se tudo funcionar corretamente, você deve estar em uma chamada com o Echo Bot. O bot permite que você grave uma mensagem curta, que ele então reproduz para você.

Ligar para outro usuário

Você também pode chamar outro usuário usando este aplicativo. Essa ação requer um segundo conjunto de credenciais, que você gerou anteriormente. Siga estes passos:

  1. Abra duas cópias do aplicativo. Use várias guias ou janelas para simular a chamada de outro usuário.
  2. Na primeira cópia, insira o primeiro token de usuário salvo do gerador de credenciais e selecione Enviar.
  3. Na segunda cópia, insira o segundo token de usuário salvo do gerador de credenciais e selecione Enviar.
  4. Retorne à primeira cópia e, em seguida, insira o segundo ID de usuário no elemento de entrada Quem você gostaria de chamar? .
  5. Novamente na primeira cópia, selecione Iniciar chamada.

Se ambas as guias ou janelas estiverem no mesmo dispositivo, a chamada pode ter ecos, mas mostra o processo e as chamadas funcionando entre duas guias do navegador. Se você implantar seu aplicativo em um servidor Web que várias máquinas possam acessar, poderá ter uma verdadeira chamada de voz sem eco.