用PeerJS简化点对点通信-WebRTC封装器使用指南

1,492 阅读5分钟

作为WebRTC的封装器的JavaScript库

实现点对点通信是一项具有挑战性的任务。但是,如果你知道正确的工具,你可以使它变得更容易。

因此,在这篇文章中,我将讨论PeerJS,一个作为WebRTC的封装器的JavaScript库,使其更容易在Web应用程序中实现点对点通信。

PeerJS如何简化了WebRTC?

当涉及到网络应用中的实时P2P通信时,WebRTC是许多开发者使用的标准。但是,它也有以下一些复杂性。

  • 如果你使用纯WebRTC,首先,你要定义一个STUN(Session Traversal Utilities for NAT)服务器,为参与通信的每个对等体生成ICE(Interactive Connectivity Establishment)候选。
  • 然后,你需要使用你的服务器来存储这些ICE候选人的详细信息。
  • 最后,你需要实现WebSockets来处理实时更新。

即使你以前没有接触过WebRTC;我相信你一定感觉到了它实现的复杂性。但是,不用担心,PeerJS在这里为你提供帮助。

有了PeerJS,我们不必担心STUNs、ICE候选者或服务器的创建。我们甚至还可以避免实现WebSockets。

PeerJs提供了一个完整的、可配置的点对点连接API和一个名为PeerServer的服务器,以方便在PeerJS客户端之间建立连接。

所以,让我们看看如何使用PeerJS来创建一个简单的聊天应用程序。

用PeerJS和React建立你的第一个聊天室

第一步 -安装PeerJS

首先,我们需要将PeerJS库作为一个节点模块安装到你的项目中,并将peer库作为一个全局依赖。

// Installing PeerJS
// Installing Peer

**注意:**PeerJS库是用来在本地启动PeerServer的。你也可以使用PeerServer云实例。

第2步 - 实现聊天室

现在,让我们移动到我们的React应用程序,通过初始化聊天组件的状态来开始工作。

在这个状态中,我们将处理我们的ID、同伴的ID、聊天信息和一个同伴对象的实例。

state = {

然后我们需要通过定义主机名、端口和路径创建一个Peer实例,以管理我们的P2P连接。我们将在整个通信过程中使用这个实例。

const peer = new Peer('', {

提示: 你可以使用你自己的ID作为第一个参数,或者不定义它,让PeerServer生成一个随机的ID。如果你使用const peer = new Peer(); 你将被连接到PeerServer云。

Peer实例有几个方法来处理对等体之间的通信。peer.on用于监听对等体事件,在接收远程对等体的调用时很有用。

在成功连接到PeerServer后,open事件将被发出,我们将使用这个事件来更新myId和对等体的状态。

peer.on('open', (id) => {
this.setState({

然后,我们需要使用连接事件来监听远程对等体的连接,我们可以使用其回调来抓取远程对等体发送的消息。

peer.on('connection', (conn) => {
      this.setState({
   });

现在,我们已经实现了接收消息的所有功能。作为最后一步,让我们创建一个方法来发送消息。

peer.connect方法允许我们通过指定peer id连接到peer。然后它返回一个DataConnection对象,该对象可用于向对等体发送消息数据。

send = () => {
  conn.on('open', () => {
    const msgObj = {
   conn.send(msgObj);
    this.setState({
  });

第3步 - 视频聊天实现

现在,让我们修改我们的聊天室以发送视频信息。实现它与我们在上一步骤中讨论的差不多。我们可以使用peer.on方法中的调用事件来监听来自远程peer的调用。它将提供一个名为MediaConnection的回调对象,接收器的视频和音频流被提供给MediaConnection对象的应答方法。

peer.on('call', (call) => {
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
getUserMedia({ video: true, audio: true }, (stream) => {
  this.myVideo.srcObject = stream;
  call.on('stream', (remoteStream) => {
}, err => { console.log('Error!') });

现在让我们从我们的终端向对等体进行视频呼叫。这种方法类似于接听电话。我们需要使用初始对等体实例的调用方法,并提供对等体ID和视频流作为参数。

呼叫方法将返回一个MediaConnection对象,我们可以用它来访问对等体的数据流。

videoCall = () => {
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
getUserMedia({ video: true, audio: true }, (stream) => {
  this.myVideo.srcObject = stream;
  const call = this.state.peer.call(this.state.friendId, stream);
  call.on('stream', (remoteStream) => {

第4步--最后确定事情

最后,是时候添加一些JSX来渲染我们的聊天室了。让我们为同伴ID和聊天信息添加两个输入字段。我们将使用ref属性来访问视频元素。

return (
    <label>Friend ID:</label>
<br />
    <label>Message:</label>
    <button onClick={this.send}>Send</button>

这就是了!现在我们已经为快速视频聊天做好了准备。最终的实现会是这样的,你可以在我的GitHub仓库中找到完整的代码。

**注意:**有些浏览器(特别是移动浏览器)可能不允许在没有HTTPS连接的情况下访问摄像头和麦克风。你可以参考这篇文章,通过几个步骤建立一个本地HTTPS连接。

用Bit构建和分享React组件

比特 是一个可扩展的工具,可以让你用_独立_编写、版本和维护的组件创建_真正的_模块化应用 。

用它来构建模块化的应用程序和设计系统,编写和交付微型前端,或在应用程序之间共享组件。

一个独立的源代码控制和共享的 "卡片 "组件。右边是=>它的依赖关系图,由Bit自动生成的。

Bit:模块化网络的平台

最后的话

Web RTC是实现实时点对点通信的浏览器标准。但由于涉及到STUN服务器、ICE候选人、SDP和WebSockets,实现WebRTC有点复杂。

PeerJS通过作为WebRTC的封装器简化了整个过程,并为我们提供了更简单的事件和工作方法。

所以,我邀请你尝试一下PeerJS,并在评论区告诉我你的想法。

谢谢您的阅读!!