JavaScript

In-App Voiceコールを受信するコードを作成する。

という名前の別のHTMLファイルを作成する。 client_bob.html.

以下のコードを追加してください。ただし、ユーザー用に生成したBob JWTを貼り付けてください。 受け入れ の値として、先のステップで呼び出した token 一定している：

<!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>

これは、Client SDKを使用してユーザーから音声通話を受信するクライアントアプリケーションです。 Alice.

このコードにはいくつかの重要な要素がある：

通話状況を更新できる通知ボックス。
着信に応答するためのボタン。
このコードは、先に生成されたJWTを使ってセッションを作成する。
このコードはイベントハンドラを設定する。このイベントは、着信コールの招待で発生する。これは、Client SDKメソッドを使用して着信コールに応答するクリックボタンイベントハンドラを設定します。 answerCall.
もうひとつのイベントハンドラは、電話を切るイベントをリッスンするようにセットアップされている。