结束呼叫

你已经快完成了!最后一件事是确保你的呼叫者有一种结束通话的方式。最优雅的方式是使用 close() 函数关闭连接,你可以在挂断按钮的事件侦听器中执行这个操作。

  1. 在你的 script.js 文件的末尾添加以下内容:
    js
    const hangUpBtn = document.querySelector(".hangup-btn");
    hangUpBtn.addEventListener("click", () => {
      conn.close();
      showCallContent();
    });
    
  2. 当连接关闭时,你还需要显示正确的 HTML 内容,所以你可以直接调用你的 showCallContent() 函数。在 call 事件内部,你还需要确保远程浏览器也更新。为了实现这一点,在 peer.on('call', (stream) => { } 事件监听器内部,添加另一个事件监听器在条件块内。
    js
    conn.on("close", () => {
      showCallContent();
    });
    
    这样,如果发起通话的人首先点击了“挂断”,两个浏览器仍然会更新到新的状态。
  3. 再次测试你的应用程序,并尝试关闭通话。

备注:conn 变量上调用的 on('close') 事件在 Firefox 中尚不可用;这意味着在 Firefox 中,每个呼叫者都必须单独挂断。

警告: 目前我们编写的代码意味着当一个连接关闭时,只有发起通话的人首先点击“挂断”时,两个浏览器才会更新。如果回答通话的人先点击“挂断”,则另一个呼叫者也必须点击“挂断”才能看到正确的 HTML。