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

  • 3 minutos

Nesta unidade, adicionaremos mais código ao aplicativo Web criado na unidade anterior. Este aplicativo nos permitirá fazer chamadas de voz com os Serviços de Comunicação do Azure.

Adicionar elementos HTML de entrada

Para fazer uma chamada, precisaremos 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, uma ID de usuário dos Serviços de Comunicação do Azure.

Para obter essas informações do usuário, usaremos algumas entradas de formulário HTML padrão. Então, vamos adicioná-los ao nosso index.html arquivo:

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

  2. Adicione o seguinte HTML no corpo do arquivo HTML, sob 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 será para o token do usuário que faz a chamada. O botão de envio será usado para instanciar alguns objetos dos Serviços de Comunicação do Azure depois que o token for fornecido. A segunda entrada será para inserir o ID de usuário da pessoa que queremos ligar.

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

Também precisaremos de alguns 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>

Testando o HTML

Com o HTML inserido, concluímos a maioria do HTML para este aplicativo. Se você executar o aplicativo com o mesmo comando da unidade anterior: e, em seguida, abrir o aplicativo, você verá o seguinte aplicativo em seu navegador: npx parcel index.htmlScreenshot of our blank web app showing in a browser.

Este aplicativo pode não parecer muito, mas é tudo o que nós os elementos visuais que precisamos para criar um aplicativo de chamada de voz. Agora terminamos com o HTML do nosso aplicativo. O restante do código usará JavaScript.

Importar algumas dependências

Nossa primeira etapa em nosso app.js arquivo é importar as dependências para fazer chamadas dos Serviços de Comunicação do Azure. Essas dependências vêm dos SDKs que instalamos anteriormente com o NPM. Para importá-los, adicione as seguintes linhas ao app.js arquivo:

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

A primeira importação é um CallClient, que será usado mais tarde para realmente fazer nossas chamadas. Ele lida com microfones, áudio, etc, tudo 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 sabemos quem é um usuário quando ele faz uma chamada.

Obter referências ao nosso HTML

Anteriormente, criamos elementos HTML que os usuários usarão para controlar o aplicativo. Para ouvir o usuário interagindo com eles, precisaremos obter referências a eles em nosso JavaScript.

Além disso, precisamos de algumas variáveis para armazenar alguns itens, que são usados em todo o nosso código. Adicione o seguinte código abaixo app.js das importações.

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;

Processar a autenticação

Agora que terminamos com algumas configurações básicas, podemos começar a criar algumas funcionalidades. A primeira coisa que precisamos funcionalmente é lidar com a autenticação. A autenticação será tratada pelo usuário inserindo um token de usuário no elemento de entrada de token que criamos e, em seguida, clicando em nosso "Enviar token". Para lidar com esse processo dentro do nosso código, precisamos registrar um manipulador de cliques para esse botão de envio de token, que processará o token de usuário. Você pode adicionar esse código logo abaixo de nossas variáveis de antes.

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:

  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 com ele. Essa credencial é usada para fazer e lidar com todas as chamadas.
  3. Cria um CallAgent, que usamos para fazer e receber chamadas.
  4. Registra um manipulador de chamadas de entrada, que escreveremos em breve.
  5. Atualiza alguns dos nossos botões para que o usuário possa prosseguir.

Fazer chamadas

Com a autenticação fora do caminho, podemos 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;
});

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

Pendurados

Uma vez que uma chamada é aberta, precisamos 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;
});

Este código, registra um manipulador de clique no botão "Hang-Up" e, em seguida, apenas instrui a chamada a desligar.

Receba uma chamada

Agora que podemos fazer uma chamada, também precisamos lidar com o recebimento de uma chamada. Para lidar com o recebimento de uma chamada, criaremos o manipulador de chamadas de entrada, que mencionamos 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

Estamos prontos, se você executar o aplicativo com o mesmo comando da unidade anterior: npx parcel index.html e, em seguida, abra o aplicativo em seu navegador. Você terá um aplicativo de chamadas básico funcional!

Obtendo credenciais de teste

Para testar realmente fazer uma chamada, você precisará 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 clique no botão "Identidades & Tokens de Acesso do Usuário" no menu à esquerda:

Screenshot of the Azure portal, showing the Identities & User Access Tokens menu option highlighted.

Na página exibida, você pode gerar credenciais de teste. Para este aplicativo, só precisamos da permissão "Chamada de voz e vídeo (VOIP)", então marque essa opção e pressione gerar:

Screenshot of the token generation window with VOIP option checked.

Você obterá uma única identidade dos Serviços de Comunicação do Azure, que é adequada para testes. Certifique-se de copiar o token e o ID para algum lugar seguro para teste, como um documento do bloco de notas em branco.

Screenshot of the token generation window with test credentials showing.

Se você quiser tentar chamar outro usuário, gere um conjunto adicional de credenciais.

O primeiro será usado para o usuário chamador e o segundo para o usuário recetor.

Em um aplicativo do mundo real, você deve usar nossos sistemas de identidade e bibliotecas de clientes 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, consulte os links no final deste módulo.

Chamando 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 a aplicação no seu browser
  2. Cole um token salvo no elemento de entrada do token do usuário.
  3. Pressione o botão "Enviar"
  4. Insira o ID de usuário do Echo Bot 8:echo123
  5. Pressione "Start Call"

Seu navegador pode solicitar algumas caixas de diálogo de permissão de microfone, portanto, certifique-se de aceitá-las. Se tudo funcionou corretamente, você deve estar em uma chamada com o Echo Bot. Ele permitirá que você grave uma mensagem curta, que será reproduzida para você.

Chamando outro usuário

Você também pode chamar outro usuário com este aplicativo, você precisará do segundo conjunto de credenciais, que você gerou anteriormente:

  1. Abra duas cópias do aplicativo, várias guias ou janelas devem ser usadas para simular chamar outro usuário.
  2. Na primeira cópia, digite o primeiro token de usuário salvo do gerador de credenciais e pressione "Enviar"
  3. Na segunda cópia, digite o segundo token de usuário salvo do gerador de credenciais e pressione "Enviar"
  4. A partir da primeira cópia, insira o segundo ID de usuário no elemento de entrada "Quem você gostaria de chamar?".
  5. Novamente a partir da primeira cópia, clique em "Iniciar chamada".

Se ambas as guias/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.