很多前端开发者都知道 WebRTC ，它是一种浏览器到浏览器的通信方式，可以实现视频通话、文字聊天、数据共享等功能。但是，WebRTC 开发涉及到许多复杂的技术。 fortunately, npm 上的 very-simple-peer 包可以大大简化开发工作，本文将为你介绍如何使用这个包来快速开发 WebRTC。
1. 什么是 very-simple-peer？
very-simple-peer 是一个为 WebRTC API 提供简化封装的 js 库，可以在浏览器中轻松地创建点对点 WebRTC 连接。
它与原生 WebRTC API 不同，very-simple-peer 对进程间通信的交互进行了抽象，使代码更加简洁易懂。
2. 安装 very-simple-peer
利用 npm 可以轻松地安装和管理 very-simple-peer。
使用以下命令安装最新版本的 very-simple-peer 进行安装：
--- ------- ------ ----------------
3. 使用 very-simple-peer
一旦安装，你就可以在你的项目中引用 very-simple-peer。它的使用非常简单，只需要几行代码就可以创建 WebRTC 连接。
3.1 创建 Peer 实例
使用 very-simple-peer 创建 WebRTC 连接时，首先需要创建一个 Peer 实例。
----- ---- - --------------------------- ----- ---- - --- ------
3.2 添加事件监听器
创建 Peer 实例后，你需要添加事件监听器，以便在 WebRTC 连接状态变化时接收通知。监听事件包括：
- 'signal': 在peer到达源上时，该事件在其状态发生更改时发出，此时我的信号将要被发送到对方，可以将其用于自定义信令服务器。
- 'connect': 当建立 WebRTC 连接时发出此事件。
- 'stream': 在建立 WebRTC 连接并接收来自对等方的流时发出此事件。
- 'data': 当你收到来自对方的数据时，首先发出此事件。
- 'error': 当有错误时发出此事件。
- 'close': 当 WebRTC 连接关闭时发出此事件。
----------------- ------------- ------------------ -------------- ----------------- ------------- --------------- ----------- ---------------- ------------ ---------------- ------------
你可以使用上述代码将事件处理程序添加到你的 Peer 实例中，以便在 WebRTC 连接状态更改时自动调用它们。只需自己实现事件处理函数，处理相应的事件。
3.3 发送信令
现在，你可以向另一方发送自己的信令了。在上述'handleSignal'处理函数中，你可以利用内置的 WebSocket 或其他信令服务器将信令发送给对方。在这个例子中，我们使用浏览器 console 来呈现和复制发送方的 SDP，并将它复制到接收方的 console 中。捕获到的 SDP 应被覆盖在连接对象的 signal JSON 中，这样，接收方会得到正确的信令以进行连接。
-------- ------------------ - ------------------- ----- -- ----- -- - ---- ------- ------- - -
接收方也可以在它自己的处理程序中捕获并使用发送的信令。
3.4 连接到对等方
接下来，我们可以使用 WebRTC API 中的 createOffer() 函数来创建 WebRTC 连接的 Offer。这个函数会返回一个包含 SDP 字符串的对象，可以通过信令服务器发送给对等方。
----------------- ----- -- - -- - ----- ------ -- ------------------ -- -- - ----------------------- -------------- -- --------------- ---- -- - ----------------- --------- -- ---------------- -- ----- ----- - ----- ------------------
如果接收方在其事件处理函数中实现了创建应答 SDP OBJECT 的代码，Offer 就会顺利完成。如果成功，then()会调用'handleAnswer'函数，开启 WebRTC 连接通信接受数据。
3.5 发送数据
在建立连接后，你可以发送任何你想要的数据，只需要使用data() 函数就可以了。例如：
----------------- --------
这将发送一个简单的字符串，并使用任何添加到 createDataChannel() 时创建的配置参数进行序列化。
4. 结论
有了 very-simple-peer ，WebRTC 开发已经变得更加简单。通过使用封装合理的API，你可以快速地创建 WebRTC 连接，仅仅只需要几行代码。使用SignalR 和 Angular 时，为了连接从平台上代码的事件，给前端开发者带来了巨大的便利。
在创建应用之前，如果你还没有使用 very-simple-peer 进行过无需担心，通过阅读本文，你已经具备了一定的使用技能。有良好的学习资源和丰富的技术社区来支持你改变 WebRTC 开发的面貌。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006734a890c4f7277583761