WebRTC 是一个支持实时音视频通信的开源项目，它主要由 Google 、Mozilla、 Opera 等公司参与开发，同时在其社区中也有各种资深开发者和爱好者贡献了大量的代码和资源。而 Deno 是一个新兴的 JavaScript 运行时环境，由 Node.js 的创始人 Ryan Dahl 开发，它提供了更加安全、简单、现代化的执行环境。
在本文中，我们将探讨如何使用 Deno 中的 WebRTC 库实现实时音视频通信。这将是一篇深度学习和指导意义的文章，我们将从理解、基础概念到代码实现进行较为全面地介绍。
WebRTC 基础概念
在使用 WebRTC 实现实时音视频通信时，我们首先需要了解 WebRTC 的基础概念。
WebRTC 架构
WebRTC 包含两个核心组件：客户端和服务器。客户端支持各种 WebRTC 功能，比如视频和音频采集，媒体协商和传输，解码和播放等。而服务器则负责连接客户端。
WebRTC 架构如下图所示：
------------ ------------
- - - -
- ------ ------------------ - ----------- ------ -
- - - -
------------ ------------
-
-
-
-
------------ ------------
- - - -
- ------ ------------------ - ----------- ------ -
- - - -
------------ ------------
WebRTC 层次结构
WebRTC 层次结构包括四个层次：媒体捕获层、网络传输层、信令层和媒体处理层。
媒体捕获层：负责视频和音频的采集，包括麦克风、摄像头等。
网络传输层：负责数据的传输和封包，包括数据压缩、流控制等。
信令层：负责建立和维护连接，包括媒体协商和 ICE。
媒体处理层：负责视音频的编解码，包括音频处理、视频处理等。
ICE
在 WebRTC 中，ICE（Interactive Connectivity Establishment）是一种网络连接技术，用于将两端之间的网络连接设定为点对点。
ICE 是通过 STUN 和 TURN 协议实现的。STUN（Session Traversal Utilities for NAT）协议用于检测 NAT 类型并获取 NAT 映射，而 TURN（Traversal Using Relays around NAT）协议则用于打通防火墙和 NAT。
使用 ICE 协议建立 WebRTC 连接时，客户端首先会尝试使用 STUN 获取两端的 IP 地址和端口信息。如果两端都是在 NAT 之后，则需要通过 TURN 服务器打通连接。
SDP
SDP（Session Description Protocol）是 WebRTC 中用于媒体协商的协议，用于协商待传输数据的格式、编码方式、传输协议、传输地址等参数。
NAT
NAT（Network Address Translation）是网络地址转换技术，用于将私有网络地址转换为公共网络地址。在 WebRTC 中，NAT 通常是阻碍点对点连接的主要障碍。
Deno 中使用 WebRTC
在了解了 WebRTC 基础概念后，我们现在可以开始在 Deno 中使用 WebRTC 实现实时音视频通信。步骤如下：
步骤 1：安装 WebSocket 和 WebRTC 库
这里我们需要安装两个库：ws 和 webrtc. ws 库用于创建 WebSocket 服务器，webrtc 库则是 WebRTC 的 Deno 实现。
------ - -- --------- ---- ----- ------ - ------------------ --------------------- - ---- ---------
步骤 2：创建 WebSocket 服务器
----- ------ - --- ------------------ ----- ---- ---
步骤 3：处理 WebSocket 连接
----------------------- -------- -- - ----- -- - --- -------------------- -- ---- ----------------- -- --- ---
在这里我们创建了一个 RTCPeerConnection 实例。RTCPeerConnection 是 WebRTC 中最为核心的 API，用于建立点对点连接并传输音视频数据。这里需要注意，需要引入 webrtc 库才能使用 RTCPeerConnection。
步骤 4：配置服务器端和客户端的 ICE
----------------------- -------- -- - ----- -- - --- -------------------------- -- -- ----------------- ------- ------ -- --- ---
连接的两端需要进行 ICE Candidate 的交换以建立 NAT 穿透的点对点连接。我们需要在服务端和客户端分别设置 STUN 和 TURN 服务器信息。
服务器端可以直接使用 Google 的 NAT 服务器（stun:stun.l.google.com:19302），客户端则需要先连接服务器，再通过服务器的信令通道交换 ICE Candidate 信息。
----- ------- ---------------- - -
----------- -
-
----- -------------------------------
--
--
--步骤 5：处理客户端 offer 和 answer
----------------------- -------- -- -
----- -- - --- -------------------------- -- -- ----------------- ------- ------
-- -- -----
----- ----- - ----- -----------------
------------------------------
----------------------------
-- -- ------
-------------------- ----- --------- -- -
----- ---- - --- -------------------------------------------
----- ------------------------------
---
---当客户端连接时，服务器会发送本地的 offer 给客户端，然后等待客户端返回 answer，最终建立点对点连接。
步骤 6：添加流并传输音视频
----------------------- -------- -- -
----- -- - --- -------------------------- -- -- ----------------- ------- ------
-- -- -----
----- ----- - ----- -----------------
------------------------------
----------------------------
-- -- ------
-------------------- ----- --------- -- -
----- ---- - --- -------------------------------------------
----- ------------------------------
---
-- ---
------------------------------------- ------ ----- ------ ---- ---------------- -- -
---------------------------------- -- -
------------------ --------
---
---
-- -----
---------- - ------- -- -
----- ------ - -----------------
----- ----- - --------------------------------
--------------- - -------
---------------------------------
-
---在添加完流后，我们需要等待另一端接收到数据流。当另一端收到数据流后，就可以通过 ontrack 回调函数来处理音视频数据。此外，我们还可以添加一些其他的事件监听器，比如 onicecandidate 事件等来增强功能和交互性。
总结
在 Deno 中使用 WebRTC 实现实时音视频通信很方便。我们首先需要了解 WebRTC 的基础概念，比如 WebRTC 的架构、ICE、SDP 和 NAT 等相关内容。然后，我们只需要使用 Deno 提供的 ws 和 webrtc 库来创建 WebSocket 服务器和 RTCPeerConnection 对象。最终，通过 offer 和 answer 交换，就可以建立点对点音视频连接，并通过添加流和特定事件监听器来传输媒体流和进行交互。
参考文献：
- WebRTC 101: A beginner’s guide to real-time communication
- WebRTC for the Curious
- WebRTC代码实现：Deno WebRTC and WebSocket
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66437cc1d3423812e417e20c