在现代互联网应用的开发中，音视频通话已经成为非常常见的功能。而随着 Deno 的快速发展，越来越多的开发者开始将其作为前端类应用的开发工具。那么，在 Deno 中，我们如何使用 WebSocket 进行音视频通话呢？
本文将从 WebSocket 基础知识、音视频传输协议以及实际代码实现三个方面来详细阐述这个问题。
WebSocket 基础知识
WebSocket 协议是一种在单个 TCP 连接上进行全双工通信的协议。这意味着，在客户端与服务器端建立 WebSocket 连接之后，双方都能够随时向对方发送数据，并接收对方的数据。WebSocket 连接通常是在 HTTP 连接的基础上建立，具体而言，握手过程如下图：
由此可见，像 HTTP 一样，WebSocket 也是通过建立连接然后传输数据的方式来实现通信的。只不过 WebSocket 能够保持长连接，随时进行双向通信，相比于 HTTP 大幅增加了其应用场景和效率。
音视频传输协议
在进行音视频通话时，我们通常需要使用到实时传输协议（Real-time Transport Protocol，简称 RTP）。RTP 是一种用于实时传输音视频等时间关键性数据的协议，它能够同时传输音视频数据、时间戳和序列号等相关信息，并保障数据按时传送到接收端。此外，RTP 还需要与 RTCP（Real-time Transport Control Protocol）协议配合工作，来监测网络状态和调整传输速率等。
在 JavaScript 中，我们可以使用开源的 webrtc-adapter 库来实现 RTC（Real-time Communication）功能。
实际代码实现
现在，我们尝试在 Deno 中使用 WebSocket 实现音视频通话。以下是示例代码：
-- -------------------- ---- -------
-- ------
------ - --------- - ---- ----------------------------------
------ - -- - ---- ------------------------------------
------ - ----- - ---- ---------------------------------------
------ - ---------------- ---------- - ---- ----------------------------------
------ - -------------- - ---- -----------------------------------------------
------ - ------------------ --------------------- - ---- ----------------------------------
------ - -------------- - ---- -----------------------------------------------
------ - ------------ - ---- ---------------------------------------------
------ - ------------ - ---- ---------------------------------------------
-- -- ------ --
--- ------------ -------------- - ---- - -----
--- ------------ -------------- - ---- - -----
--- -------------- ----------------- - ---- - -----
--- -------------- ----------------- - ---- - -----
--- ----------- --------------------- - ---- - -----
--- ----------- --------------------- - ---- - -----
--- ---------- ------------ - ---- - -----
--- ---------- ------------ - ---- - -----
-- -- --------- ---
----- ------ - ------- ----- ---- ---
---------------------- ------ ------- -- ---- ----------
-- -------
----- -------- --------------------- ----------- ------------- -
---------------------- ---------- ---------------
-- ----------
--- -
--- ----- ------ --- -- ----- -
---------------------- -------- -------- -- -----
----- ---- - ---------------------------
-- ------- ---------------------
-- ---------- --- -------- -
-- ---------------- --------------
-- ----------- --- -------- -
--------------------- ----- --------------------
------------- - --- --------------------
---------------------------- - -- --------- -- -- -
-- ----------- -
--------------------------
----- ------------
------ --------
---------- ------------------
----
-
--
--------- - --- ---------------
--------------------------------------------------- --------------
--------------------------------------- ------- -- -
--------------------- ----- ---------
----- --------- - ----------------------------------------
------------------- - --- ---------------------------
-----------------
---
- ---- -- ----------- --- -------- -
--------------------- ----- --------------------
------------- - --- --------------------
---------------------------- - -- --------- -- -- -
-- ----------- -
--------------------------
----- ------------
------ --------
---------- ------------------
----
-
--
--------- - --- ---------------
--------------------------------------------------- --------------
--------------------------------------- ------- -- -
--------------------- ----- ---------
----- --------- - ----------------------------------------
------------------- - --- ---------------------------
-----------------
---
-
-- -- --- ----- ------
----- ----- - ----- ----------- --- ------- - ---------------------------- - ------------------------------
-- ----------- --- -------- -
---------- - ------
------------------------------------------
- ---- -
---------- - ------
------------------------------------------
-
--------------------------
----- --------
------ -----------
---- --------------
----
-- ------- ----------------------
- ---- -- ---------- --- --------- -
-- -------- --- ------
----- ------ - --- -----------------------
----- ---------
---- --------
---
-- ----------- --- -------- -
--------------------------------------------
- ---- -
--------------------------------------------
-
-- ------- ------------------ --- ---
- ---- -- ---------- --- ------------ -
-- -------- --- ---
----- --------- - --- --------------------------------
-- ----------- --- -------- -
------------------------------------------
- ---- -
------------------------------------------
-
-
-
- ----- ----- -
---------------------- ---------- ------- ---------
-------------
-
-
-- -- --------- --
--- ----- ------ --- -- ------- -
-- ----------- --- ----- -- ------- --- ---- -
-------------
------- ----
-------- --- ---------
--------------- ------------
---
----- -
--------- -----
------
------
----- ----------------
----------- --------- ------------
-------
------
-------- --------- ---------
--------------
------ -------- -------------------------
------- ----------------------------------
--------------
------ -------- -------------------------
------- ----------------------------------
------- --------------
-- ---- --- --
----- --- - ----- -- ----------------------------------------- - ----
-- -- --------- --
----- ------ - --- ----------------- - ----------------------
------------------------------- -- -- -------------- ---------- ----------------
-------------------------------- -- -- -------------- ---------- -----------
-- ------------ --- -----
-------------------------------------------------------------------- ----- -- -- -
----- ----- - ----- --- ----------------------------------
----------------------------
----- --------
------ --------
---- --------------
----
---
-------------------------------------------------------------------- ----- -- -- -
----- ----- - ----- --- ----------------------------------
----------------------------
----- --------
------ --------
---- --------------
----
---
-- -- --------- --
---------------------------------- ----- ------- -- -
----- ---- - -----------------------
-- ------- -------------- --------------------- --- ------
-- ---------- --- -------- -
----- -------- - ---------- --- ------- - --- ------------------- - --- -------------------
----------- --
----- ------------------------------
--
---
----------------------
-- ---------
-- ----------- --- -------- -
-- -----
----------- - --- -----------------
------------------------------------- ------ ---- ------------- -------- -- -
----- ---------- - ---------------------------
----------------- - -- -- ----------------------
------------------- - -- -- ----------------------
------------------ - -- -- ----------------------
---------------------------------------------
---
- ---- -
-- -----
----------- - --- -----------------
----- --------- - -------------------------------------- -- -----------------
----- ---------------------- --------------------------------------------
-
-- -- --- ---
--------------- --- ----------------
----------------------- - -- --------- -- -- -
-- ----------- -
-----------------------
----------------------------
----- ------------
------ -----------
---------- -------------------
----
-
--
-- ---------
---------------------------------- ------- -- -
--------------------- ------ ---------
-- ----------- --- -------- -
-- ----
----- ----- - -------------------------------------- -- -----------------
--------------- - --- ---------------------------
-------------------- -- -
-------------------- -------------------
---
- ---- -
-- ----
----- ----- - -------------------------------------- -- -----------------
--------------- - --- ---------------------------
-------------------- -- -
-------------------- -------------------
---
-
---
-- -- --- ------
----- ----- - --- -----------------------
----- --------
---- --------
---
----- -------------------------------------
--------------------- --- ------------
----- ------ - ----- ------------------------
----- -------------------------------------
---------------------------------------
-- ----- --- ------
-------------------- --- ------------
----------------------------
----- ---------
------ -----------
---- ---------------
----
-- ------- ------------ --- ---
- ---- -- ---------- --- ------------ -
----- --------- - --- --------------------------------
-----------------------
-- ----------- --- -------- -
------------------------------------------
- ---- -
------------------------------------------
-
-
---
---------
-------
-------
--
---
- ---- -- ----------- --- ----- -- ------- --- --------------- -
-------------
------- ----
---
- ---- -- ----------------- -
-----------------
----- ---------
-------- ------------
---------- ------
---------- ------
-------------------------
- ---- -
------------- ------- --- ---
-
-代码中我们使用 WebSocket、uuid、std/http/server、std/ws/mod、webrtc/rtc_audio_source、webrtc/mod 等多个模块。我们通过建立 WebSocket 服务器，与客户端建立连接，并监听客户端发送的消息，根据消息类型来进行音视频通话的创建、操作等。
创建 WebRTC 连接时，我们按照媒体类型分别创建音频和视频的 PeerConnection，并监听其 onicecandidate 事件。接受到候选者后，我们需要将其 JSON 化之后通过 WebSocket 发送给对方，以便对方可以正确连接至自己。
在实现中，我们使用了 JavaScript 中自带的 WebRTC API，通过 getUserMedia()获取用户媒体设备，并创建 RTCAudioSource 和 RTCVideoSource 参数以向远端传输媒体数据。同时，为了操作音频/视频，我们还需要创建 RTCAudioSink 和 RTCVideoSink 分别用于捕获音频和视频数据。
最后，在前端部分我们主要借助 webrtc-adapter 实现了浏览器端的音视频通信，包括创建 RTCPeerConnection、创建 SDP offer、发送和接收 ICE 候选者、创建 SDP answer 等。
总结
本文详细阐述了在 Deno 中使用 WebSocket 实现音视频通话的方法，并介绍了 WebSocket 和 WebRTC 两种技术在其中的应用。音视频通话的实现是一个较为复杂的实现，需要许多知识点和技术。但通过本文的介绍，读者们将会更好地理解音视频通话系统的实现与运用，也将为后续开发奠定扎实的基础。www
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485447b48841e9894429725