Введение в Simple-Peer: библиотека WebRTC

WebRTC (веб-коммуникация в реальном времени) — это проект с открытым исходным кодом, который позволяет осуществлять коммуникацию в реальном времени (RTC) через удобные API в веб-браузерах и мобильных приложениях. Он обеспечивает прямое одноранговое соединение, облегчая аудио- и видеосвязь на веб-страницах без необходимости использования серверов ретрансляции сообщений. Кроме того, WebRTC можно использовать бесплатно.

Несколько API JavaScript являются частью WebRTC:

• getUserMedia — доступ к микрофону и камере пользователя
• RTCPeerConnection - разрешает одноранговую передачу аудио и видео.
• RTCDataChannel — позволяет осуществлять прямую одноранговую передачу данных

С помощью WebRTC можно создавать такие приложения, как видеоконференции, обмен файлами и обмен сообщениями в реальном времени. Его поддерживают большинство современных браузеров, включая Apple Safari, Mozilla Firefox и Google Chrome.

Вы когда-нибудь задумывались, как быстро и без стресса создать приложение для видеоконференций? Используйте Simple-Peer по своему усмотрению. Библиотека JavaScript под названием Simple-Peer позволяет создавать одноранговые соединения в веб-браузере. Он устанавливает соединение между двумя или более браузерами с помощью WebRTC (Web Real-Time Communication), обеспечивая прямой обмен данными без участия сервера.

С помощью Simple-Peer создавать приложения для обмена файлами, обмена сообщениями в реальном времени и видеоконференций очень просто. Он предлагает методы отправки и получения данных вместе с простым API для настройки и управления одноранговыми соединениями.

Simple-Peer — популярный выбор для разработки [одноранговых](https://developer.mozilla.org/en-US/docs/Glossary/P2P#:~:text=P2P%20(Peer%2Dto %2Dpeer, привилегии% 20 и %20 разделяют% 20 рабочей нагрузки %20). фреймворки или пакеты, такие как WebSockets или React.

Зачем использовать Simple-Peer?

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

Вот краткий обзор того, как работает Simple-Peer:

• Один из партнеров разрабатывает предложение с использованием API RTCPeerConnection, описывая различные носители и типы данных, которыми он может обмениваться.
• Другой одноранговый узел получает предложение с помощью сигнального сервера, который используется для передачи метаданных, необходимых для создания соединения. Любой подход, включая WebSockets или HTTP, может быть использован для реализации сервера сигнализации.
• Другой узел принимает предложение и использует API RTCPeerConnection для создания ответа. Ответ объясняет различные типы носителей и данных, которыми они могут обмениваться.
• Ответ передается начальному узлу с помощью сервера сигнализации.
• После обмена предложениями и ответами два одноранговых узла могут подключаться и обмениваться мультимедиа и данными напрямую.

Компании, использующие Simple-Peer

Несколько компаний используют Simple-Peer по всему миру, и для меня одна из главных причин заключается в том, что ее очень легко внедрить. Ниже приведен список компаний, использующих Simple-Peer:

• РТКат
• ПирНет
• ПушерТК
• lxjs-чат
• Белая доска
• Белая доска
• "Поговори со мной"
• CDNПока
• Детокс
• ВебКэт
• oorja.io
• Пер Са
• Нетикс
• Метастрим
• Зенкастр
• "Поговори со мной"
• CDNПока
• Стелс

Преимущества

• Простой API: Simple-Peer предлагает простой в использовании и удобный API, который позволяет легко и быстро приступить к разработке одноранговых приложений.
• Легкий: Поскольку Simple-Peer — это легкая библиотека, ваше приложение не будет обременено дополнительными накладными расходами. Если вы разрабатываете приложение реального времени, которое должно быть эффективным, это может быть очень важно.
• поддержка браузеров: большинство современных браузеров, включая Apple Safari, Mozilla Firefox и Google Chrome, а также портативные электронные устройства, поддерживают Simple-Peer.

Недостатки Simple-Peer

• Ограниченная поддержка браузеров: большинство современных браузеров, но не все, поддерживают WebRTC, который Simple-Peer использует для создания одноранговых соединений. В результате Simple-Peer может работать некорректно в старых браузерах.
• Сложность: несмотря на то, что Simple-Peer предоставляет простой API, создание одноранговых приложений может оказаться сложной задачей. Это может потребовать твердого понимания WebRTC и дополнительных технологий, таких как сигнальные серверы и обход NAT.
• Безопасность: поскольку соединения Simple-Peer по умолчанию не шифруются, очень важно обеспечить защиту любых конфиденциальных данных, которыми обмениваются через них.

Начиная

В этом разделе мы узнаем больше о Simple-Peer. Мы рассмотрим некоторые из ранее упомянутых основных событий, а также способы установки и настройки Simple-Peer.

Установки

В этом разделе я рассмотрю множество различных реализаций Simple-Peer. Воплотить это в жизнь не сложно. Simple-Peer можно установить с помощью npm или yarn.

npm install simple-peer

yarn add simple-peer

Затем вы можете включить Simple-Peer в свой проект, импортировав его:

Импорт ES6

import SimplePeer from 'simple-peer';

Узел js:

const SimplePeer =  require("simple-peer")

Для этой статьи Simple-Peer будет использоваться в проектах, включающих стандартный HTML, CSS и JavaScript. Пожалуйста, войдите в папку модулей узла и скопируйте из нее папку simple-peer, как только вы закончите установку simple-peer в папку проекта с node.js. Кроме того, вы можете просто перейти к Simple-Peer внутри папки модулей узла, выполнив следующие действия:

<script src="/node_modules/simple-peer/simplepeer.min.js"></script>;
const p = new SimplePeer({
  initiator: location.hash === "#1",
  trickle: false,
});

Прежде чем научиться использовать Simple-Peer для создания приложения для видеоконференций, давайте сначала обсудим использование JavaScript для доступа к мультимедийным устройствам.

Доступ к мультимедийным устройствам (видео и голос)

В JavaScript вы можете использовать навигатор для доступа к мультимедийным устройствам, таким как камеры и микрофоны. API для медиаустройств. Этот API поддерживается текущими браузерами и позволяет получить список мультимедийных устройств, подключенных к устройству, и получить доступ к потоку мультимедийных данных, создаваемых устройствами.

Вот пример того, как можно использовать навигатор. Чтобы получить список медиаустройств, которые подключены к устройству, используйте mediaDevices API:

navigator.mediaDevices.enumerateDevices().then(function (devices) {
  devices.forEach(function (device) {
    console.log(device.kind + ": " + device.label + " id = " + device.deviceId);
  });
});

Выход:

Это вернет список медиа-устройств, подключенных к устройству, где каждый элемент в списке предоставляет информацию об устройстве, такую ​​как его категория и уникальный идентификатор устройства. Имейте в виду, что ваш компьютер может интерпретировать это по-разному, и вывод и идентификатор могут отличаться.

Метод getUserMedia() объекта navigator.mediaDevices можно использовать для получения потока мультимедийных данных, созданных конкретным устройством. Эта функция принимает объект ограничения, который указывает, к каким мультимедийным устройствам следует обращаться и какой тип мультимедийных данных следует от них получать. Вот пример того, как можно использовать метод **getUserMedia()** для получения видеопотока с фронтальной камеры устройства:

navigator.mediaDevices
  .getUserMedia({
    audio: false,
    video: { facingMode: "user" },
  })
  .then(function (stream) {});

Это запросит у пользователя разрешение на просмотр камеры. Если пользователь примет разрешение, он вернет объект потока, который вы можете использовать для отображения видеопотока на веб-сайте с помощью файла video element.

Понимание событий в Simple-Peer:

Чтобы успешно использовать Simple-Peer, вы должны сначала понять основные события. Эти события относительно просты в использовании. Давайте работать над этим вместе.

Peer.on

Класс Peer предоставляет метод on для регистрации прослушивателей событий для различных событий, которые могут произойти во время соединения WebRTC. Эти события включают в себя получение данных от однорангового узла, подключение к одноранговому узлу и отсоединение от однорангового узла. Вот пример того, как использовать метод «on» для регистрации прослушивателя событий для события «connect», которое создается при формировании соединения WebRTC с узлом:

const peer = new SimplePeer({ ... })
peer.on('connect', () => {
    console.log('Connected to peer!')
})

Вы также можете использовать метод on для регистрации прослушивателей событий для других событий, таких как «данные», «закрытие» и «ошибка». Например:

peer.on("data", (data) => {
  console.log("Received files and, messages from peer:", data);
});

peer.on("close", () => {
  console.log("Connection with peer closed :(");
});

peer.on("error", (err) => console.log("error", err));

Peer.signal

Класс Peer предоставляет функцию signal, которая используется для передачи данных сигнализации партнеру. Сигнализация — это механизм, с помощью которого два одноранговых узла создают соединение WebRTC. Это влечет за собой передачу информации, такой как сетевые адреса и возможности устройства, по каналу сигнализации, что обычно выполняется с использованием протокола сигнализации на основе сервера.

Функция signal используется для передачи данных сигнализации партнеру, которые могут использоваться для согласования настроек соединения WebRTC, таких как тип используемых кодеков и конфигурация соединения. Данные сигнализации часто представляют собой строку или объект JSON и передаются в качестве аргумента методу signal. Вот пример того, как передать сигнальные данные пиру, используя метод сигнал:

const peer = new SimplePeer({ ... })
peer.signal(data)

Метод signal в сочетании с методом on можно использовать для регистрации прослушивателей событий для различных событий, которые могут произойти в процессе сигнализации. Вы можете использовать событие «сигнал», чтобы получить сигнальные данные от однорангового узла:

peer.on("signal", (data) => {
  console.log("Hey! gotten signal data", data);
});

Peer.send

Класс Peer включает функцию send для отправки данных пиру через соединение WebRTC. Метод отправить принимает только один аргумент: данные для отправки узлу. Эта информация может принимать форму строки, буфера массива или типизированного массива. Вот пример использования метода send для передачи строки пиру:

const peer = new SimplePeer({ ... })
    
peer.on('connect', () => {
    peer.send('Hello, World!')
})

Вы также можете отправить буфер массива или типизированный массив, используя метод send:

const arrayBuffer = new ArrayBuffer(10);
peer.send(arrayBuffer);

const typedArray = new Uint8Array(10);
peer.send(typedArray);

Имейте в виду, что метод отправки можно использовать только после того, как установлено соединение WebRTC с узлом. Событие «connect» экземпляра Peer может использоваться для определения того, когда соединение готово для доставки данных.

Peer.addStream

Функция addStream класса «Peer» используется в «simple-peer» для добавления медиапотока к одноранговому соединению. Это можно использовать для передачи аудио- и видеоданных узлу с помощью WebRTC. Вот как использовать метод addStream для добавления медиапотока к экземпляру Peer:

const peer = new SimplePeer({ ... })
navigator.mediaDevices
  .getUserMedia({
    audio: true,
    video: true,
  })
  .then((stream) => {
    peer.addStream(stream);
  });

Это позволит получить медиапоток с устройства пользователя, содержащий аудио- и видеоданные, и добавить его к одноранговому соединению. Медиаданные потока впоследствии будут переданы пиру через соединение WebRTC. Чтобы получить мультимедийные данные на другом конце соединения, вы также должны использовать метод addStream на стороне однорангового узла, чтобы добавить поток к одноранговому соединению.

Peer.removeStream

Метод peer.removeStream библиотеки SimplePeer удаляет поток из однорангового соединения. Он принимает поток в качестве аргумента и удаляет его из списка потоков, отправляемых через одноранговое соединение. Это удобно, если вы хотите прекратить отправку потока узлу или заменить его другим потоком. Вот пример того, как можно использовать peer.removeStream:

//Add a stream
peer.addStream(stream);

//Remove stream
peer.removeStream(stream);

Учтите, что «peer.removeStream» удалит поток только из локального однорангового соединения. Вы также должны удалить поток с удаленного конца, чтобы предотвратить получение потока одноранговым узлом.

Peer.removeTrack

Метод Peer.removeTrack в библиотеке Simple-Peer позволяет пользователю удалить дорожку из однорангового соединения. Эта функция принимает на вход объект MediaStreamTrack и удаляет его из однорангового соединения. Это может быть полезно, если пользователь хочет удалить определенную аудио- или видеодорожку из однорангового соединения или если он хочет полностью прекратить совместное использование дорожки. Чтобы использовать эту функцию, пользователь должен сначала установить одноранговое соединение с помощью библиотеки Simple-Peer, а затем вызвать метод peer.removeTrack с соответствующим объектом MediaStreamTrack в качестве аргумента.

Peer.destroy

Метод peer.destroy библиотеки simple-peer уничтожает одноранговое соединение, а также разрывает соединение и освобождает все связанные с ним ресурсы при вызове. Вот пример использования peer.destroy:

const simplePeer = require("simple-peer");

const peer = new simplePeer({
  initiator: location.hash === "#1",
  trickle: false,
});

// establish a connection...
// .....
// cLOSE PEER .....
peer.destroy();

Соединение будет разорвано, и все ресурсы, связанные с «одноранговым» объектом, будут освобождены.

Peer.WEBRTC_SUPPORT

Peer.WEBRTC_SUPPORT — это свойство библиотеки «simple-peer», которое показывает, поддерживается ли WebRTC в текущем контексте. Это логическое значение: true, если WebRTC поддерживается, и false, если нет. Вот пример того, как можно использовать Peer.WEBRTC SUPPORT:

if (simplePeer.WEBRTC_SUPPORT) {
  console.log("WebRTC is supported in this browser");
} else {
  console.log("WebRTC is not supported in this browser");
}

Прежде чем пытаться использовать WebRTC, это помогает определить, поддерживается ли он.

Повтор сеанса для разработчиков

Раскройте разочарования, выявите ошибки и устраните замедления работы, как никогда раньше, с помощью OpenReplay — набора для воспроизведения сеансов с открытым исходным кодом для разработчиков. Его можно разместить самостоятельно за несколько минут, что дает вам полный контроль над данными клиентов.

Удачной отладки! Попробуйте использовать OpenReplay сегодня.

Отлов ошибок в Simple-Peer:

В этом разделе мы рассмотрим хорошо известный статус ошибки, представленный в консоли, если ошибки возникают при использовании simple-peer.

Я рекомендую разобраться с обработкой ошибок, прежде чем использовать Simple-Peer для создания проекта, чтобы вы могли легко обнаруживать и исправлять ошибки.

ERR_CREATE_OFFER

ERR_CREATE_OFFER — это ошибка, которая может возникнуть при подключении с использованием simple-peer. Это означает, что произошла ошибка при создании предложения, которое является исходным сообщением в рукопожатии соединения. Эта ошибка может возникать по ряду причин, включая проблему с веб-камерой или микрофоном пользователя или из-за того, что браузер пользователя не поддерживает WebRTC. Чтобы устранить эту проблему, выполните следующие действия:

• Убедитесь, что веб-камера и микрофон пользователя правильно настроены и работают.
• Убедитесь, что браузер пользователя поддерживает WebRTC.
• Подтвердите, что пользователь предоставил программе разрешение на использование своей веб-камеры и микрофона.
• Просмотрите документацию для «simple-peer» на наличие известных проблем или обходных путей.

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

ERR_WEBRTC_SUPPORT

Когда возникает проблема с поддержкой WebRTC, библиотека Simple-Peer может выдавать ошибку «ERR WEBRTC SUPPORT». Поскольку Simple-Peer использует WebRTC для установления одноранговых соединений, для правильной работы браузер должен поддерживать WebRTC. Если браузер не поддерживает WebRTC, будет выдана ошибка «ERR WEBRTC SUPPORT». Проверьте наличие конструктора RTCPeerConnection, чтобы узнать, поддерживает ли браузер WebRTC:

if (window.RTCPeerConnection) {
  console.log("WebRTC is supported");
} else {
  console.log("WebRTC is not supported");
}

Если ваш браузер не поддерживает WebRTC, вы должны использовать другое средство для обеспечения связи в реальном времени (например, библиотеку, использующую WebSockets вместо WebRTC).

ERR_CREATE_ANSWER

Ошибка «ERR_CREATE_ANSWER» может возникать при использовании библиотеки «simple-peer» для создания соединения WebRTC. Это показывает, что произошла ошибка при формировании ответа на предложение удаленного узла во время процедуры согласования соединения. Эта ошибка может возникать по нескольким причинам, включая закрытие объекта RTCPeerConnection или проблемы с локальной сетью. Добавьте прослушиватель событий ошибки к вашему объекту SimplePeer для обработки этой ошибки:

peer.on("error", (err) => {
  console.error(err);
});

Затем найдите ошибку ERR_CREATE_ANSWER и примите соответствующие меры, например, попытайтесь восстановить соединение или сообщите пользователю об ошибке.

peer.on("error", (err) => {
  if (err.code === "ERR_CREATE_ANSWER") {
    // Handle the error
  }
});

ERR_ICE_CONNECTION_FAILURE

ERR_ICE_CONNECTION FAILURE — это возможная проблема, которая может возникнуть при попытке установить соединение WebRTC с библиотекой простых одноранговых узлов. Соединение не удалось из-за сбоя в протоколе Interactive Connectivity Establishment (ICE), который используется для установления прямого соединения между двумя одноранговыми узлами.

Причиной этой ошибки могли быть многие факторы, в том числе:

• Брандмауэр или сетевая конфигурация препятствовали соединению.
• Связь с одним из пиров была потеряна.

Чтобы устранить эту проблему, вы можете попробовать выполнить следующие действия:

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

ERR_SIGNALING

Ошибка ERR_SIGNALING может возникнуть при использовании библиотеки Simpleeer. Это показывает проблему с сигнальными данными, необходимыми для соединения двух одноранговых узлов. Обмен сигнальными данными между одноранговыми узлами осуществляется через событие «сигнал». Ссылка не может быть сделана, если в этих данных есть ошибка. Эта ошибка может быть вызвана несколькими факторами, в том числе:

• Данные сигнализации не были правильно сформированы.
• Другой одноранговый узел не получил данные сигнализации.

Чтобы устранить эту проблему, убедитесь, что сигнальные данные успешно передаются между одноранговыми узлами.

ERR_DATA_CHANNEL

ERR_DATA_CHANNEL — это сообщение об ошибке, выдаваемое SimplePeer при неправильном создании канала данных. Канал данных позволяет двум объектам SimplePeer взаимодействовать друг с другом через соединение WebRTC. Эта ошибка может возникать из-за множества факторов, таких как отсутствие однорангового соединения или закрытый канал данных. Чтобы обработать эту ошибку, прослушайте событие «ошибка» в вашем объекте SimplePeer и найдите сообщение об ошибке ERR_DATA_CHANNEL.

peer.on("error", (err) => {
  if (err.message === "ERR_DATA_CHANNEL") {
    console.error("Error creating data channel");
  }
});

ERR_CONNECTION_FAILURE

Код ошибки «ERR_CONNECTION_FAILURE» может возникнуть при использовании «simple-peer», что говорит о том, что не удалось установить соединение между двумя одноранговыми узлами. Эта ошибка может быть связана с различными факторами, такими как:

• Данные сигнализации между двумя одноранговыми узлами не передавались должным образом.
• Один из одноранговых узлов использует устаревшую версию библиотеки простых одноранговых узлов.
• Проблема с сетью не позволяет установить соединение.

Вы можете попробовать выполнить следующие действия для устранения этой ошибки:

• Убедитесь, что сигнальные данные успешно передаются между двумя одноранговыми узлами. Вы можете подтвердить это, записав сигнальные данные с обеих сторон и сравнив их, чтобы убедиться, что они идентичны.
• Убедитесь, что оба одноранговых узла используют одну и ту же версию библиотеки «simple-peer».
• Проверьте сеть на наличие проблем, которые могут препятствовать установлению соединения. Это может быть связано с проблемами с настройками брандмауэра, сетевыми маршрутизаторами или другим сетевым оборудованием.

Если эти методы не помогают устранить ошибку, возможно, вам придется изучить основную причину проблемы. Это может повлечь за собой анализ кода на наличие ошибок, проверку сигнальных данных на наличие проблем или отладку сетевого соединения.

Как создать приложение для видеочата с помощью Simple-Peer

В этом разделе мы покажем, как создать базовое приложение для видеочата с помощью Simple-Peer. В этом разделе мы создадим соединение между двумя пользователями. Эта конфигурация довольно проста, и в этой статье мы рассмотрели большинство событий, связанных с Simple-Peer. Теперь пришло время разработать приложение для чата, используя знания, полученные в этой статье.

Мы рассмотрим следующий код, который прост в использовании и понимании:

<html>
  <head>
    <style>
      #outgoing {
        width: 600px;
        word-wrap: break-word;
        white-space: normal;
      }
    </style>
  </head>

  <body>
    <form>
      <textarea id="incoming"></textarea>
      <button type="submit">submit</button>
    </form>
    <pre id="outgoing"></pre>
    <video src="" id="video"></video>
    <script src="/simple-peer/simplepeer.min.js"></script>
    <script>
      // This allows you to determine whether the microphone and camera are ready for use.
      navigator.mediaDevices.enumerateDevices().then(function (devices) {
        devices.forEach(function (device) {
          console.log(
            device.kind + ": " + device.label + " id = " + device.deviceId
          );
        });
      });

      navigator.mediaDevices
        .getUserMedia({
          video: false,
          audio: true,
        })
        .then((stream) => {
          const p = new SimplePeer({
            initiator: location.hash === "#1",
            trickle: false,
            stream,
          });
          p.on("error", (err) => console.log("error", err));
          p.on("signal", (data) => {
            console.log("SIGNAL", JSON.stringify(data));
            document.querySelector("#outgoing").textContent =
              JSON.stringify(data);
          });
          document.querySelector("form").addEventListener("submit", (ev) => {
            ev.preventDefault();
            p.signal(JSON.parse(document.querySelector("#incoming").value));
          });
          p.on("connect", () => {
            console.log("CONNECT");
            p.send("whatever" + Math.random()); // Or Files
          });
          p.on("data", (data) => {
            console.log("data: " + data);
          });
          p.on("stream", function (stream) {
            let video = document.getElementById("video");
            video.srcObject = stream;
            video.play();
          });
        })
        .catch((error) => {
          console.log(error);
        });
    </script>
  </body>
</html>

Входящий идентификатор, форма и элемент видео присутствуют в предыдущем разделе HTML-кода. Когда мы нажимаем кнопку отправки, offers и answers, созданные simple-peer, будут вручную перенесены в текстовую область формы. Чтобы реализовать это в реальном приложении, вы должны использовать socket.io или pusher. Однако мне пришлось использовать HTML-форму и текстовое поле, чтобы выполнить эту передачу данных, чтобы изучить и завершить это руководство.

Раздел JavaScript выше включает код, используемый для создания приложения для видеочата. Во-первых, мы будем использовать navigator.mediaDevices.getUserMedia для доступа к камере пользователя:

navigator.mediaDevices
  .getUserMedia({
    video: {
      facingMode: true,
    },
    audio: true,
  })
  .then((stream) => {
    // Simple Peer code goes in here
  })
  .catch((error) => {
    console.log(error);
  });

Приведенный выше код позволяет нам получить доступ к пользовательскому мультимедиа, описанному ранее в этой статье. Чтобы установить поток после подключения обоих браузеров, мы просто используем «p.on («поток»»):

p.on("stream", function (stream) {
  let video = document.getElementById("video");
  video.srcObject = stream;
  video.play();
});

Функция добавляется вторым параметром к peer.on и возвращает прямую трансляцию, которая будет отображаться на устройствах обоих пользователей.

Вы можете отправлять сообщения, фотографии, PDF-файлы, фильмы и любые другие материалы с помощью peer.send:

p.on("connect", () => {
  p.send("whatever" + Math.random()); // Or Files
});

Теперь, когда у нас есть суть простого кода, который мы вставили ранее в этом разделе, вот что происходит, когда вы запускаете его на живом сервере.

Имейте в виду, что вы можете использовать любой метод для его запуска.

Если вы не можете обнаружить данные JSON, напечатанные на вашем экране, убедитесь, что ваша камера и микрофон правильно подключены и установлены. Запустите приведенный ниже код, чтобы убедиться, что камера и микрофон вашего компьютера готовы к использованию.

// This allows you to determine whether the microphone and camera are ready for use.
navigator.mediaDevices.enumerateDevices().then(function (devices) {
  devices.forEach(function (device) {
    console.log(device.kind + ": " + device.label + " id = " + device.deviceId);
  });
});

Как вы можете видеть из приведенного выше снимка экрана браузера, я выдал два браузера, что позволило нам легко работать и тестировать подключение пира. Левый браузер будет звонящим по видео, который создаст предложение, а правый браузер будет получателем, который ответит на видеозвонок. Как видно из приведенного выше результата, левый браузер будет выдавать предложение. Чтобы заставить левый браузер сделать предложение, я просто добавил решетку (#1) в конец URL-адреса в левом браузере — например, http://127.0.0.1:5500/index.html#1.

Обратите внимание, что номер порта был сгенерирован работающим сервером.

Поскольку конструктор SimplePeer ожидает инициатора, я просто использовал свойство окна «location.hash», чтобы проверить, соответствует ли оно #1.

const p = new SimplePeer({
  initiator: location.hash === "#1",
});

Пришло время отправить предложение, над которым вы работаете, в другой правильный браузер. Просто скопируйте предложение, созданное в первом браузере (инициаторе), и вставьте его в текстовое поле, которое появляется в правом браузере (получателе):

Пожалуйста, нажмите кнопку отправки после вставки идентификатора в текстовое поле, чтобы второй браузер мог легко answer перейти к предложению.

После нажатия кнопки отправки вы должны увидеть следующий вывод:

Когда мы нажимаем кнопку отправки, генерируется идентификатор типа answer, как показано в результате выше.

Помните, что во втором браузере URL отсутствует хэш, например "#1".

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

Я вставил идентификатор ответа, сгенерированный вторым браузером (получателем), в первый браузер из приведенного выше вывода. Нажмите кнопку отправки в левом браузере вызывающего абонента, чтобы начать видеовызов. После того, как вы нажмете кнопку «Отправить», видеопоток начнет делиться в двух разных браузерах, которые появятся в нижней части страницы вашего браузера:

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

Обратите внимание, что при тестировании видеоприложения я направил внешнюю камеру своего ПК на монитор. Кроме того, вы можете убедиться, что правильно протестировали это на своей стороне.

Вы можете щелкнуть здесь, чтобы просмотреть репозиторий GitHub приложения для видеочата.

Заключение

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

Первоначально опубликовано на https://blog.openreplay.com.