Kommunikation: Einen Anruf tätigen

2025-06-13

Die Integration der Telefonanruffunktionen von Azure Communication Services in eine benutzerdefinierte Branchenanwendung bietet unternehmen und ihren Benutzern mehrere wichtige Vorteile:

Ermöglicht eine nahtlose und echtzeitbasierte Kommunikation zwischen Mitarbeitern, Kunden und Partnern direkt aus der Branchenanwendung, ohne dass zwischen mehreren Plattformen oder Geräten gewechselt werden muss.
Verbessert die Benutzererfahrung und verbessert die gesamtbetriebstechnische Effizienz.
Erleichtert die schnelle Problemlösung, da Benutzer schnell und einfach mit relevanten Supportteams oder Fachexperten in Verbindung treten können.

In dieser Übung führen Sie die folgenden Schritte aus:

Erkunden Sie die Telefonanruffunktion in der Anwendung.
Führen Sie den Code durch, um zu erfahren, wie das Telefonanruffeature erstellt wird.

Verwenden der Telefonanruffunktion

In der vorherigen Übung haben Sie eine Azure Communication Services (ACS)-Ressource erstellt und die Datenbank, den Webserver und den API-Server gestartet. Sie haben auch die folgenden Werte in der env-Datei aktualisiert.
```
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>
```
Stellen Sie sicher, dass Sie die vorherige Übung abgeschlossen haben, bevor Sie fortfahren.
Wechseln Sie zurück zum Browser (http://localhost:4200), suchen Sie das Datagrid, und wählen Sie " Kunden kontaktieren" gefolgt von "Kunden anrufen" in der ersten Zeile aus.
Der Kopfzeile wird eine Telefonanrufkomponente hinzugefügt. Geben Sie Ihre Telefonnummer ein, die Sie anrufen möchten (stellen Sie sicher, dass sie mit + beginnt und die Ländervorwahl enthält), und wählen Sie "Anrufen" aus. Sie werden aufgefordert, den Zugriff auf Ihr Mikrofon zuzulassen.
Wählen Sie "Auflegen" aus, um den Anruf zu beenden. Wählen Sie "Schließen" aus, um die Telefonanrufkomponente zu schließen.

Erkunden des Telefonanrufcodes

Tipp

Wenn Sie Visual Studio Code verwenden, können Sie Dateien direkt öffnen, indem Sie Folgendes auswählen:

Windows/Linux: STRG+P
Mac: Cmd + P

Geben Sie dann den Namen der Datei ein, die Sie öffnen möchten.

Öffnen Sie die datei customers-list.component.ts . Der vollständige Pfad zur Datei ist client/src/app/customers-list/customers-list.component.ts.
Beachten Sie, dass openCallDialog() eine CustomerCall Nachricht und die Kundentelefonnummer mit einem Ereignisbus gesendet werden.
```
openCallDialog(data: Phone) {
    this.eventBus.emit({ name: Events.CustomerCall, value: data });
}
```
Hinweis

Der Ereignisbuscode finden Sie in der datei eventbus.service.ts , wenn Sie mehr darüber erfahren möchten. Der vollständige Pfad zur Datei ist client/src/app/core/eventbus.service.ts.

Die Funktion der Kopfzeilenkomponente ngOnInit() abonniert das CustomerCall vom Ereignisbus gesendete Ereignis und zeigt die Telefonanrufkomponente an. Sie finden diesen Code in 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
        })
    );
}

Öffnen Sie phone-call.component.ts. Nehmen Sie sich einen Moment Zeit, um den Code verfügbar zu machen. Der vollständige Pfad zur Datei ist client/src/app/phone-call/phone-call.component.ts. Beachten Sie die folgenden wichtigsten Features:
- Ruft ein Azure Communication Services-Zugriffstoken durch Aufrufen der acsService.getAcsToken() Funktion in ngOnInit();
- Fügt der Seite einen "Telefonwähler" hinzu. Sie können die Wählhilfe anzeigen, indem Sie in der Kopfzeile auf die Eingabe der Telefonnummer klicken.
- Startet und beendet einen Aufruf mit den startCall() jeweiligen endCall() Funktionen.
Bevor wir uns den Code ansehen, der den Telefonanruf vornimmt, untersuchen wir, wie das ACS-Zugriffstoken abgerufen wird und wie Telefonanrufobjekte erstellt werden. Suchen Sie die ngOnInit() Funktion in 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);
            })
        );
    }
}
```
Diese Funktion führt die folgenden Aktionen aus:
- Ruft eine ACS userId und ein Zugriffstoken durch Aufrufen der acsService.getAcsToken() Funktion ab.
- Nachdem das Zugriffstoken abgerufen wurde, führt der Code die folgenden Aktionen aus:
  - Erstellt eine neue Instanz von CallClient und AzureCommunicationTokenCredential verwendet das Zugriffstoken.
  - Erstellt eine neue Instanz der Verwendung der CallAgentCallClient Objekte.AzureCommunicationTokenCredential Später sehen Sie, dass CallAgent zum Starten und Beenden eines Anrufs verwendet wird.
Öffnen Sie acs.services.ts , und suchen Sie die getAcsToken() Funktion. Der vollständige Pfad zur Datei ist client/src/app/core/acs.service.ts. Die Funktion sendet eine HTTP GET-Anforderung an die Route, die /acstoken vom API-Server verfügbar gemacht wird.
```
getAcsToken(): Observable<AcsUser> {
    return this.http.get<AcsUser>(this.apiUrl + 'acstoken')
    .pipe(
        catchError(this.handleError)
    );
}
```
Eine API-Serverfunktion mit dem Namen createACSToken() ruft die UserId und das Zugriffstoken ab und gibt sie an den Client zurück. Sie befindet sich in der Datei "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 };
}
```
Diese Funktion führt die folgenden Aktionen aus:
- Überprüft, ob ein ACS-Wert connectionString verfügbar ist. Wenn dies nicht der Fehler ist, wird ein Objekt mit einem leeren userId und tokeneinem .
- Erstellt eine neue Instanz von CommunicationIdentityClient und übergibt den connectionString Wert an ihn.
- Erstellt einen neuen Benutzer und ein neues Token mit tokenClient.createUserAndToken() dem Bereich "voip".
- Gibt ein Objekt zurück, das die userId Werte enthält token .
Nachdem Sie nun gesehen haben, wie die UserId und das Token abgerufen werden, wechseln Sie zurück, phone-call.component.ts und suchen Sie die startCall() Funktion.

Diese Funktion wird aufgerufen, wenn " Anruf " in der Telefonanrufkomponente ausgewählt ist. Es verwendet das CallAgent zuvor erwähnte Objekt, um einen Aufruf zu starten. Die callAgent.startCall() Funktion akzeptiert ein Objekt, das die Rufnummer und die ACS-Telefonnummer darstellt, die zum Tätigen des Anrufs verwendet wird.

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;
        }
    });
}

Die endCall() Funktion wird aufgerufen, wenn Hang Up in der Telefonanrufkomponente ausgewählt ist.
```
endCall() {
    if (this.call) {
        this.call.hangUp({ forEveryone: true });
        this.call = undefined;
        this.inCall = false;
    }
    else {
        this.hangup.emit();
    }
}
```
Wenn ein Aufruf ausgeführt wird, wird die call.hangUp() Funktion aufgerufen, um den Aufruf zu beenden. Wenn kein Anruf ausgeführt wird, wird das hangup Ereignis an die übergeordnete Kopfzeilenkomponente ausgegeben, um die Telefonanrufkomponente auszublenden.
Bevor wir mit der nächsten Übung fortfahren, sehen wir uns die wichtigsten Konzepte an, die in dieser Übung behandelt werden:
- Eine ACS-Benutzer-ID und ein Zugriffstoken werden mithilfe der acsService.createUserAndToken() Funktion vom API-Server abgerufen.
- Das Token wird verwendet, um ein Objekt und CallClient ein CallAgent Objekt zu erstellen.
- Das CallAgent Objekt wird verwendet, um einen Aufruf zu starten und zu beenden, indem die callAgent.startCall() entsprechenden Funktionen aufgerufen werden callAgent.hangUp() .
Nachdem Sie nun gelernt haben, wie Telefonanrufe in eine Anwendung integriert werden können, setzen wir unseren Fokus auf die Verwendung von Azure Communication Services zum Senden von E-Mails und SMS-Nachrichten.

Nächster Schritt

Kommunikation: Senden von E-Mails und SMS-Nachrichten

Freigeben über

Kommunikation: Einen Anruf tätigen

Verwenden der Telefonanruffunktion

Erkunden des Telefonanrufcodes

Nächster Schritt

Feedback

Zusätzliche Ressourcen