Ćwiczenie — dodawanie kodu połączeń głosowych

  • 3 min

W tej lekcji dodamy więcej kodu do aplikacji internetowej utworzonej w poprzedniej lekcji. Ta aplikacja umożliwi nam wykonywanie połączeń głosowych za pomocą usług Azure Communication Services.

Dodawanie wejściowych elementów HTML

Aby wykonać połączenie, potrzebujemy dwóch ważnych informacji:

  1. Token dostępu użytkownika usług Azure Communication Services dla użytkownika wykonującego wywołanie. Ten token identyfikuje i autoryzuje użytkownika do kontaktowania się z usługą i inicjowania połączeń głosowych.
  2. KtoTo użytkownik chce wywołać identyfikator użytkownika usług Azure Communication Services.

Aby uzyskać te informacje od użytkownika, użyjemy standardowych danych wejściowych formularza HTML. Dodajmy je do naszego index.html pliku:

  1. Otwórz plik index.html w edytorze tekstów

  2. Dodaj następujący kod HTML do treści pliku HTML w komentarzu Calling HTML here :

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

Pierwszym elementem wejściowym będzie token użytkownika wykonującego wywołanie. Przycisk przesyłania będzie używany do tworzenia wystąpień niektórych obiektów usług Azure Communication Services po podaniu tokenu. Drugie dane wejściowe będą dotyczyć wprowadzania identyfikatora użytkownika osoby, którą chcemy wywołać.

Dodawanie przycisków akcji wywołania podstawowego

Potrzebujemy również przycisków dla niektórych podstawowych akcji wywołania, które umożliwiają użytkownikowi sterowanie wywołaniem:

  1. Rozpocznij połączenie
  2. Rozłącz się

Dodajmy również te przyciski pod danymi wejściowymi z poprzedniego 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>

Testowanie kodu HTML

Po wprowadzeniu kodu HTML wykonaliśmy większość kodu HTML dla tej aplikacji. Jeśli uruchomisz aplikację przy użyciu tego samego polecenia co w poprzedniej lekcji: npx parcel index.html a następnie otworzysz aplikację, w przeglądarce powinna zostać wyświetlona następująca aplikacja: Screenshot of our blank web app showing in a browser.

Ta aplikacja może nie wyglądać jak wiele, ale to wszystko, czego potrzebujemy, aby utworzyć aplikację do wywoływania głosowego. Teraz skończyliśmy z kodem HTML naszej aplikacji. Pozostała część kodu będzie używać języka JavaScript.

Importowanie niektórych zależności

Pierwszym krokiem w naszym app.js pliku jest zaimportowanie zależności do wykonywania wywołań usług Azure Communication Services. Te zależności pochodzą z zestawów SDK zainstalowanych wcześniej z użyciem narzędzia NPM. Aby je zaimportować, dodaj następujące wiersze do app.js pliku:

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

Pierwszy import to CallClientelement , który będzie używany później do faktycznego nawiązywania połączeń. Obsługuje mikrofony, dźwięk itp. dla Ciebie. Drugi import AzureCommunicationTokenCredential służy do obsługi wymagań dotyczących uwierzytelniania dla usług Azure Communication Services. Uwierzytelnianie gwarantuje, że wiemy, kto jest użytkownikiem podczas umieszczenia wywołania.

Pobieranie odwołań do naszego kodu HTML

Wcześniej utworzyliśmy elementy HTML, których użytkownicy będą używać do kontrolowania aplikacji. Aby nasłuchiwać użytkownika korzystającego z nich, musimy uzyskać odwołania do nich w języku JavaScript.

Ponadto potrzebujemy kilku zmiennych do przechowywania niektórych elementów, które są używane w całym kodzie. Dodaj następujący kod, aby app.js pod importem.

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;

Obsługa uwierzytelniania

Teraz skończymy z podstawową konfiguracją, możemy rozpocząć tworzenie niektórych funkcji. Pierwszą rzeczą, której potrzebujemy funkcjonalnie, jest obsługa uwierzytelniania. Uwierzytelnianie będzie obsługiwane przez użytkownika wprowadzającego token użytkownika do utworzonego przez nas elementu wejściowego tokenu, a następnie klikając pozycję "Prześlij token". Aby obsłużyć ten proces w naszym kodzie, musimy zarejestrować procedurę obsługi kliknięć w tym przycisku przesyłania tokenu, który będzie przetwarzać token użytkownika. Ten kod można dodać bezpośrednio pod naszymi zmiennymi przed.

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

Ten kod:

  1. Tworzy klienta wywołania usług Azure Communication Services.
  2. Pobiera token użytkownika z elementu wejściowego tokenu i tworzy go AzureCommunicationTokenCredential za pomocą. To poświadczenie służy do tworzenia i obsługi wszystkich wywołań.
  3. Tworzy obiekt CallAgent, którego używamy do tworzenia i odbierania wywołań.
  4. Rejestruje program obsługi wywołań przychodzących, który wkrótce napiszemy.
  5. Aktualizacje niektóre z naszych przycisków, aby użytkownik mógł kontynuować.

Wykonywanie połączeń

Dzięki uwierzytelnieniu możemy zacząć od niektórych rzeczywistych funkcji, zacznijmy od umożliwienia użytkownikowi wykonania wywołania:

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

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

Ten kod rejestruje procedurę obsługi kliknięć na przycisku "Rozpocznij wywołanie". Pobiera identyfikator wywoływany z pasującego elementu wejściowego, a następnie używa agenta wywołania do wywołania.

Wiszące

Po otwarciu połączenia musimy zezwolić użytkownikowi na zawieszanie się.

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

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

Ten kod rejestruje procedurę obsługi kliknięć na przycisku "Zawieszaj się", a następnie po prostu instruuje wywołanie, aby zawiesiło się.

Odbieranie połączenia

Teraz, gdy możemy wykonać połączenie, musimy również obsługiwać odbieranie połączenia. Aby obsłużyć odbieranie wywołania, utworzymy procedurę obsługi wywołań przychodzących, o której wspomniano wcześniej.

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

Testowanie

Skończymy, jeśli uruchomisz aplikację przy użyciu tego samego polecenia co poprzednia lekcja: npx parcel index.html a następnie otwórz aplikację w przeglądarce. Będziesz mieć funkcjonalną podstawową aplikację wywołującą!

Uzyskiwanie poświadczeń testowych

Aby przetestować faktycznie wywołanie, potrzebne są pewne poświadczenia. Poświadczenia można uzyskać w witrynie Azure Portal. Otwórz zasób usług Azure Communication Services w witrynie Azure Portal i kliknij przycisk "Tożsamości i tokeny dostępu użytkowników" w menu po lewej stronie:

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

Na wyświetlonej stronie można wygenerować poświadczenia testowe. W przypadku tej aplikacji potrzebujemy tylko uprawnienia "Voice and video calling (VOIP)", aby sprawdzić tę opcję i nacisnąć przycisk generuj:

Screenshot of the token generation window with VOIP option checked.

Uzyskasz pojedynczą tożsamość usług Azure Communication Services, która jest odpowiednia do testowania. Pamiętaj, aby skopiować token i identyfikator do bezpiecznego miejsca na potrzeby testowania, na przykład pusty dokument notatnika.

Screenshot of the token generation window with test credentials showing.

Jeśli chcesz spróbować wywołać innego użytkownika, wygeneruj dodatkowy zestaw poświadczeń.

Pierwszy będzie używany dla użytkownika wywołującego, a drugi dla odbierającego użytkownika.

W rzeczywistej aplikacji należy używać naszych systemów tożsamości i bibliotek klienckich do tworzenia i przechowywania tych poświadczeń. W ten sposób użytkownik rzeczywisty nie musi ręcznie kopiować i wprowadzać tych elementów. Aby uzyskać więcej informacji na temat tej koncepcji, zapoznaj się z linkami na końcu tego modułu.

Wywoływanie bota echo

Usługa Azure Communication Services ma bota echo, który można wywołać w celu przetestowania mikrofonu. Echo Bot jest zgodny z tą aplikacją. Aby wywołać bota echo:

  1. Otwieranie aplikacji w przeglądarce
  2. Wklej zapisany token do elementu wejściowego tokenu użytkownika.
  3. Naciśnij przycisk "Prześlij"
  4. Wprowadź identyfikator użytkownika echo bota 8:echo123
  5. Naciśnij pozycję "Rozpocznij połączenie"

Przeglądarka może wyświetlić monit z niektórymi oknami dialogowymi uprawnień mikrofonu, aby upewnić się, że je zaakceptujesz. Jeśli wszystko działa prawidłowo, należy wykonać połączenie z botem Echo. Umożliwi to zarejestrowanie krótkiej wiadomości, która następnie będzie odtwarzana.

Wywoływanie innego użytkownika

Możesz również wywołać innego użytkownika z tą aplikacją. Będziesz potrzebować drugiego zestawu poświadczeń, które wygenerowano wcześniej:

  1. Otwórz dwie kopie aplikacji, wiele kart lub okien powinno służyć do symulowania wywoływania innego użytkownika.
  2. W pierwszej kopii wprowadź pierwszy token użytkownika zapisany z generatora poświadczeń i naciśnij klawisz "Submit"
  3. W drugiej kopii wprowadź drugi token użytkownika zapisany z generatora poświadczeń i naciśnij klawisz "Submit"
  4. W pierwszej kopii wprowadź drugi identyfikator użytkownika w elemecie wejściowym "KtoTo chcesz wywołać?"
  5. Ponownie z pierwszej kopii kliknij przycisk "Rozpocznij połączenie".

Jeśli obie karty/okna znajdują się na tym samym urządzeniu, wywołanie może mieć echo, ale wyświetla proces i wywołuje działanie między dwiema kartami przeglądarki. Jeśli wdrożysz aplikację na serwerze internetowym, do którego może uzyskiwać dostęp wiele maszyn, będziesz mieć prawdziwe połączenie głosowe bez echa.