JavaScript

Erstellen einer clientseitigen Anwendung

Erstellen Sie eine HTML-Datei mit dem Namen client_js.html. Fügen Sie den folgenden Code hinzu, aber stellen Sie sicher, dass Sie den JWT, den Sie im vorherigen Schritt für den Benutzer generiert haben, als Wert für die Option 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, #reject, #hangup {
      display: none;
    }
  </style>
</head>

<body>
  <h1>Inbound PSTN phone call</h1>
  <p id="notification">Lines are open for calls...</p>
  <br />
  <button type="button" id="answer">Answer</button>
  <button type="button" id="reject">Reject</button>
  <button type="button" id="hangup">Hang Up</button>

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

    client.createSession(token)
      .then(sessionId => {
        console.log("Id of created session: ", sessionId);
      })
      .catch(error  => { 
        console.error("Error creating session: ", error);
      });

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

    client.on('legStatusUpdate', (_callId, legId, status) => {
      notification.textContent = `Caller Leg Status is: ${status}`;
    });

    client.on("callHangup", (_callId, callQuality, reason) => {
      console.log(`Call ${_callId} has hung up, callQuality:${callQuality}, reason:${reason}`);
      callId = null;
      notification.textContent = "Lines are open for calls...";
      answerButton.style.display = "none";
      rejectButton.style.display = "none";
      hangUpButton.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";
          rejectButton.style.display = "none";
          hangUpButton.style.display = "inline";
        })
        .catch(error => {
          console.error("Error answering call: ", error);
        });    
    });

    // Reject the call
    rejectButton.addEventListener("click", () => {
      client.reject(callId)
        .then(() => {
          console.log("Success rejecting call.");
          notification.textContent = "You rejected the call";
          answerButton.style.display = "none";
          rejectButton.style.display = "none";
        })
        .catch(error => {
          console.error("Error rejecting call: ", error);
        });          
    });

    // Hang up the call
    hangUpButton.addEventListener("click", () => {
      client.hangup(callId)
        .then(() => {
          console.log("Success hanging up call.");
          notification.textContent = "You ended the call";
          answerButton.style.display = "none";
          rejectButton.style.display = "none";
          hangUpButton.style.display = "none";
        })
        .catch(error => {
          console.error("Error hanging up call: ", error);
        });                
    });
  </script>
</body>

</html>

Dies ist Ihre Webanwendung, die das Client SDK verwendet, um einen eingehenden Anruf anzunehmen.

Die wichtigsten Merkmale dieses Codes sind:

Ein Benachrichtigungsfeld, das mit dem Anrufstatus aktualisiert werden kann.
Eine Taste zur Annahme eines eingehenden Anrufs.
Eine Schaltfläche zum Abweisen eines eingehenden Anrufs.
Eine Taste zum Auflegen eines eingehenden Anrufs.
Der Code erstellt eine Sitzung unter Verwendung des zuvor generierten JWT.
Der Code richtet zwei Hauptereignishandler ein.
1. Der erste wird bei einer Einladung zu einem eingehenden Anruf ausgelöst. Dies wiederum setzt 3 Click-Button-Event-Handler ein, die den eingehenden Anruf unter Verwendung der Client SDK-Methoden beantworten, ablehnen und auflegen answer, rejectund hangup beziehungsweise.
2. Der zweite empfängt Aktualisierungen des Anrufstatus und setzt den Text des Benachrichtigungsfelds auf den Status des eingehenden Anrufs.