webrtc静态库_WebRTC库PeerJS简介

webrtc静态库

I wrote about WebRTC. That post described the details of working with the protocol to make 2 Web browsers communicate with each other directly.

我写了有关WebRTC的文章 。 该帖子描述了使用协议使2个Web浏览器直接相互通信的细节。

In that tutorial I mentioned that there are libraries that abstract the many details you have to take care to allow WebRTC communication.

在该教程中，我提到了一些库可以抽象出许多细节，以便允许WebRTC通信。

One of those libraries is PeerJS, which makes real time communication extremely simple.

这些库之一是PeerJS，它使实时通信变得非常简单。

First thing is, you need to have a backend to allow 2 clients to synchronize before they are able to directly talk to each other.

首先，您需要有一个后端，以允许2个客户端进行同步，然后它们才能直接相互通信。

In a folder, initialize an npm project using npm init, install PeerJS using npm install peerjs and then and you can run it using npx:

在一个文件夹，初始化NPM使用项目npm init ，使用安装PeerJS npm install peerjs然后，您可以使用运行npx ：

npx peerjs --port 9000

(run npx peerjs --help to see all the options you can use).

(运行npx peerjs --help可以查看所有可以使用的选项)。

This is your backend 🙂

这是你的后端🙂

Now we can create the simplest application that does anything useful. We have one receiver and one sender.

现在，我们可以创建最有用的应用程序。 我们有一个接收者和一个发送者。

First we create the receiver, which connects to our PeerJS server, and listens for data coming in to it. The first parameter to new Peer() is our peer name, which we call receiver to make it clear:

首先，我们创建接收器，该接收器连接到我们的PeerJS服务器，并监听传入的数据。 new Peer()的第一个参数是我们的对等名称，我们将其称为receiver以使其清楚：

Include the PeerJS client (change the library version with the latest available):

包括PeerJS客户端(将库版本更改为可用的最新版本)：

<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js"></script>

Then we initialize the Peer object. The connection event is called when another peer connects to us. When we receive some data, the data event is called with the payload:

然后，我们初始化Peer对象。 当另一个对等方连接到我们时，将调用connection事件。 当我们收到一些数据时，将使用有效负载调用data事件：

const peer = new Peer('receiver', { host: 'localhost', port: 9000, path: '/' })

peer.on('connection', (conn) => {
  conn.on('data', (data) => {
    console.log(data);
  })
})

Let’s create the other end of the communication. We’ll call this sender because it’s the one that will connect and send a message to the receiver.

让我们创建通信的另一端。 我们将其称为sender因为它是将连接并向接收者发送消息的发送者。

We initialize the Peer object, then we ask the peer to connect to the receiver peer, which we registered earlier. Then once the connection is established the open event fires, and we can call the send() method on the connection to send data to the other end:

我们初始化Peer对象，然后要求对等方连接到我们先前注册的receiver对等方。 然后，一旦建立连接，就会触发open事件，我们可以在连接上调用send()方法以将数据发送到另一端：

const peer = new Peer('sender', { host: 'localhost', port: 9000, path: '/' })

const conn = peer.connect('receiver')

conn.on('open', () => {
  conn.send('hi!')
})

That is the most basic example you can make.

那是您可以做的最基本的例子。

First you open the receiver page, then you open the sender page. The receiver gets the message directly from the sender, not from a centralized resource. The server part is only needed to exchange information so the 2 parts can connect. After that, it’s not interfering any more.

首先，打开接收者页面，然后打开发送者页面。 接收方直接从发送方获取消息，而不是从集中式资源获取消息。 服务器部分仅需要交换信息，因此这两个部分可以连接。 在那之后，它不再干扰。

翻译自: https://flaviocopes.com/peerjs/

webrtc静态库