Oefening: Oefening: Code voor spraakgesprekken toevoegen - Training

3 minuten

In deze les voegen we meer code toe aan de web-app die in de vorige les is gemaakt. Met deze app kunnen we spraakoproepen maken met Azure Communication Services.

HTML-invoerelementen toevoegen

Om een gesprek te voeren, hebben we twee belangrijke informatie nodig:

Een Azure Communication Services-gebruikerstoegangstoken voor de gebruiker die de aanroep maakt. Dit token identificeert en autoriseert de gebruiker om contact op te nemen met de service en spraakgesprekken te starten.
Wie de gebruiker wil bellen, een Azure Communication Services-gebruikers-id.

Om deze informatie van de gebruiker op te halen, gebruiken we enkele standaardINVOER van HTML-formulieren. Laten we ze dus toevoegen aan ons index.html bestand:

index.html De teksteditor openen

Voeg de volgende HTML toe aan de hoofdtekst van het HTML-bestand, onder de Calling HTML here opmerking:

<input 
    id="token-input"
    type="text"
    placeholder="Your User access token"
/>
<button id="token-submit" type="button">
    Submit
</button>
<br /><br />
<input 
    id="callee-id-input"
    type="text"
    placeholder="Who would you like to call?"
    style="margin-bottom:1em; width: 200px; display: block;"
/>

Het eerste invoerelement is voor het token van de gebruiker die de aanroep doet. De knop Verzenden wordt gebruikt om enkele Azure Communication Services-objecten te instantiëren zodra het token is opgegeven. De tweede invoer is voor het invoeren van de gebruikers-id van de persoon die we willen bellen.

Eenvoudige actieknoppen voor aanroepen toevoegen

We hebben ook enkele knoppen nodig voor enkele eenvoudige aanroepacties waarmee de gebruiker de oproep kan beheren:

Oproep starten
Ophangen

Laten we deze knoppen dus ook toevoegen onder de invoer uit de vorige stap:

<button id="call-button" type="button" disabled="true">
    Start Call
</button>
&nbsp;
<button id="hang-up-button" type="button" disabled="true">
    Hang Up
</button>

De HTML testen

Nu de HTML is ingevoerd, hebben we de meeste HTML voor deze app voltooid. Als u de app uitvoert met dezelfde opdracht als de vorige les: npx parcel index.html en vervolgens de app opent, ziet u de volgende app in uw browser: Screenshot of our blank web app showing in a browser.

Deze app ziet er mogelijk niet veel uit, maar het is alles wat we nodig hebben om een app voor spraakgesprekken te maken. We zijn nu klaar met de HTML van onze app. De rest van de code gebruikt JavaScript.

Enkele afhankelijkheden importeren

Onze eerste stap in ons app.js bestand is het importeren van de afhankelijkheden voor het maken van Azure Communication Services-aanroepen. Deze afhankelijkheden zijn afkomstig van de SDK's die we eerder hebben geïnstalleerd met NPM. Als u ze wilt importeren, voegt u de volgende regels toe aan het app.js bestand:

import { CallClient } from "@azure/communication-calling";
import { AzureCommunicationTokenCredential } from '@azure/communication-common';

De eerste import is een CallClient, die later zal worden gebruikt om onze aanroepen daadwerkelijk te doen. Het verwerkt microfoons, audio etc. allemaal voor u. De tweede import wordt AzureCommunicationTokenCredential gebruikt om de verificatievereisten voor Azure Communication Services af te handelen. Verificatie zorgt ervoor dat we weten wie een gebruiker is wanneer ze een oproep plaatsen.

Verwijzingen naar onze HTML-code krijgen

Eerder hebben we HTML-elementen gemaakt die gebruikers gebruiken om de app te beheren. Als u wilt luisteren naar de gebruiker die met hen communiceert, moeten we verwijzingen naar hen ophalen in ons JavaScript.

Daarnaast hebben we een aantal variabelen nodig voor het opslaan van enkele items, die in onze code worden gebruikt. Voeg de volgende code toe onder app.js de importbewerkingen.

const userToken = document.getElementById("token-input"); 
const submitToken = document.getElementById("token-submit");

const calleeInput = document.getElementById("callee-id-input");

const callButton = document.getElementById("call-button");
const hangUpButton = document.getElementById("hang-up-button");

let call;
let callAgent;
let tokenCredential;

Verificatie afhandelen

Nu zijn we klaar met een aantal basisinstellingen. We kunnen beginnen met het maken van een aantal functies. Het eerste wat we functioneel nodig hebben, is om verificatie af te handelen. Verificatie wordt verwerkt door de gebruiker die een gebruikerstoken invoert in het tokeninvoerelement dat we hebben gemaakt en vervolgens op het token verzenden te klikken. Voor het afhandelen van dit proces in onze code moeten we een klikhandler registreren bij die knop voor het verzenden van tokens, waarmee het gebruikerstoken wordt verwerkt. U kunt deze code direct onder onze variabelen van vóór toevoegen.

submitToken.addEventListener("click", async () => {
  const callClient = new CallClient();
  const userTokenCredential = userToken.value;
    try {
      tokenCredential = new AzureCommunicationTokenCredential(userTokenCredential);
      callAgent = await callClient.createCallAgent(tokenCredential);
      callAgent.on('incomingCall', incomingCallHandler);

      callButton.disabled = false;
      submitToken.disabled = true;
    } catch(error) {
      window.alert("Please submit a valid token!");
    }
})

Deze code:

Hiermee maakt u een Aanroepclient van Azure Communication Services.
Haalt het gebruikerstoken op uit het invoerelement van het token en maakt er een AzureCommunicationTokenCredential mee. Deze referentie wordt gebruikt om alle aanroepen uit te voeren en af te handelen.
Hiermee maakt u een CallAgent, die we gebruiken om te bellen en te ontvangen.
Registreert een inkomende oproephandler, die we binnenkort gaan schrijven.
Hiermee worden enkele van onze knoppen bijgewerkt, zodat de gebruiker verder kan gaan.

Bellen

Met verificatie op de manier waarop we kunnen beginnen met een echte functionaliteit, kunnen we beginnen met het toestaan van de gebruiker om een oproep te doen:

callButton.addEventListener("click", () => {
  // start a call
  const userToCall = calleeInput.value;
  call = callAgent.startCall(
      [{ id: userToCall }],
      {}
  );

  // toggle button states
  hangUpButton.disabled = false;
  callButton.disabled = true;
});

Met deze code wordt een klikhandler geregistreerd op de knop "Oproep starten". Hiermee wordt de nummer-id opgehaald uit het overeenkomende invoerelement en wordt vervolgens de oproepagent gebruikt om een oproep te doen.

Ophangen

Zodra een oproep is geopend, moet de gebruiker ophangen.

hangUpButton.addEventListener("click", () => {
  // end the current call
  call.hangUp({ forEveryone: true });

  // toggle button states
  hangUpButton.disabled = true;
  callButton.disabled = false;
});

Met deze code registreert u een klikhandler op de knop 'Ophangen' en geeft u de aanroep de opdracht om op te hangen.

Een oproep ontvangen

Nu we kunnen bellen, moeten we ook het ontvangen van een oproep afhandelen. Om het ontvangen van een oproep te verwerken, maken we de inkomende oproephandler, die we eerder hebben genoemd.

const incomingCallHandler = async (args) => {
  const incomingCall = args.incomingCall;

  // Accept the call
  await incomingCall.accept();

  // Subscribe to callEnded event and get the call end reason
  incomingCall.on('callEnded', args => {
      console.log(args.callEndReason);
  });
};

Testen

We zijn klaar als u de app uitvoert met dezelfde opdracht als de vorige les: npx parcel index.html en vervolgens opent u de app in uw browser. U hebt een functionele basis-app voor bellen.

Testreferenties verkrijgen

Als u wilt testen of u daadwerkelijk een aanroep wilt doen, hebt u enkele referenties nodig. U kunt referenties verkrijgen via Azure Portal. Open uw Azure Communication Services-resource in Azure Portal en klik op de knop Tokens voor identiteiten en gebruikerstoegang in het linkermenu:

Op de pagina die wordt weergegeven, kunt u testreferenties genereren. Voor deze app hebben we alleen de machtiging 'Spraak- en videogesprekken (VOIP)' nodig, dus controleer die optie en druk op Genereren:

U krijgt één Azure Communication Services-identiteit, die geschikt is voor testen. Zorg ervoor dat u het token en de id naar een veilige locatie kopieert om te testen, zoals een leeg kladblokdocument.

Screenshot of the token generation window with test credentials showing.

Als u een andere gebruiker wilt aanroepen, genereert u een extra set referenties.

De eerste wordt gebruikt voor de aanroepende gebruiker en de tweede voor de ontvangende gebruiker.

In een echte app moet u onze identiteitssystemen en clientbibliotheken gebruiken om deze referenties te maken en op te slaan. Op deze manier hoeft een echte gebruiker deze items niet handmatig te kopiëren en in te voeren. Raadpleeg de koppelingen aan het einde van deze module voor meer informatie over dit concept.

De Echo-bot aanroepen

Azure Communication Services heeft een Echo-bot, die u kunt aanroepen om uw microfoon te testen. Echo-bot is compatibel met deze app. De Echo-bot aanroepen:

De app openen in uw browser
Plak een opgeslagen token in het invoerelement van het gebruikerstoken.
Druk op de knop Verzenden
Voer de gebruikers-id van de Echo-bot in 8:echo123
Druk op Gesprek starten

Mogelijk wordt u in uw browser gevraagd om een aantal dialoogvensters voor microfoonmachtigingen. Zorg er dus voor dat u deze accepteert. Als alles goed is uitgewerkt, moet u een gesprek voeren met de Echo-bot. Hiermee kunt u een kort bericht opnemen, dat vervolgens naar u wordt afgespeeld.

Een andere gebruiker bellen

U kunt ook een andere gebruiker aanroepen met deze app. U hebt de tweede set referenties nodig die u eerder hebt gegenereerd:

Open twee kopieën van de app. Er moeten meerdere tabbladen of vensters worden gebruikt om het aanroepen van een andere gebruiker te simuleren.
Voer in de eerste kopie het eerste gebruikerstoken in dat is opgeslagen vanuit de referentiegenerator en druk op Verzenden
Voer in de tweede kopie het tweede gebruikerstoken in dat is opgeslagen vanuit de referentiegenerator en druk op Verzenden
Voer in het eerste exemplaar de tweede gebruikers-id in in het invoerelement 'Wie wilt u aanroepen?'.
Klik opnieuw vanaf de eerste kopie op Gesprek starten.

Als beide tabbladen/vensters zich op hetzelfde apparaat bevinden, kan het gesprek echo's hebben, maar wordt het proces en de aanroepen weergegeven die werken tussen twee browsertabbladen. Als u uw app implementeert op een webserver waartoe meerdere computers toegang hebben, kunt u een echte spraakoproep zonder echo hebben.

Doorgaan

Oefening: Code voor spraakgesprekken toevoegen