Kommunikation: Ringa ett telefonsamtal

2025-06-13

Integreringen av Azure Communication Services telefonsamtalsfunktioner i ett anpassat verksamhetsspecifikt program (LOB) ger flera viktiga fördelar för företag och deras användare:

Möjliggör sömlös och realtidskommunikation mellan anställda, kunder och partner, direkt från LOB-programmet, vilket eliminerar behovet av att växla mellan flera plattformar eller enheter.
Förbättrar användarupplevelsen och förbättrar den övergripande drifteffektiviteten.
Underlättar snabb problemlösning eftersom användarna snabbt kan ansluta till relevanta supportteam eller ämnesexperter snabbt och enkelt.

I den här övningen ska du:

Utforska telefonsamtalsfunktionen i programmet.
Gå igenom koden för att lära dig hur telefonsamtalsfunktionen skapas.

Använda telefonsamtalsfunktionen

I föregående övning skapade du en Azure Communication Services-resurs (ACS) och startade databasen, webbservern och API-servern. Du har också uppdaterat följande värden i .env-filen .
```
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>
```
Kontrollera att du har slutfört föregående övning innan du fortsätter.
Gå tillbaka till webbläsaren (http://localhost:4200), leta upp datagrid och välj Kontakta kund följt av Samtalskund på den första raden.
En telefonsamtalskomponent läggs till i rubriken. Ange ditt telefonnummer som du vill ringa (se till att det börjar med + och innehåller landskoden) och välj Ring. Du uppmanas att tillåta åtkomst till mikrofonen.
Välj Lägg på för att avsluta samtalet. Välj Stäng för att stänga telefonsamtalskomponenten.

Utforska telefonsamtalskoden

Tips/Råd

Om du använder Visual Studio Code kan du öppna filer direkt genom att välja:

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

Skriv sedan namnet på den fil som du vill öppna.

Öppna filen customers-list.component.ts . Den fullständiga sökvägen till filen är client/src/app/customers-list/customers-list.component.ts.
Observera att openCallDialog() skickar ett CustomerCall meddelande och kundens telefonnummer med hjälp av en händelsebuss.
```
openCallDialog(data: Phone) {
    this.eventBus.emit({ name: Events.CustomerCall, value: data });
}
```
Anmärkning

Händelsebusskoden finns i filen eventbus.service.ts om du är intresserad av att utforska den mer. Den fullständiga sökvägen till filen är client/src/app/core/eventbus.service.ts.

Huvudkomponentens funktion prenumererar på händelsen som ngOnInit() skickas CustomerCall av händelsebussen och visar telefonsamtalskomponenten. Du hittar den här koden i 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
        })
    );
}

Öppna phone-call.component.ts. Ta en stund att visa koden. Den fullständiga sökvägen till filen är client/src/app/phone-call/phone-call.component.ts. Observera följande viktiga funktioner:
- Hämtar en Åtkomsttoken för Azure Communication Services genom att anropa acsService.getAcsToken() funktionen i ngOnInit();
- Lägger till en "telefonuppringare" på sidan. Du kan se uppringaren genom att klicka på telefonnummerinmatningen i rubriken.
- Startar och avslutar ett anrop med respektive startCall()endCall() funktioner.
Innan vi tittar på koden som ringer telefonsamtalet ska vi undersöka hur ACS-åtkomsttoken hämtas och hur telefonsamtalsobjekt skapas. ngOnInit() Leta upp funktionen i 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);
            })
        );
    }
}
```
Den här funktionen utför följande åtgärder:
- Hämtar ett ACS userId och åtkomsttoken genom att anropa acsService.getAcsToken() funktionen.
- När åtkomsttoken har hämtats utför koden följande åtgärder:
  - Skapar en ny instans av och CallClient med hjälp av AzureCommunicationTokenCredential åtkomsttoken.
  - Skapar en ny instans av CallAgent att använda objekten CallClient och AzureCommunicationTokenCredential . Senare ser du att CallAgent används för att starta och avsluta ett anrop.
Öppna acs.services.ts och leta upp getAcsToken() funktionen. Den fullständiga sökvägen till filen är client/src/app/core/acs.service.ts. Funktionen gör en HTTP GET-begäran till den väg som /acstoken exponeras av API-servern.
```
getAcsToken(): Observable<AcsUser> {
    return this.http.get<AcsUser>(this.apiUrl + 'acstoken')
    .pipe(
        catchError(this.handleError)
    );
}
```
En API-serverfunktion med namnet createACSToken() hämtar userId och åtkomsttoken och returnerar den till klienten. Den finns i filen 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 };
}
```
Den här funktionen utför följande åtgärder:
- Kontrollerar om ett ACS-värde connectionString är tillgängligt. Annars returnerar ett objekt med ett tomt userId och token.
- Skapar en ny instans av CommunicationIdentityClient och skickar värdet till den connectionString .
- Skapar en ny användare och token med hjälp av tokenClient.createUserAndToken() omfånget "voip".
- Returnerar ett objekt som innehåller userId värdena och token .
Nu när du har sett hur userId och token hämtas går du tillbaka till phone-call.component.ts och letar upp startCall() funktionen.

Den här funktionen anropas när Samtal har valts i telefonsamtalskomponenten. Det använder objektet CallAgent som nämndes tidigare för att starta ett anrop. Funktionen callAgent.startCall() accepterar ett objekt som representerar numret som ska anropas och det ACS-telefonnummer som används för att ringa samtalet.

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

Funktionen endCall() anropas när Hang Up väljs i telefonsamtalskomponenten.
```
endCall() {
    if (this.call) {
        this.call.hangUp({ forEveryone: true });
        this.call = undefined;
        this.inCall = false;
    }
    else {
        this.hangup.emit();
    }
}
```
Om ett anrop pågår call.hangUp() anropas funktionen för att avsluta anropet. Om inget samtal pågår hangup skickas händelsen till huvudkomponenten för att dölja telefonsamtalskomponenten.
Innan vi går vidare till nästa övning ska vi gå igenom de viktigaste begreppen som beskrivs i den här övningen:
- Ett ACS userId och en åtkomsttoken hämtas från API-servern med hjälp av acsService.createUserAndToken() funktionen .
- Token används för att skapa ett CallClient och CallAgent -objekt.
- Objektet CallAgent används för att starta och avsluta ett anrop genom att anropa callAgent.startCall() funktionerna och callAgent.hangUp() .
Nu när du har lärt dig hur telefonsamtal kan integreras i ett program ska vi byta fokus till att använda Azure Communication Services för att skicka e-post och SMS.

Nästa steg

Kommunikation: Skicka e-post och SMS

Dela via

Kommunikation: Ringa ett telefonsamtal

Använda telefonsamtalsfunktionen

Utforska telefonsamtalskoden

Nästa steg

Feedback

Ytterligare resurser