JavaScript

Erstellen Sie den Code für den Empfang eines In-App-Anrufs

Erstellen Sie eine weitere HTML-Datei mit dem Namen client_bob.html.

Fügen Sie den folgenden Code ein, aber achten Sie darauf, dass Sie den Bob JWT einfügen, den Sie für den Benutzer erstellt haben Empfang den Aufruf im vorherigen Schritt als Wert für die token konstant:

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="./node_modules/@vonage/client-sdk/dist/vonageClientSDK.min.js"></script>
  <style>
    input, button {
      font-size: 1rem;
    }
    #answer {
      display: none;
    }
  </style>
</head>

<body>
  <h1>Inbound App Call (Bob)</h1>
  <p id="notification">Lines are open for calls...</p>
  <br />
  <button id="answer">Answer</button>

  <script>
    const answerButton = document.getElementById("answer");
    const notification = document.getElementById("notification");
    const token = 'BOB_JWT';
    const client = new vonageClientSDK.VonageClient();
    let callId = null;

    client.createSession(token)
      .then((sessionId) => {
        console.log(sessionId);
      })
      .catch((error) => {
        console.error(error);
      });

    client.on('callInvite', (_callId) => {
      callId = _callId;
      notification.textContent = "You are receiving a call";
      answerButton.style.display = "inline";
    });

    client.on('callHangup', (callId, callQuality, reason) => {
      callId = null;
      notification.textContent = "Lines are open for calls...";
      answerButton.style.display = "none";
    });

    // Answer the call.
    answerButton.addEventListener("click", () => {
      client.answer(callId)
        .then(() => {
          console.log("Success answering call.");
          notification.textContent = "You are on a call";
          answerButton.style.display = "none";
        })
        .catch(error => {
          console.error("Error answering call: ", error);
        });    
    });
  </script>
</body>

</html>

Dies ist Ihre Client-Anwendung, die das Client SDK verwendet, um einen Sprachanruf vom Benutzer zu empfangen Alice.

Dieser Kodex besteht aus mehreren Schlüsselkomponenten:

Ein Benachrichtigungsfeld, das mit dem Anrufstatus aktualisiert werden kann.
Eine Taste zur Annahme eines eingehenden Anrufs.
Der Code erstellt eine Sitzung unter Verwendung des zuvor generierten JWT.
Der Code richtet einen Event-Handler ein. Er wird bei einer Einladung zu einem eingehenden Anruf ausgelöst. Dieser wiederum richtet einen Click-Button-Event-Handler ein, der den eingehenden Anruf mit der Client SDK-Methode beantwortet answerCall.
Ein weiterer Event-Handler wird eingerichtet, um auf Auflege-Ereignisse zu warten, die ausgelöst werden, wenn die andere Seite des Anrufs auflegt.