Понимание WebRTC

Одна из передовых технологий, которая сжигает Интернет

WebRTC приобрел большую популярность в сообществе веб-разработчиков за последнее десятилетие. Благодаря пандемии (хотя и в положительном смысле) многие компании начали переходить на постоянную работу из дома👨‍💻 , например, Atlassian, Shopify, Spotify, Twitter… (Боже мой, этот список можно продолжить). Это внедрение удаленной работы побудило большинство компаний приобрести инструменты для общения в реальном времени, такие как MS Teams и Gmeet, в которых WebRTC является основным компонентом.

По данным PayScale, средняя зарплата WebRTC-разработчика в США в 2022 году составит около 74 136 долларов в год. Довольно солидная плата, хорошо, давайте сразу перейдем к теме.

Что такое WebRTC?

WebRTC — это платформа с открытым исходным кодом, которая позволяет передавать данные в реальном времени с помощью надежного протокола и методов шифрования.

Этими данными в реальном времени могут быть аудио, видео или, может быть, простое строковое сообщение, которым можно обмениваться очень быстро и безопасно, всего несколькими строками кода! 💆

С чего начать 🤔

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

Давайте начнем с простого описания, следуя принципу KISS 😘. Откройте редактор кода и скопируйте и вставьте приведенный ниже код.

Обычный javascript скучен, давайте добавим к нему немного html и css начинки 🥳

Потрясающий! 🤩 Мы сделали это! 😎 Мы создали чат-приложение на базе WebRTC. Теперь давайте лучше разберемся в коде.

Части HTML и CSS говорят сами за себя, поэтому мы можем сосредоточиться только на javascript. В этом примере мы создали простое приложение для чата, которое использует встроенный в WebRTC dataChannelAPI для отправки и получения сообщений чата.

Итак, что такое канал данных?

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

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

Что такое peerConnection?

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

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

RTCIceCandidate
Протокол описания сеанса (sdp)

Лед что ли?

Interactive Connectivity Establishment (ICE) — это структура, которая действует как протокол и механизм маршрутизации для одноранговых узлов для связи с использованием RTCPeerConnection.

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

Хорошо, а как насчет SDP?

SDP — это еще один протокол, который содержит информацию, относящуюся к сеансу, такую как поддерживаемые аудио- или видеокодеки, алгоритмы шифрования и другие сведения, относящиеся к устройству.

SDP — один из основных компонентов WebRTC. Кроме того, первым шагом в создании соединения WebRTC между двумя одноранговыми узлами является создание и обмен sdp (предложение и ответ).

Чтобы создать соединение WebRTC, мы проходим этап сигнализации🚥. Давайте разберемся с потоком сигналов WebRTC, послушав 💞 историю.

История Ромео🤵 — Джульетты👩‍💼

Ромео хочет отправить сообщение Джульетте, поэтому он решает использовать WebRTC. Romeo создает предложение sdp из своего локального RTCPeerConnection и устанавливает его в качестве локального описания. Теперь Ромео отправляет предложение sdp Джульетте 💌 через какой-то протокол связи (возможно, через сокет).

localConnection = new RTCPeerConnection();
localConnection.createOffer().then((offer) => {
    localConnection.setLocalDescription(offer);
    // send offer to Juliet👩‍💼
}

Джульетта получает предложение и устанавливает его как удаленное описание и создает ответ sdp для локальной установки, отправляет его обратно Ромео 💌.

remoteConnection = new RTCPeerConnection();
remoteConnection.setRemoteDescription(offer).then(() => {
    remoteConnection.createAnswer().then((answer) => {
        remoteConnection.setLocalDescription(answer)
        // send answer to Romeo🤵
    })
})

Получив ответ-сдп, Ромео обрадовался и установил его в качестве своего удаленного описания. В результате на обоих концах стали генерироваться ледяные кандидаты, которыми затем обмениваются 💌 в режиме реального времени.

localConnection.setRemoteDescription(answer)
localConnection.onicecandidate = (event) => {
    remoteConnection.addIceCandidate(event.candidate);
    // send candidate to Juliet👩‍💼
}
remoteConnection.onicecandidate = (event) => {
    localConnection.addIceCandidate(event.candidate);
    // send candidate to Romeo🤵
}

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

sendChannel = localConnection.createDataChannel("romeo-juliet");
sendChannel.send("Hey my love ❤️");

Джульетта, с другой стороны, прослушивает только что созданный канал данных и получает сообщение.

receiveChannel.onmessage = (event) => {
    message = event.data; //Hey my love ❤️
}

такой счастливый конец не так ли 😊 , как это вообще возможно ?

БУМ!!! Не удалось отправить сообщение.

Что может быть причиной этой ошибки? Что должен сделать Ромео, чтобы решить эту проблему? Ждем ваших ответов в разделе комментариев.

Заключение

Я знаю, что это будет ошеломляюще, так как мы обсудили много концепций в этом кратком блоге. Лучший способ изучить новые технологии — развить любопытство и попробовать экспериментировать. Прежде всего, рекомендуется прочитать документацию. Да, чтение документации — один из лучших способов лучше понять суть вещей. Вы также можете найти ответы на приведенные выше вопросы 💡😉 проверьте это.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube,и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.

Понимание WebRTC — Часть 1