在现代的网页应用中，实时通信已经变得越来越重要。实时视频聊天是其中的一个重要应用场景。本文将介绍如何使用 Express.js、Socket.IO 和 WebRTC 实现实时视频聊天。
Socket.IO
Socket.IO 是一个基于 WebSocket 的实时通信库，它允许客户端和服务器之间进行双向通信。Socket.IO 有许多功能，例如房间、广播、命名空间等。在本文中，我们将使用 Socket.IO 来建立一个实时的视频聊天室。
首先，我们需要在 Express.js 中安装 Socket.IO：
npm install socket.io
然后，在 Express.js 的应用程序中，我们需要启动一个 Socket.IO 服务器：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ------ - ----------------------------
----- -- - -----------------------------
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
----------------- ---------------
---
---
------------------- -- -- -
---------------------- -- ---------
---在上面的代码中，我们启动了一个 HTTP 服务器，并将其传递给 Socket.IO 创建的服务器。然后，我们监听 'connection' 事件，当有客户端连接到服务器时触发。在 'connection' 事件中，我们可以监听客户端发送的消息，例如 'disconnect' 事件表示客户端断开连接。
WebRTC
WebRTC 是一个开放的实时通信协议，它允许浏览器之间直接进行点对点通信。WebRTC 使用了 ICE（Interactive Connectivity Establishment）、STUN（Session Traversal Utilities for NAT）和 TURN（Traversal Using Relays around NAT）等技术，以确保通信的可靠性和安全性。
在本文中，我们将使用 WebRTC 来实现实时视频聊天。首先，我们需要在客户端中使用 getUserMedia() 方法来获取用户的摄像头和麦克风：
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then((stream) => {
const video = document.querySelector('video');
video.srcObject = stream;
})
.catch((err) => {
console.error(err);
});在上面的代码中，我们使用了 Promise 来获取用户的媒体设备，并将流传递给视频元素的 srcObject 属性。这样，我们就可以在浏览器中看到用户的视频和听到用户的声音。
接下来，我们需要使用 WebRTC 的 RTCPeerConnection 对象来建立点对点连接：
-- -------------------- ---- -------
----- -- - --- --------------------
----------------- - ------- -- -
-- ----------------- -
--------------------------- -----------------
-
--
---------- - ------- -- -
----- ----- - --------------------------------
--------------- - -----------------
--
------------------------------------- ------ ----- ------ ---- --
-------------- -- -
---------------------------------- -- -
------------------ --------
---
----------------------------- -- -
------------------------------
-------------------- -------
---
--
------------ -- -
-------------------
---在上面的代码中，我们先创建了一个 RTCPeerConnection 对象。然后，我们监听 onicecandidate 事件，当有 ICE 候选者可用时触发。我们将候选者发送给服务器，以便另一个客户端可以连接到我们。
接着，我们监听 ontrack 事件，当有远程流可用时触发。我们将远程流传递给视频元素的 srcObject 属性，以便我们可以看到远程用户的视频和听到远程用户的声音。
最后，我们使用 getUserMedia() 方法获取用户的媒体设备，并将流添加到 RTCPeerConnection 对象中。然后，我们创建一个 offer，并将其发送给服务器，以便另一个客户端可以连接到我们。
实时视频聊天室
现在，我们已经了解了如何使用 Socket.IO 和 WebRTC 来实现实时视频聊天。我们可以将它们结合起来，创建一个实时视频聊天室。
首先，我们需要在客户端中监听服务器发送的 'offer' 和 'icecandidate' 事件：
-- -------------------- ---- -------
------------------ ------- -- -
----- -- - --- --------------------
----------------- - ------- -- -
-- ----------------- -
--------------------------- -----------------
-
--
---------- - ------- -- -
----- ----- - --------------------------------
--------------- - -----------------
---------------------------------
--
------------------------------------- ------ ----- ------ ---- --
-------------- -- -
---------------------------------- -- -
------------------ --------
---
-------------------------------
------------------------------- -- -
-------------------------------
--------------------- --------
---
--
------------ -- -
-------------------
---
---
------------------------- ----------- -- -
----- -- - --- --------------------
----------------- - ------- -- -
-- ----------------- -
--------------------------- -----------------
-
--
---------- - ------- -- -
----- ----- - --------------------------------
--------------- - -----------------
---------------------------------
--
------------------------------------- ------ ----- ------ ---- --
-------------- -- -
---------------------------------- -- -
------------------ --------
---
------------------------------
--
------------ -- -
-------------------
---
---在上面的代码中，我们监听服务器发送的 'offer' 和 'icecandidate' 事件。当服务器发送 offer 时，我们创建一个 RTCPeerConnection 对象，并监听 onicecandidate 和 ontrack 事件。然后，我们使用 getUserMedia() 方法获取用户的媒体设备，并将流添加到 RTCPeerConnection 对象中。接着，我们将 offer 设置为远程描述，并创建一个 answer，将其设置为本地描述，并将其发送给服务器。
当服务器发送 icecandidate 时，我们创建一个 RTCPeerConnection 对象，并监听 onicecandidate 和 ontrack 事件。然后，我们使用 getUserMedia() 方法获取用户的媒体设备，并将流添加到 RTCPeerConnection 对象中。接着，我们将候选者添加到 RTCPeerConnection 对象中。
最后，我们需要在客户端中发送 offer、answer 和 icecandidate：
socket.emit('offer', offer);
socket.emit('answer', answer);
socket.emit('icecandidate', candidate);结论
在本文中，我们介绍了如何使用 Express.js、Socket.IO 和 WebRTC 实现实时视频聊天。我们首先介绍了 Socket.IO 和 WebRTC 的基本概念和用法，然后结合起来创建了一个实时视频聊天室。希望本文能够帮助您了解实时通信的基本原理和实现方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6766b89398e3e1ab1a70613b