本文将介绍如何使用 npm 包 rtc-core 来实现 WebRTC 视频通话。
什么是 WebRTC?
WebRTC 是一种基于 Web 技术实现的实时通信协议，它可以让浏览器之间进行点对点的音视频通信，而无需安装任何插件或软件。
什么是 rtc-core?
rtc-core 是一个开源的 WebRTC 实现库，它提供了一组简单的 JavaScript API 帮助您快速构建 WebRTC 应用程序。
安装 rtc-core
使用 npm 安装 rtc-core：
npm install rtc-core
创建信令服务器
WebRTC 协议需要一个信令服务器来协调两个客户端之间的通信。在本教程中，我们将使用 socket.io 作为信令服务器。
在服务器端，我们需要安装 socket.io 和一些其他模块：
npm install express socket.io rtc-switchboard
然后，在项目根目录下创建一个 server.js 文件，输入以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------
----- ------ - -----------------------
----- -- - -----------------------------
----- ----------- - -----------------------------------
----------------------------------
------------------------------ -- ----- -- -- -
------------------- ------- -- ---- ------------------ -- --------
---
------------------- -------- -- -
------------------- ------------ ------------
----------------------- -- -- -
------------------- ------------ ---------------
---
----------------- -------- -- -
--------------------
------------------- ------------ ------ ---- ------------
---
------------------ --------- -- -
------------------- ------------ -------- -------- ---------
------------------------------- ---------
---
------------------- --------- -- -
------------------- ------------ -------- --------- ---------
-------------------------------- ---------
---
------------------------- --------- -- -
------------------- ------------ -------- --- ------------ ---------
-------------------------------------- ---------
---
---这将创建一个简单的 Express HTTP 服务器，并使用 socket.io 实现了一个信令服务器。我们还使用 rtc-switchboard 中间件将 socket.io 连接到 rtc-core 库。
创建客户端
接下来，我们将使用 rtc-core 库来创建 WebRTC 客户端。
在客户端，我们需要安装 rtc-core 和一些其他模块：
npm install rtc-core browserify watchify
然后，在项目根目录下创建一个 index.html 文件，输入以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------------
-------
------
------ --------------- ----- -----------------
------ ---------------- -----------------
----
------- -----------------------------
------- ---------------------- -----------
------- -------------------------
-------
-------这里我们只是简单的创建了一个页面，并添加了两个 video 标签和两个按钮，稍后我们将在 JavaScript 中添加逻辑来控制它们。
现在我们需要在 index.html 文件所在目录下创建一个 main.js 文件，输入以下代码：
-- -------------------- ---- -------
----- ------------ - ------------------------
----- - - ------------------
----- - ----- ----------------- - - --------------------
-- --- ------ -- ------ --- ----------
-------------- ------ ----- ------ ----- -- ----- ------- -- -
-- ----- -
-------------------
- ---- -
-- ---- ----- ----- ------
----- ---------- - --------------------------------------
-------------------- - -------
-
---
-- ------ ------ ----
----- ---- - ------
------- -
----------- -
- ----- ------------------------------ -
-
-
---
-- --------- ------ ----- ---------
----------------- -------- --- -- -
--------------------- ------ --------- --------
----- ----------- - ------------------- ------ ---
-------------- - --------------------
-------------------- - -----
---------------------------------------
---
-- ------ ----- ---- --------- ------
---------------- ------- -- -
--------------------- -------- -------
-------------------
---
-- ------ ------ ---- --------- ------
----------------- -------- -- -
--------------------- --------- --------
--------------------------
---
-- ------ --- --------- ---- --------- ------
-------------- ----------- --- -- -
--------------------- --- --------- --- ---- -------- -----------
------------------------------- ----
---
-- ---- --------- ----
----- ------ - ------------------------------
----- ------ - ----------
------------------- --------
-- ---- ------ ----
--------------------------------------------------------------- -- -- -
------------------ -- -
-------------------- -------- -------
-------------------- - --- ------- ----- ---
---
---
-- ---- -- ----
----------------------------------------------------------------- -- -- -
-------------
---这个 JavaScript 文件的作用非常重要。它创建了一个 WebRTC peer，用于处理视频流的连接，允许双方进行音视频通话。在 peer 中，我们设置了一些参数，并使用 signaling server 向另一端发送 offer，等待另一端使用 signaling server 返回 answer 以建立连接。
在 main.js 文件中使用 socket.io-client() 方法进行连接，这里跟服务器中的 socket.io 的创建对应，用来同时加入相同的房间，并且在另一端的情况下，发送 answer 进行建立连接。
运行应用程序
运行服务器：
node server.js
然后使用 Browserify 把客户端代码打包成 bundle.js：
browserify main.js -o bundle.js -t [ babelify --presets [ @babel/env ] ]
接下来，在浏览器中打开 index.html 文件就可以看到我们刚刚创建的页面了。现在，您可以单击“Call”按钮，等待另一端响应，双方进行音视频通话, 您可以单击“Hang Up”按钮关闭视频通话。
总结
在本文中，我们介绍了 WebRTC，rtc-core 库和如何使用它实现基本的视频通话。通过阅读此文，您现在应该熟悉如何使用 rtc-core 库进行 WebRTC 通信了。接下来，可以使用 rtc-core 库来构建实际的 WebRTC 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa62b5cbfe1ea061048f