Введение в Peer.js библеотеку для работы с WebRTC

Работать с WebRTC может быть сложно. PeerJS - это потрясающая библиотека, которая делает работу с WebRTC проще и удобнее.

Для работы с WebRTC вам потребуется бэкэнд для синхронизации двух клиентов, прежде чем они смогут напрямую общаться друг с другом.

В папке инициализируйте проект npm с помощью npm init, установите PeerJS с помощью npm install peerjs, а затем вы можете запустить его с помощью npx:

npx peerjs --port 9000

(запустите npx peerjs --help, чтобы увидеть все опции, которые вы можете использовать).

Теперь мы можем создать простейшее приложение, которое делает что-нибудь полезное. У нас есть один получатель и один отправитель.

Сначала мы создаем приемник, который подключается к нашему серверу PeerJS и прослушивает поступающие на него данные. Первым параметром new Peer() является имя нашего пира, которое мы называем получателем, чтобы прояснить:

Включите клиент PeerJS (измените версию библиотеки на последнюю доступную):

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

Затем мы инициализируем объект Peer. Событие подключения вызывается, когда к нам подключается другой узел. Когда мы получаем некоторые данные, вызывается событие data:

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

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

Давайте создадим другой конец общения. Мы позвоним этому отправителю, потом он подключится и отправит сообщение получателю.

Мы инициализируем объект Peer, затем просим его подключиться к получателю, который мы зарегистрировали ранее. Затем, как только соединение установлено, событие open срабатывает, и мы можем вызвать метод send() для соединения, чтобы отправить данные другому пользователю:
 

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

const conn = peer.connect('receiver')

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

Это самый простой пример, который вы можете сделать.

Сначала вы открываете страницу получателя, затем вы открываете страницу отправителя. Получатель получает сообщение непосредственно от отправителя, а не от централизованного ресурса. Серверная часть нужна только для обмена информацией, чтобы две части могли соединиться. После этого он больше не участвует в процессе передачи данных.

Более подробней изучить функции библиотеки можно в официальной документации https://peerjs.com/