Пиринговые соединения

RTCPeerConnection — это центральный интерфейс API WebRTC. Он представляет собой соединение между локальным и удаленным узлом и предоставляет все функции и события, необходимые для установления соединения.

Установление однорангового соединения

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

  1. Создайте новый экземпляр RTCPeerConnection с соответствующей конфигурацией ICE.
  2. Создайте локальное описание SDP, используя RTCPeerConnection.createOffer() .
  3. Установите локальное описание SDP с помощью RTCPeerConnection.setLocalDescription() .
  4. Передайте (с помощью службы сигнализации) локальное описание SDP удаленному узлу.
  5. Зарегистрируйте прослушиватель событий icecandidate в RTCPeerConnection .
  6. Для каждого события icecandidate передавайте его (с помощью службы сигнализации) удаленному узлу.
  7. Дождитесь поступления удаленного описания SDP от службы сигнализации и установите его с помощью RTCPeerConnection.setRemoteDescription() .
  8. Дождитесь входящих удаленных кандидатов ICE от службы сигнализации и добавьте их с помощью RTCPeerConnection.addIceCandidate()

На стороне вызываемого абонента процесс немного отличается.

  1. Создайте новый экземпляр RTCPeerConnection с соответствующей конфигурацией ICE.
  2. Дождитесь поступления удаленного описания SDP от службы сигнализации и установите его с помощью RTCPeerConnection.setRemoteDescription() .
  3. Создайте ответ для удаленного описания SDP, вызвав RTCPeerConnection.createAnswer() .
  4. Передача (с использованием службы сигнализации) ответа удаленному узлу.
  5. Зарегистрируйте прослушиватель событий icecandidate в RTCPeerConnection .
  6. Для каждого события icecandidate передавайте его (с помощью службы сигнализации) удаленному узлу.
  7. Дождитесь входящих удаленных кандидатов ICE от службы сигнализации и добавьте их с помощью RTCPeerConnection.addIceCandidate()

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

При реализации приложения с использованием этого API разработчику рекомендуется использовать async и await вместо регистрации прослушивателей (с использованием Promise.then() ), поскольку это упрощает отслеживание вашего кода. Рассмотрим следующий пример:

function createAndSendOffer(peerConnection, signallingService) {
    peerConnection.createOffer()
                  .then(offer => {
                      signallingService.send({
                          type: 'offer',
                          data: offer
                      });
                  });
}

При написании приведенного выше кода с использованием async и await мы получаем следующее:

async function createAndSendOffer(peerConnection, signallingService) {
    const offer = await peerConnection.createOffer();
    signallingService.send({
        type: 'offer',
        data: offer
    });
}
,

RTCPeerConnection — это центральный интерфейс API WebRTC. Он представляет собой соединение между локальным и удаленным узлом и предоставляет все функции и события, необходимые для установления соединения.

Установление однорангового соединения

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

  1. Создайте новый экземпляр RTCPeerConnection с соответствующей конфигурацией ICE.
  2. Создайте локальное описание SDP, используя RTCPeerConnection.createOffer() .
  3. Установите локальное описание SDP с помощью RTCPeerConnection.setLocalDescription() .
  4. Передайте (с помощью службы сигнализации) локальное описание SDP удаленному узлу.
  5. Зарегистрируйте прослушиватель событий icecandidate в RTCPeerConnection .
  6. Для каждого события icecandidate передавайте его (с помощью службы сигнализации) удаленному узлу.
  7. Дождитесь поступления удаленного описания SDP от службы сигнализации и установите его с помощью RTCPeerConnection.setRemoteDescription() .
  8. Дождитесь входящих удаленных кандидатов ICE от службы сигнализации и добавьте их с помощью RTCPeerConnection.addIceCandidate()

На стороне вызываемого абонента процесс немного отличается.

  1. Создайте новый экземпляр RTCPeerConnection с соответствующей конфигурацией ICE.
  2. Дождитесь поступления удаленного описания SDP от службы сигнализации и установите его с помощью RTCPeerConnection.setRemoteDescription() .
  3. Создайте ответ для удаленного описания SDP, вызвав RTCPeerConnection.createAnswer() .
  4. Передача (с использованием службы сигнализации) ответа удаленному узлу.
  5. Зарегистрируйте прослушиватель событий icecandidate в RTCPeerConnection .
  6. Для каждого события icecandidate передавайте его (с помощью службы сигнализации) удаленному узлу.
  7. Дождитесь входящих удаленных кандидатов ICE от службы сигнализации и добавьте их с помощью RTCPeerConnection.addIceCandidate()

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

При реализации приложения с использованием этого API разработчику рекомендуется использовать async и await вместо регистрации прослушивателей (с использованием Promise.then() ), поскольку это упрощает отслеживание вашего кода. Рассмотрим следующий пример:

function createAndSendOffer(peerConnection, signallingService) {
    peerConnection.createOffer()
                  .then(offer => {
                      signallingService.send({
                          type: 'offer',
                          data: offer
                      });
                  });
}

При написании приведенного выше кода с использованием async и await мы получаем следующее:

async function createAndSendOffer(peerConnection, signallingService) {
    const offer = await peerConnection.createOffer();
    signallingService.send({
        type: 'offer',
        data: offer
    });
}