Inicio rápido: Llamada a teléfono

  • Artículo
  • 7 minutos para leer

Para empezar a usar Azure Communication Services, utilice el SDK de llamadas de Communication Services para agregar llamadas RTC a la aplicación.

Importante

Azure Communication Services no admite llamadas de emergencia

Los servicios de llamada de voz de salida de Azure Communication Services no se pueden usar para ponerse en contacto con los servicios de emergencia. Debe mantener el servicio telefónico tradicional para realizar llamadas de emergencia.

Código de ejemplo

Busque el código finalizado de este inicio rápido en GitHub

Requisitos previos

Instalación

Creación de una aplicación Node.js

Abra la ventana de comandos o de terminal, cree un nuevo directorio para la aplicación y navegue hasta este.

mkdir calling-quickstart && cd calling-quickstart

Ejecute npm init -y para crear un archivo package.json con la configuración predeterminada.

npm init -y

Instalar el paquete

Use el comando npm install para instalar el SDK de llamadas de Azure Communication Services para JavaScript.

npm install @azure/communication-common --save
npm install @azure/communication-calling@1.1.0 --save

Para este inicio rápido se recomiendan las siguientes versiones de webpack:

"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"

La opción --save muestra la biblioteca como dependencia en el archivo package.json.

Instalación del marco de la aplicación

Esta guía de inicio rápido usa webpack para agrupar los recursos de la aplicación. Ejecute el siguiente comando para instalar los paquetes de npm webpack, webpack-cli y webpack-dev-server, y mostrarlos como dependencias de desarrollo en el archivo package.json:

npm install webpack@4.42.0 webpack-cli@3.3.11 webpack-dev-server@3.10.3 --save-dev

Cree un archivo index.html en el directorio raíz del proyecto. Este archivo lo usaremos para configurar un diseño básico que permitirá al usuario realizar una llamada.

Este es el código:

<!DOCTYPE html>
<html>
  <head>
    <title>Communication Client - Calling Sample</title>
  </head>
  <body>
    <h4>Azure Communication Services</h4>
    <h1>Calling Quickstart</h1>
    <input 
      id="callee-phone-input"
      type="text"
      placeholder="Who would you like to call?"
      style="margin-bottom:1em; width: 230px;"
    />
    <div>
      <button id="call-phone-button" type="button">
        Start Call
      </button>
      &nbsp;
      <button id="hang-up-phone-button" type="button" disabled="true">
        Hang Up
      </button>
    </div>
    <script src="./bundle.js"></script>
  </body>
</html>

Cree un archivo en el directorio raíz del proyecto denominado client.js que contendrá la lógica de la aplicación para esta guía de inicio rápido. Agregue el siguiente código para importar el cliente que realiza la llamada y obtener referencias a los elementos DOM para que podamos adjuntar la lógica de negocios.

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

let call;
let callAgent;

const calleePhoneInput = document.getElementById("callee-phone-input");
const callPhoneButton = document.getElementById("call-phone-button");
const hangUpPhoneButton = document.getElementById("hang-up-phone-button");

async function init() {
    const callClient = new CallClient();
    const tokenCredential = new AzureCommunicationTokenCredential('<USER ACCESS TOKEN with PSTN scope>');
    callAgent = await callClient.createCallAgent(tokenCredential);
  //  callPhoneButton.disabled = false;
}

init();

Inicio de una llamada telefónica

Especifique el número de teléfono que ha adquirido en el recurso de Communication Services y que se usará para iniciar la llamada:

Advertencia

Tenga en cuenta que los números de teléfono se deben proporcionar en formato estándar internacional E.164. (por ejemplo: +12223334444)

Agregue un controlador de eventos para iniciar una llamada al número de teléfono que ha proporcionado al hacer clic en callPhoneButton:

callPhoneButton.addEventListener("click", () => {
  // start a call to phone
  const phoneToCall = calleePhoneInput.value;
  call = callAgent.startCall(
    [{phoneNumber: phoneToCall}], { alternateCallerId: {phoneNumber: 'YOUR AZURE REGISTERED PHONE NUMBER HERE: +12223334444'}
  });
  // toggle button states
  hangUpPhoneButton.disabled = false;
  callPhoneButton.disabled = true;
});

Finalización de una llamada telefónica

Agregue un cliente de escucha de eventos para finalizar la llamada actual cuando se haga clic en el hangUpPhoneButton:

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

  // toggle button states
  hangUpPhoneButton.disabled = true;
  callPhoneButton.disabled = false;
});

La propiedad forEveryone finaliza la llamada para todos los participantes.

Ejecución del código

Utilice webpack-dev-server para compilar y ejecutar la aplicación. Ejecute el siguiente comando para agrupar el host de aplicación en un servidor web local:

npx webpack-dev-server --entry ./client.js --output bundle.js --debug --devtool inline-source-map

Abra el explorador web y vaya a http://localhost:8080/. Verá lo siguiente:

Captura de pantalla de la aplicación JavaScript completada.

Puede realizar una llamada a un número de teléfono real si proporciona un número de teléfono en el campo de texto agregado y hace clic en el botón Iniciar llamada de teléfono.

Advertencia

Tenga en cuenta que los números de teléfono se deben proporcionar en formato estándar internacional E.164. (por ejemplo: +12223334444)

Importante

Azure Communication Services no admite llamadas de emergencia

Los servicios de llamada de voz de salida de Azure Communication Services no se pueden usar para ponerse en contacto con los servicios de emergencia. Debe mantener el servicio telefónico tradicional para realizar llamadas de emergencia.

Código de ejemplo

Busque el código finalizado de este inicio rápido en GitHub

Requisitos previos

Comprobación de requisitos previos

  • Para ver los números de teléfono asociados a su recurso de Communication Services, inicie sesión en Azure Portal, busque el recurso de Communication Services y abra la pestaña números de teléfono en el panel de navegación izquierdo.

Instalación

Adición de funcionalidad RTC a la aplicación

Agregue el tipo PhoneNumber a la aplicación; para ello, modifique el archivo MainActivity.Java:

import com.azure.android.communication.common.PhoneNumberIdentifier;

Inicio de una llamada telefónica

Especifique el número de teléfono que adquirió desde el recurso de Communication Services. Se utilizará para iniciar la llamada:

Advertencia

Tenga en cuenta que los números de teléfono se deben proporcionar en formato estándar internacional E.164. (por ejemplo: +12223334444)

Modifique el controlador de eventos startCall() de MainActivity.Java, de modo que controle las llamadas telefónicas:

    private void startCall() {
        EditText calleePhoneView = findViewById(R.id.callee_id);
        String calleePhone = calleePhoneView.getText().toString();
        PhoneNumberIdentifier callerPhone = new PhoneNumberIdentifier("+12223334444");
        StartCallOptions options = new StartCallOptions();
        options.setAlternateCallerId(callerPhone);
        options.setVideoOptions(new VideoOptions(null));
        call = agent.startCall(
                getApplicationContext(),
                new PhoneNumberIdentifier[] {new PhoneNumberIdentifier(calleePhone)},
                options);
    }

Inicio de la aplicación y llamada al bot de eco

Ahora se puede iniciar la aplicación con el botón "Ejecutar aplicación" de la barra de herramientas (Mayús + F10). Puede realizar una llamada a un teléfono si proporciona un número de teléfono en el campo de texto agregado y hace clic en el botón Llamar.

Advertencia

Tenga en cuenta que los números de teléfono se deben proporcionar en formato estándar internacional E.164. (por ejemplo: +12223334444)

Captura de pantalla que muestra la aplicación completada.

Importante

Azure Communication Services no admite llamadas de emergencia

Los servicios de llamada de voz de salida de Azure Communication Services no se pueden usar para ponerse en contacto con los servicios de emergencia. Debe mantener el servicio telefónico tradicional para realizar llamadas de emergencia.

Requisitos previos

Comprobación de requisitos previos

  • Para ver los números de teléfono asociados a su recurso de Communication Services, inicie sesión en Azure Portal, busque el recurso de Communication Services y abra la pestaña números de teléfono en el panel de navegación izquierdo.
  • Puede compilar y ejecutar la aplicación con el SDK de llamadas de Azure Communication Services para iOS:

Instalación

Inicio de una llamada telefónica

Especifique el número de teléfono que ha adquirido en el recurso de Communication Services y que se usará para iniciar la llamada:

Advertencia

Tenga en cuenta que los números de teléfono se deben proporcionar en formato estándar internacional E.164. (por ejemplo: +12223334444)

Modifique el controlador de eventos startCall que se llevará a cabo cuando se pulsa el botón Iniciar llamada:

func startCall() {
        // Ask permissions
        AVAudioSession.sharedInstance().requestRecordPermission { (granted) in
            if granted {
                let startCallOptions = StartCallOptions()
                startCallOptions.alternateCallerId = PhoneNumberIdentifier(phoneNumber: "<YOUR AZURE REGISTERED PHONE NUMBER>")
                self.callAgent!.startCall(participants: [PhoneNumberIdentifier(phoneNumber: self.callee)], options: startCallOptions) { (call, error) in
                    if (error == nil) {
                        self.call = call
                    } else {
                        print("Failed to get call object")
                    }
                }
            }
        }
    }

Ejecución del código

Para compilar y ejecutar la aplicación en el simulador de iOS, seleccione Producto > Ejecutar o use el método abreviado de teclado (⌘-R).

Aspecto final de la aplicación de inicio rápido

Puede realizar una llamada a un teléfono si proporciona un número de teléfono en el campo de texto agregado y hace clic en el botón Iniciar llamada.

Advertencia

Tenga en cuenta que los números de teléfono se deben proporcionar en formato estándar internacional E.164. (por ejemplo: +12223334444)

Nota

La primera vez que realice una llamada, el sistema le solicitará acceso al micrófono. En una aplicación de producción, debe usar la API AVAudioSession, comprobar el estado del permiso y actualizar correctamente el comportamiento de la aplicación cuando no se conceda el permiso.

Limpieza de recursos

Si quiere limpiar y quitar una suscripción a Communication Services, puede eliminar el recurso o grupo de recursos. Al eliminar el grupo de recursos, también se elimina cualquier otro recurso que esté asociado a él. Obtenga más información sobre la limpieza de recursos.

Pasos siguientes

Para más información, consulte los siguientes artículos.