Inicio rápido: Llamada saliente a un número de teléfono

  • Artículo

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 admite llamadas de emergencia a números de emergencia solo en Estados Unidos, Puerto Rico, Canadá, Dinamarca y el Reino Unido.

El uso de las llamadas de voz de Azure Communication Services (RTC) permite marcar el número de emergencia 911 en Estados Unidos, Puerto Rico y Canadá, el número de emergencia 112 en Dinamarca y los números de emergencia 999 y 112 en el Reino Unido. Azure Communication Services no admite actualmente la marcación de esos números de emergencia desde fuera de esos países o regiones, ni la marcación de servicios de emergencia en otros países o regiones.

Código de ejemplo

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

Nota

Se puede acceder a las llamadas salientes a un número de teléfono mediante la biblioteca de interfaz de usuario de Azure Communication Services. La biblioteca de interfaz de usuario permite a los desarrolladores agregar un cliente de llamada habilitado para RTC en su aplicación con solo un par de líneas de código.

Prerrequisitos

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 --save

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

Instalación del marco de la aplicación

En esta guía de inicio rápido se usa parcel para agrupar los recursos de la aplicación. Ejecute el siguiente comando para llevar a cabo la instalación y que se muestre como una dependencia de desarrollo en package.json:

npm install parcel --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="./app.js" type="module"></script>
  </body>
</html>

Cree un archivo en el directorio raíz del proyecto denominado app.js que contendrá la lógica de 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 VoIP 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 que se usa para iniciar la llamada:

Advertencia

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 el comando npx parcel index.html para compilar y ejecutar la aplicación.

Abra el explorador web y vaya a http://localhost:1234/. Debería ver la siguiente aplicación web:

Screenshot of the completed JavaScript Application.

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.

Importante

Azure Communication Services admite llamadas de emergencia a números de emergencia solo en Estados Unidos, Puerto Rico, Canadá, Dinamarca y el Reino Unido.

El uso de las llamadas de voz de Azure Communication Services (RTC) permite marcar el número de emergencia 911 en Estados Unidos, Puerto Rico y Canadá, el número de emergencia 112 en Dinamarca y los números de emergencia 999 y 112 en el Reino Unido. Azure Communication Services no admite actualmente la marcación de esos números de emergencia desde fuera de esos países o regiones, ni la marcación de servicios de emergencia en otros países o regiones.

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. Este número se usa como identificador de autor de llamada 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). Para realizar una llamada, proporcione un número de teléfono en el campo de texto agregado y seleccione 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)

Screenshot showing the completed application.

Importante

Azure Communication Services admite llamadas de emergencia a números de emergencia solo en Estados Unidos, Puerto Rico, Canadá, Dinamarca y el Reino Unido.

El uso de las llamadas de voz de Azure Communication Services (RTC) permite marcar el número de emergencia 911 en Estados Unidos, Puerto Rico y Canadá, el número de emergencia 112 en Dinamarca y los números de emergencia 999 y 112 en el Reino Unido. Azure Communication Services no admite actualmente la marcación de esos números de emergencia desde fuera de esos países o regiones, ni la marcación de servicios de emergencia en otros países o regiones.

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 que se usa 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 pulse 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).

Final look and feel of the quick start app

Puede realizar una llamada a un teléfono proporcionando un número de teléfono en el campo de texto agregado y haciendo 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.