Communication : Passer un appel téléphonique

L’intégration des fonctionnalités d’appel téléphonique d’Azure Communication Services dans une application métier personnalisée offre plusieurs avantages clés aux entreprises et à leurs utilisateurs :

• Permet une communication transparente et en temps réel entre les employés, les clients et les partenaires, directement à partir de l’application métier, ce qui élimine la nécessité de basculer entre plusieurs plateformes ou appareils.
• Améliore l’expérience utilisateur et améliore l’efficacité opérationnelle globale.
• Facilite la résolution rapide des problèmes, car les utilisateurs peuvent rapidement se connecter à des équipes de support pertinentes ou à des experts en matière de sujets rapidement et facilement.

Dans cet exercice, vous allez :

• Explorez la fonctionnalité d’appel téléphonique dans l’application.
• Parcourez le code pour découvrir comment la fonctionnalité d’appel téléphonique est générée.

Utilisation de la fonctionnalité d’appel téléphonique

1. Dans l’exercice précédent, vous avez créé une ressource Azure Communication Services (ACS) et démarré la base de données, le serveur web et le serveur API. Vous avez également mis à jour les valeurs suivantes dans le fichier .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>
   

   Vérifiez que vous avez terminé l’exercice précédent avant de continuer.

2. Revenez au navigateur (http://localhost:4200), localisez le datagrid, puis sélectionnez Contacter le client suivi du client d’appel dans la première ligne.

   

3. Un composant d’appel téléphonique est ajouté à l’en-tête. Entrez votre numéro de téléphone que vous souhaitez appeler (vérifiez qu’il commence par + et inclut le code de pays) et sélectionnez Appeler. Vous serez invité à autoriser l’accès à votre microphone.

   

4. Sélectionnez Raccrocher jusqu’à la fin de l’appel. Sélectionnez Fermer pour fermer le composant d’appel téléphonique.

Exploration du code d’appel téléphonique

1. Ouvrez le fichier customers-list.component.ts . Le chemin complet du fichier est client/src/app/customers-list/customers-list.component.ts.

2. Notez que vous openCallDialog() envoyez un CustomerCall message et le numéro de téléphone du client à l’aide d’un bus d’événements.

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

   Remarque

   Le code de bus d’événements se trouve dans le fichier eventbus.service.ts si vous souhaitez l’explorer davantage. Le chemin complet du fichier est client/src/app/core/eventbus.service.ts.

3. La fonction du composant d’en-tête ngOnInit() s’abonne à l’événement CustomerCall envoyé par le bus d’événements et affiche le composant d’appel téléphonique. Vous trouverez ce code dans 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. Ouvrez phone-call.component.ts. Prenez un moment pour exposer le code. Le chemin complet du fichier est client/src/app/phone-call/phone-call.component.ts. Notez les principales fonctionnalités suivantes :

   • Récupère un jeton d’accès Azure Communication Services en appelant la acsService.getAcsToken() fonction dans ngOnInit();
   • Ajoute un « numéroteur téléphonique » à la page. Vous pouvez voir le numéroteur en cliquant sur l’entrée du numéro de téléphone dans l’en-tête.
   • Démarre et termine un appel à l’aide des fonctions et startCall() des endCall() fonctions respectivement.

5. Avant d’examiner le code qui effectue l’appel téléphonique, examinons comment le jeton d’accès ACS est récupéré et comment les objets d’appel téléphonique sont créés. Recherchez la ngOnInit() fonction dans 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);
               })
           );
       }
   }
   

   Cette fonction effectue les actions suivantes :

   • Récupère un id utilisateur ACS et un jeton d’accès en appelant la acsService.getAcsToken() fonction.
   • Une fois le jeton d’accès récupéré, le code effectue les actions suivantes :
     • Crée une instance de jeton d’accès CallClient et AzureCommunicationTokenCredential l’utilisation du jeton d’accès.
     • Crée une instance d’utilisation des CallAgent objets et CallClient des AzureCommunicationTokenCredential objets. Plus tard, vous verrez qu’il CallAgent est utilisé pour démarrer et terminer un appel.

6. Ouvrez acs.services.ts et recherchez la getAcsToken() fonction. Le chemin complet du fichier est client/src/app/core/acs.service.ts. La fonction effectue une requête HTTP GET vers l’itinéraire /acstoken exposé par le serveur d’API.

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

7. Une fonction de serveur d’API nommée createACSToken() récupère l’id utilisateur et le jeton d’accès et le retourne au client. Il se trouve dans le fichier serveur/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 };
   }
   

   Cette fonction effectue les actions suivantes :

   • Vérifie si une valeur ACS connectionString est disponible. Si ce n’est pas le cas, retourne un objet avec un objet vide userId et token.
   • Crée une instance de CommunicationIdentityClient et lui transmet la connectionString valeur.
   • Crée un utilisateur et un jeton à l’aide tokenClient.createUserAndToken() de l’étendue « voip ».
   • Retourne un objet contenant les valeurs et userId les token valeurs.

8. Maintenant que vous avez vu comment l’id utilisateur et le jeton sont récupérés, revenez à phone-call.component.ts la fonction et recherchez la startCall() fonction.

9. Cette fonction est appelée lorsque l’appel est sélectionné dans le composant d’appel téléphonique. Il utilise l’objet CallAgent mentionné précédemment pour démarrer un appel. La callAgent.startCall() fonction accepte un objet représentant le numéro à appeler et le numéro de téléphone ACS utilisé pour effectuer l’appel.

   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. La endCall() fonction est appelée lorsque Hang Up est sélectionné dans le composant d’appel téléphonique.

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

    Si un appel est en cours, la call.hangUp() fonction est appelée pour mettre fin à l’appel. Si aucun appel n’est en cours, l’événement hangup est émis dans le composant parent d’en-tête pour masquer le composant d’appel téléphonique.

11. Avant de passer à l’exercice suivant, examinons les concepts clés abordés dans cet exercice :

    • Un id utilisateur ACS et un jeton d’accès sont récupérés à partir du serveur d’API à l’aide de la acsService.createUserAndToken() fonction.
    • Le jeton est utilisé pour créer un objet et CallClient un CallAgent objet.
    • L’objet CallAgent est utilisé pour démarrer et terminer un appel en appelant respectivement les fonctions et callAgent.startCall() les callAgent.hangUp() fonctions.

12. Maintenant que vous avez appris comment l’appel téléphonique peut être intégré à une application, nous allons basculer vers l’utilisation d’Azure Communication Services pour envoyer des messages électroniques et SMS.

Étape suivante