前言
随着 Web 技术的日益成熟，WebRTC 技术也逐渐走入人们的视野。WebRTC 技术是浏览器本身提供的一种实现互联网实时通信的技术，可以用于视频会议、音频通话、实时数据传输等场景。
为了更好地使用 WebRTC 技术，我们可以借助 Web Components 技术来实现一个 WebRTC 客户端，以达到更加灵活和可复用的效果。本篇文章将详细介绍如何利用 Web Components 技术实现 WebRTC 客户端。
WebRTC 概述
WebRTC 技术是一种能够在浏览器上实现点对点通信的技术，它包含了三个部分：
- 媒体捕获：摄像头、麦克风等设备获取媒体流；
- 媒体传输：将媒体流传输至远程设备；
- 媒体处理：对传输过来的媒体流进行处理和展示。
以上三个部分都可以通过 WebRTC 技术来实现。不过本文主要介绍如何实现媒体捕获和传输两个部分。
Web Components 概述
Web Components 技术是用来创建可复用、可组合的组件的技术，相当于是一种浏览器原生支持的组件化编程的实现方案。Web Components 技术包含以下四个部分：
- Custom Elements：允许开发者创建定制的 HTML 元素；
- Shadow DOM：允许开发者创建隔离的 DOM 子树；
- HTML Templates：允许开发者定义 HTML 模板；
- HTML Imports：允许开发者引入 HTML 片段到当前文档中。
本文将会利用其中的 Custom Elements 和 Shadow DOM 来创建一个 WebRTC 客户端的组件。
实现过程
实现思路
根据 WebRTC 向远程设备传输媒体流的流程，大致可以分为以下几个步骤：
- 获取本地设备的媒体流（如摄像头、麦克风等）；
- 将媒体流传输给远程设备；
- 接收远程设备传输过来的媒体流；
- 展示接收到的媒体流。
因此，我们需要实现以下四个功能：
- 获取媒体流；
- 传输媒体流；
- 接收媒体流；
- 展示媒体流。
创建 Custom Elements
首先我们需要创建一个用来展示视频的组件，可以通过 Custom Elements 来实现。
<video-player></video-player>
在 JavaScript 中定义上述的自定义元素：
class VideoPlayer extends HTMLElement {
// ...
}
customElements.define('video-player', VideoPlayer);在上述 class 中我们可以定义一些需要用到的属性和方法：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
-- -------------------
-- ---------------------
-------- -- ---------
-- -- ------ ----
----- ---------- - ------------------- ----- ------ ---
-- -- ----- ---
----- ----- - --------------------------------
-------------- - -----
----------------- - -----
----------------- - -------
------------------ - -------
-- - ----- ----- ------ --- --
------------------------------
---------- - ------
-
-- ---
-到目前为止，我们已经创建了一个用来展示视频的组件，接下来我们需要实现媒体流的相关功能。
获取媒体流
首先我们需要获取本地设备的媒体流：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
----- ---------------- -
----- ----------- - -
------ -----
------ -----
--
--- ------------
--- -
----------- - ----- -------------------------------------------------
- ----- ----- -
-------------------
-
------ ------------
-
----- ---------------- -
---------------- - ----- ----------------------
-------------------- - -----------------
-
----- --------------- -
------------------------------------------ -- --------------
---------------- - ----------
-------------------- - -----
-
-- ---
-在 getMediaStream 方法中，我们使用 navigator.mediaDevices.getUserMedia 获取媒体流，这里设定了 audio 和 video 两个约束条件，代表需要获取音频和视频两个媒体流。
在 startCapturing 方法中，我们获取本地媒体流，并将它绑定到 video 元素上之后展示出来。
在 stopCapturing 方法中，我们停止捕获媒体流并清空 video 元素的 srcObject 属性。
传输媒体流
接下来我们需要将媒体流传输给远程设备。这里我们可以用 WebSocket 技术来实现。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
-- ---
----------- - --- ---------------------------------
--------------------- - ----- -- -
----- ---- - -----------------------
-- ---------- --- -------- -
-----------------------------
- ---- -- ---------- --- --------- -
-------------------------------
- ---- -- ---------- --- ------------ -
-------------------------------------
-
--
-
----- ----------- -
------------------- - --- --------------------
------------------------------------------ -- -
------------------------------------
---
----- ----- - ----- ----------------------------------
----- -----------------------------------------------
---------------------------------
----- --------
------ ---------------
----
-
----- ------------ -
----- ------ - ----- -----------------------------------
----- ------------------------------------------------
---------------------------------
----- ---------
------- ----------------
----
-
---------------------- -
----- ----- - --- ---------------------------------
------------------- - --- --------------------
------------------------------------------ -- -
----------------------------------- ------------------
---
------------------------------------------------
------------------
-
------------------------ -
----- ------ - --- ----------------------------------
-------------------------------------------------
-
-------------------------- -
----- ------------ - --- ---------------------------
--------------------------------------------------
-
-- ---
-在上述代码中，我们定义了以下一些方法：
sendOffer：创建 Peer Connection 并向远程设备发送 offer；sendAnswer：创建 answer 并发送给远程设备；handleOffer：将收到的 offer 设置为远程描述并发送 answer；handleAnswer：将远程设备的 answer 设置为本地描述；handleCandidate：将收到的 candidate 添加到 Peer Connection 中。
此处仅展示了通过 WebSocket 技术传输媒体流的部分，具体接入和后台开发根据实际情况进行修改。
展示媒体流
最终，我们需要实现展示收到的媒体流的功能。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
-- ---
----- ---------------- -
------------------- - --- --------------------
----- ------ - --- --------------
--------------------------- - ----- -- -
-----------------------------
--
----- -----------------------------------------------------------------
----- --------------------------------------------- ------------------------------------
---------------------------------
----- ---------
------- ----------------------------------------------
----
-------------------- - -------
-
-- ---
-对于收到的媒体流，我们首先需要创建一个新的 MediaStream 对象，之后将事件中的媒体轨添加到该对象，并将该对象绑定到 video 元素上即可完成展示的功能。
整合代码
将上述代码整合在一起，我们就可以实现一个完整的 WebRTC 客户端了。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
-- -- ------ ----
----- ---------- - ------------------- ----- ------ ---
-- -- ----- ---
----- ----- - --------------------------------
-------------- - -----
----------------- - -----
----------------- - -------
------------------ - -------
-- - ----- ----- ------ --- --
------------------------------
---------- - ------
----------- - --- ---------------------------------
--------------------- - ----- -- -
----- ---- - -----------------------
-- ---------- --- -------- -
-----------------------------
- ---- -- ---------- --- --------- -
-------------------------------
- ---- -- ---------- --- ------------ -
-------------------------------------
-
--
-
----- ---------------- -----
----- ---------------- -----
----- --------------- -----
----- ----------- -----
----- ------------ -----
---------------------- -----
------------------------ -----
-------------------------- -----
----- ---------------- -----
-
------------------------------------- -------------使用示例
在 HTML 中使用我们所实现的 video-player 组件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- --------------
-------
------
-----------------------------
------- -----------------------------
------- ---------------------------
--------
----- ----------- - ---------------------------------------
----- -------- ------- -
----- -----------------------------
----- ------------------------
-
----- -------- ------ -
----- ----------------------------
----- -----------------------------
-
-------------------------------------------------------------- -------
------------------------------------------------------------- ------
---------
-------
-------在 JavaScript 中，首先获取到 video-player 元素，调用其 startCapturing 方法可以启动媒体流捕获，sendOffer 方法可以通过 WebSocket 技术将本地媒体流的描述传输给远程设备。对于停止媒体捕获，为了保证程序正常退出，我们需要在停止前发送所有的 candidates，具体实现可以自行添加。
总结
本文介绍了如何利用 Web Components 技术来实现 WebRTC 客户端的技术要点和实现过程。Web Components 技术能够帮助我们实现一些可复用、可组合的组件，将不同的功能分离出来，达到更好的可维护性和重用性。而 WebRTC 技术则可以实现浏览器上的实时通信功能，具有很广泛的应用场景。最终通过实现一个完整的 WebRTC 客户端来演示这些技术的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b7c84dadd4f0e0ff058546