Cvičení – přidání kódu hlasového volání

  • 3 min

V této lekci přidáme do webové aplikace vytvořené v předchozí lekci další kód. Tato aplikace nám umožní provádět hlasové hovory pomocí služeb Azure Communication Services.

Přidání vstupních elementů HTML

Abychom mohli zavolat, budeme potřebovat dvě důležité informace:

  1. Přístupový token uživatele služby Azure Communication Services pro uživatele, který volá. Tento token identifikuje a autorizuje uživatele, aby kontaktoval službu a zahájil hlasové volání.
  2. Kdo chce uživatel volat, ID uživatele služby Azure Communication Services.

K získání těchto informací od uživatele použijeme některé standardní vstupy formulářů HTML. Pojďme je tedy přidat do souboru index.html :

  1. Otevření textového editoru index.html

  2. Do textu souboru Calling HTML here HTML přidejte do komentáře následující kód HTML:

    <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;"
/>

První vstupní prvek bude pro token uživatele provádějícího volání. Tlačítko Odeslat se použije k vytvoření instance některých objektů Azure Communication Services po poskytnutí tokenu. Druhým vstupem bude zadání ID uživatele osoby, které chceme zavolat.

Přidání tlačítek základních akcí volání

Budeme také potřebovat některá tlačítka pro některé základní akce volání, které uživateli umožňují řídit volání:

  1. Zahájit hovor
  2. Zavěs

Pojďme tedy přidat tato tlačítka pod vstupy z předchozího kroku:

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

Testování kódu HTML

Se zadaným kódem HTML jsme dokončili většinu kódu HTML pro tuto aplikaci. Pokud spustíte aplikaci se stejným příkazem jako v předchozí lekci: npx parcel index.html Pak aplikaci otevřete, měla by se v prohlížeči zobrazit následující aplikace: Screenshot of our blank web app showing in a browser.

Tato aplikace nemusí vypadat moc, ale všechny vizuální prvky, které potřebujeme k vytvoření aplikace pro hlasové volání. Teď už máme kód HTML naší aplikace. Zbytek kódu bude používat JavaScript.

Import některých závislostí

Prvním krokem v souboru app.js je import závislostí pro volání služeb Azure Communication Services. Tyto závislosti pocházejí ze sad SDK, které jsme dříve nainstalovali s NPM. Pokud je chcete importovat, přidejte do app.js souboru následující řádky:

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

Prvním importem je , CallClientkterý se použije později k skutečně volání. Zpracovává mikrofony, zvuk atd. vše za vás. Druhý import AzureCommunicationTokenCredential se používá ke zpracování požadavků na ověřování pro službu Azure Communication Services. Ověřování zajišťuje, že víme, kdo je uživatel při volání.

Získání odkazů na kód HTML

Dříve jsme vytvořili elementy HTML, které budou uživatelé používat k řízení aplikace. Abychom mohli naslouchat uživatelům, kteří s nimi pracují, musíme na ně v JavaScriptu získat odkazy.

Kromě toho potřebujeme několik proměnných k uložení některých položek, které se používají v celém kódu. Pod importy přidejte následující kód app.js .

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;

Zpracování ověřování

Teď jsme dokončili základní nastavení, můžeme začít vytvářet některé funkce. První věcí, kterou potřebujeme funkčně, je zpracování ověřování. Ověřování bude zpracováno uživatelem, který zadá token uživatele do vstupního prvku tokenu, který jsme vytvořili, a poté klikne na "Odeslat token". Abychom tento proces mohli zpracovat v kódu, musíme zaregistrovat obslužnou rutinu kliknutí na tlačítko odeslat token, které zpracuje token uživatele. Tento kód můžete přidat přímo pod proměnné z dříve.

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

Tento kód:

  1. Vytvoří klienta volání služeb Azure Communication Services.
  2. Načte token uživatele ze vstupního prvku tokenu a vytvoří s ním token AzureCommunicationTokenCredential . Tyto přihlašovací údaje slouží k provádění a zpracování všech volání.
  3. Vytvoří , CallAgentkterý používáme k volání a přijímání volání.
  4. Zaregistruje obslužnou rutinu příchozího volání, kterou za chvíli napíšeme.
  5. Aktualizace některé z našich tlačítek, aby mohl uživatel pokračovat.

Volání

S ověřováním mimo způsob, jakým můžeme začít s některými skutečnými funkcemi, můžeme začít tím, že uživateli umožníte volat:

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

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

Tento kód zaregistruje obslužnou rutinu kliknutí na tlačítku Zahájit volání. Načte volané ID z odpovídajícího vstupního elementu a pak pomocí agenta volání provede volání.

Zavěsit

Jakmile je hovor otevřený, musíme uživateli povolit, aby zavěsil.

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

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

Tento kód zaregistruje obslužnou rutinu kliknutí na tlačítko "Zavěsit" a pak zavolá volání, aby zavěsil.

Přijetí hovoru

Teď, když můžeme volat, musíme také zpracovat příjem hovoru. Abychom mohli zpracovat příjem volání, vytvoříme obslužnou rutinu příchozího volání, kterou jsme zmínili dříve.

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

Testování

Dokončili jsme to, pokud aplikaci spustíte se stejným příkazem jako v předchozí lekci: npx parcel index.html a pak aplikaci otevřete v prohlížeči. Budete mít funkční základní volající aplikaci.

Získání testovacích přihlašovacích údajů

K otestování skutečně volání budete potřebovat nějaké přihlašovací údaje. Přihlašovací údaje můžete získat z webu Azure Portal. Otevřete prostředek služby Azure Communication Services na webu Azure Portal a v nabídce vlevo klikněte na tlačítko Identities & User Access Tokens (Identityies & User Access Tokens):

Screenshot of the Azure portal, showing the Identities & User Access Tokens menu option highlighted.

Na stránce, která se zobrazí, můžete vygenerovat testovací přihlašovací údaje. Pro tuto aplikaci potřebujeme jenom oprávnění "Hlasové hovory a videohovory (VOIP)", takže zaškrtněte tuto možnost a stiskněte vygenerovat:

Screenshot of the token generation window with VOIP option checked.

Získáte jednu identitu služby Azure Communication Services, která je vhodná pro testování. Nezapomeňte token a ID zkopírovat na bezpečné místo pro testování, například prázdný dokument poznámkového bloku.

Screenshot of the token generation window with test credentials showing.

Pokud chcete zkusit volat jiného uživatele, vygenerujte další sadu přihlašovacích údajů.

První se použije pro volajícího uživatele a druhý pro přijímajícího uživatele.

V reálné aplikaci byste měli k vytvoření a uložení těchto přihlašovacích údajů použít naše systémy identit a klientské knihovny. Tímto způsobem uživatel z reálného světa nemusí tyto položky kopírovat a zadávat ručně. Další informace o tomto konceptu najdete na odkazech na konci tohoto modulu.

Volání robota Echo

Služba Azure Communication Services má robota Echo, který můžete volat k otestování mikrofonu. Echo Bot je kompatibilní s touto aplikací. Volání robota Echo:

  1. Otevření aplikace v prohlížeči
  2. Vložte uložený token do vstupního prvku tokenu uživatele.
  3. Stiskněte tlačítko Odeslat.
  4. Zadejte ID uživatele Echo Bota. 8:echo123
  5. Stiskněte "Zahájit hovor"

Prohlížeč vás může vyzvat k některým dialogovým oknem oprávnění mikrofonu, abyste je přijali. Pokud všechno správně fungovalo, měli byste být na hovoru s Echo Botem. Umožní vám nahrát krátkou zprávu, kterou si pak přehrajete.

Volání jiného uživatele

Můžete také volat jinému uživateli s touto aplikací, budete potřebovat druhou sadu přihlašovacích údajů, kterou jste vygenerovali dříve:

  1. Otevření dvou kopií aplikace, více karet nebo oken by se mělo použít k simulaci volání jiného uživatele.
  2. V první kopii zadejte první uživatelský token uložený z generátoru přihlašovacích údajů a stiskněte tlačítko Odeslat.
  3. V druhé kopii zadejte druhý uživatelský token uložený z generátoru přihlašovacích údajů a stiskněte "Submit" (Odeslat).
  4. Z první kopie zadejte druhé ID uživatele do vstupního prvku "Kdo chcete volat?".
  5. Znovu z první kopie klikněte na Zahájit hovor.

Pokud jsou obě karty nebo okna na stejném zařízení, může volání obsahovat ozvěny, ale zobrazuje proces a volání pracující mezi dvěma kartami prohlížeče. Pokud nasadíte aplikaci na webový server, ke kterému má přístup více počítačů, budete moct bez odezvy mít skutečný hlasový hovor.