Comunicación: realizar una llamada telefónica

La integración de las funcionalidades de llamadas telefónicas de Azure Communication Services en una aplicación de línea de negocio (LOB) personalizada ofrece varias ventajas clave para las empresas y sus usuarios:

• Permite la comunicación sin problemas y en tiempo real entre empleados, clientes y asociados, directamente desde dentro de la aplicación loB, lo que elimina la necesidad de cambiar entre varias plataformas o dispositivos.
• Mejora la experiencia del usuario y mejora la eficacia operativa general.
• Facilita la resolución rápida de problemas, ya que los usuarios pueden conectarse rápidamente con equipos de soporte técnico relevantes o expertos en la materia de forma rápida y sencilla.

En este ejercicio, aprenderá a:

• Explore la característica de llamadas telefónicas en la aplicación.
• Recorra el código para obtener información sobre cómo se compila la característica de llamada telefónica.

Uso de la característica llamadas telefónicas

1. En el ejercicio anterior creó un recurso de Azure Communication Services (ACS) e inició la base de datos, el servidor web y el servidor de API. También ha actualizado los siguientes valores en el archivo .env .

   ACS_CONNECTION_STRING=<ACS_CONNECTION_STRING>
   ACS_PHONE_NUMBER=<ACS_PHONE_NUMBER>
   ACS_EMAIL_ADDRESS=<ACS_EMAIL_ADDRESS>
   CUSTOMER_EMAIL_ADDRESS=<EMAIL_ADDRESS_TO_SEND_EMAIL_TO>
   CUSTOMER_PHONE_NUMBER=<UNITED_STATES_BASED_NUMBER_TO_SEND_SMS_TO>
   

   Asegúrese de que ha completado el ejercicio anterior antes de continuar.

2. Vuelva al explorador (http://localhost:4200), busque la datagrid y seleccione Ponerse en contacto con el cliente seguido de Llamar al cliente en la primera fila.

   

3. Se agregará un componente de llamada telefónica al encabezado . Escriba el número de teléfono al que desea llamar (asegúrese de que empieza por + e incluye el código de país) y seleccione Llamar. Se le pedirá que permita el acceso al micrófono.

   

4. Seleccione Colgar hasta finalizar la llamada. Seleccione Cerrar para cerrar el componente de llamada telefónica.

Exploración del código de llamada telefónica

1. Abra el archivo customers-list.component.ts . La ruta de acceso completa al archivo es client/src/app/customers-list/customers-list.component.ts.

2. Tenga en cuenta que openCallDialog() envía un CustomerCall mensaje y el número de teléfono del cliente mediante un bus de eventos.

   openCallDialog(data: Phone) {
       this.eventBus.emit({ name: Events.CustomerCall, value: data });
   }
   

   Nota:

   El código del bus de eventos se puede encontrar en el archivo eventbus.service.ts si está interesado en explorarlo más. La ruta de acceso completa al archivo es client/src/app/core/eventbus.service.ts.

3. La función del componente de ngOnInit() encabezado se suscribe al CustomerCall evento enviado por el bus de eventos y muestra el componente de llamada telefónica. Puede encontrar este código en header.component.ts.

   ngOnInit() {
       this.subscription.add(
           this.eventBus.on(Events.CustomerCall, (data: Phone) => {
               this.callVisible = true; // Show phone call component
               this.callData = data; // Set phone number to call
           })
       );
   }
   

4. Abra phone-call.component.ts. Dedique un momento a exponer el código. La ruta de acceso completa al archivo es client/src/app/phone-call/phone-call.component.ts. Tenga en cuenta las siguientes características clave:

   • Recupera un token de acceso de Azure Communication Services llamando a la acsService.getAcsToken() función en ngOnInit();
   • Agrega un "marcador telefónico" a la página. Para ver el marcador, haga clic en la entrada del número de teléfono en el encabezado.
   • Inicia y finaliza una llamada mediante las startCall() funciones y endCall() respectivamente.

5. Antes de examinar el código que realiza la llamada telefónica, vamos a examinar cómo se recupera el token de acceso de ACS y cómo se crean los objetos de llamada telefónica. Busque la ngOnInit() función en phone-call.component.ts.

   async ngOnInit() {
       if (ACS_CONNECTION_STRING) {
           this.subscription.add(
               this.acsService.getAcsToken().subscribe(async (user: AcsUser) => {
                   const callClient = new CallClient();
                   const tokenCredential = new AzureCommunicationTokenCredential(user.token);
                   this.callAgent = await callClient.createCallAgent(tokenCredential);
               })
           );
       }
   }
   

   Esta función realiza las siguientes acciones:

   • Recupera un userId de ACS y un token de acceso llamando a la acsService.getAcsToken() función .
   • Una vez recuperado el token de acceso, el código realiza las siguientes acciones:
     • Crea una nueva instancia de y CallClient mediante el token de AzureCommunicationTokenCredential acceso.
     • Crea una nueva instancia de CallAgent mediante los CallClient objetos y AzureCommunicationTokenCredential . Más adelante verá que CallAgent se usa para iniciar y finalizar una llamada.

6. Abra acs.services.ts y busque la getAcsToken() función . La ruta de acceso completa al archivo es client/src/app/core/acs.service.ts. La función realiza una solicitud HTTP GET a la /acstoken ruta expuesta por el servidor de API.

   getAcsToken(): Observable<AcsUser> {
       return this.http.get<AcsUser>(this.apiUrl + 'acstoken')
       .pipe(
           catchError(this.handleError)
       );
   }
   

7. Una función de servidor de API denominada createACSToken() recupera el userId y el token de acceso y lo devuelve al cliente. Se puede encontrar en el archivo server/typescript/acs.ts .

   import { CommunicationIdentityClient } from '@azure/communication-identity';
   
   const connectionString = process.env.ACS_CONNECTION_STRING as string;
   
   async function createACSToken() {
   if (!connectionString) return { userId: '', token: '' };
   
   const tokenClient = new CommunicationIdentityClient(connectionString);
   const { user, token } = await tokenClient.createUserAndToken(["voip"]);
   return { userId: user.communicationUserId, token };
   }
   

   Esta función realiza las siguientes acciones:

   • Comprueba si hay disponible un valor de ACS connectionString . Si no es así, devuelve un objeto con un valor vacío userId y token.
   • Crea una nueva instancia de CommunicationIdentityClient y pasa el connectionString valor a ella.
   • Crea un nuevo usuario y un token mediante tokenClient.createUserAndToken() con el ámbito "voip".
   • Devuelve un objeto que contiene los userId valores y token .

8. Ahora que ha visto cómo se recupera el identificador de usuario y el token, vuelva a y phone-call.component.ts busque la startCall() función.

9. Se llama a esta función cuando se selecciona Llamar en el componente de llamada telefónica. Usa el CallAgent objeto mencionado anteriormente para iniciar una llamada. La callAgent.startCall() función acepta un objeto que representa el número que se va a llamar y el número de teléfono de ACS que se usa para realizar la llamada.

   startCall() {
       this.call = this.callAgent?.startCall(
           [{ phoneNumber: this.customerPhoneNumber }], {
           alternateCallerId: { phoneNumber: this.fromNumber }
       });
       console.log('Calling: ', this.customerPhoneNumber);
       console.log('Call id: ', this.call?.id);
       this.inCall = true;
   
       // Adding event handlers to monitor call state
       this.call?.on('stateChanged', () => {
           console.log('Call state changed: ', this.call?.state);
           if (this.call?.state === 'Disconnected') {
               console.log('Call ended. Reason: ', this.call.callEndReason);
               this.inCall = false;
           }
       });
   }
   

10. Se llama a la endCall() función cuando se selecciona Hang Up en el componente de llamada telefónica.

    endCall() {
        if (this.call) {
            this.call.hangUp({ forEveryone: true });
            this.call = undefined;
            this.inCall = false;
        }
        else {
            this.hangup.emit();
        }
    }
    

    Si hay una llamada en curso, se llama a la call.hangUp() función para finalizar la llamada. Si no hay ninguna llamada en curso, el hangup evento se emite al componente primario del encabezado para ocultar el componente de llamada telefónica.

11. Antes de pasar al ejercicio siguiente, revisemos los conceptos clave que se describen en este ejercicio:

    • Un userId de ACS y un token de acceso se recuperan del servidor de API mediante la acsService.createUserAndToken() función .
    • El token se usa para crear un CallClient objeto y CallAgent .
    • El CallAgent objeto se usa para iniciar y finalizar una llamada llamando a las callAgent.startCall() funciones y callAgent.hangUp() respectivamente.

12. Ahora que ha aprendido cómo se pueden integrar las llamadas telefónicas en una aplicación, vamos a cambiar nuestro enfoque al uso de Azure Communication Services para enviar mensajes SMS y correo electrónico.

Paso siguiente