Давайте построим приложение видео чата с JavaScript и Webrtc

Автор оригинала: Nilmadhab mondal.

Начать писать Часть 1: Понимание webrtc Это первый учебник в нашей серии WEBRTC. Целью этой серии является объяснение того, что INBRTC и как мы можем использовать его в веб-приложениях. В этой части мы будем понимать различные концепции, необходимые для разработки приложения с использованием WEBRTC.

Учебники в этой серии

Понимание webrtc (это учебное пособие)
[Внедрение WEBRTC в коде] (https://dev.to/nilmadhabmondal/let-s-build-a-video-chat-app-with-javascript-and-webrtc–7l3)

Вступление

Если вы не знакомы с веб-видеоконференцсвязными платформами и приложениями перед пандемией COVID-19, мы сделаем ставку, вы знаете все о них сейчас и, должно быть, использовали один из них.

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

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

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

Основы

Прежде чем мы начнем разработать такое веб-приложение, нам нужно понять, как приложение E-Conferencing отличается от простого веб-приложения в чате.

В простом веб-приложении в чате, когда два браузера должны отправлять сообщения друг другу, им обычно требуется сервер для координации и передачи сообщений. Но имея сервер в среднем приводит к задержке связи между браузерами. Эта задержка вряд ли влияет на полезность приложения в чате. Даже если эта задержка (говорит) (говорит) 5 секунд, мы все равно сможем использовать это приложение в чате.

Однако в случае приложения видеоконференций эта задержка значительна. Будет чрезвычайно трудно поговорить с кем-то, используя такое приложение. Представьте себе, что разговаривать с кем-то, кто получает ваш голос 5 секунд позже. Вы можете понять, как это раздражает.

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

Webrtc.

Webrtc означает веб-в режиме реального времени. Это позволяет одноранговым связью без какого-либо сервера между ними и позволяет обменять аудио, видео и данные между подключенными коллегами. С WEBRTC роль сервера ограничивается просто помогающим двум сверстникам открывать друг друга и настроить прямое соединение. Чтобы построить приложение (для которого требуется одноранговая связь) с нуля без WEBRTC, вам понадобится богатство каркасов и библиотек, касающихся типичных вопросов, таких как

потери данных
Снижение соединения
Traversal NAT
Эхоподавление
Пропускная способность адаптивность
Динамическая буферизация джиттера
Автоматический контроль усиления
Шумоподавление и подавление

С WEBRTC, все это приходит Встроенный в браузер вне коробки. WEBRTC ** автоматически обрабатывает все эти проблемы под капотом. ** Эта технология не требует плагинов или стороннего программного обеспечения. Он открыт, и его исходный код свободно доступен по адресу http://www.webrtc.org/.

Хотя большинство основных браузеров (например, Chrome, Firefox и т. Д.) внедрили WEBRTC Framework и обнажили API для разработчиков WEBRTC для разработчиков, лучше подтвердить, что ваша версия браузера поддерживает его. Вы можете найти список всех браузеров, поддерживающих здесь WEBRTC.

Apis webrtc.

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

GetUsermedia () : захватить аудио и видео.
MediareCarder: Запишите аудио и видео.
RTCPeerConnection: Поток аудио и видео между пользователями.
RTCDatachannel: поток данных между пользователями.

Сигнализация

До того, как два сверстника могут начать общаться друг с другом, они должны знать много информации о том, как –

Если для связи есть какой-либо другой свертчик.
Сетевые данные, такие как IP-адрес сверстников и порт, как видно на внешнем мире
Сообщения управления сессией – используется для открытия или закрытия связи
Сообщения об ошибках
Media Metadata, такие как кодеки, настройки кодека, полоса пропускания и типы носителей, которые будут отправлены со стороны
Основные данные, используемые для установления безопасных соединений

Не волнуйтесь, если вы не понимаете, какова приведенная выше информация. Важно понять, что большая информация должна быть обменена до того, как можно обменять прямое соединение. Такая информация может быть названа как Метаданные.

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

Помните – Для сигнализации нам нужен сервер.

Протокол описания сеанса: –

Механизм сигнализации (методы, протоколы и т. Д.) Не указан WEBRTC. Нам нужно построить это сами. (Хотя это кажется сложной задачей, поверьте нам – это не так. В этой серии мы будем использовать Socket.io для сигнализации, но есть много альтернативных).
MEBRTC требует только обмен метаданными средств массовой информации, упомянутых выше между коллегами, как Предложения и ответы. Предложения и ответы сообщаются в Описание сеанса Протокол (SDP) Формат, который выглядит следующим образом: – V = 0 O = - 7614219274584779017 2 в IP4 127.0.0.1 S = - 0: Bundle Audio Video-Semantion: WMS 1 RTP/SAVPFF 111 103 104 0 8 107 106 105 13 126 IP4 0.0.0.0 …
Если вам интересно, что означает каждую строку в приведенном выше формате, не волнуйтесь. MEBRTC создает это автоматически в соответствии со звуковым/видеоустройством, присутствующим на вашем ноутбуке/ПК.

Так как работает приложение WEBRTC?

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

Прежде чем мы обсудим, вы должны понимать, какие IP-адреса и порты.

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

Таким образом, каждое устройство, которое подключено к Интернету, имеет IP-адрес и многие порты (обычно 65 536). Rtcpeerconnection API и сигнализация: предложение, ответ и кандидат

Как мы обсуждали до Rtcpeerconnection API WEBRTC используется для потока аудио и видео между пользователями. Следовательно, сигнализация работает вместе с Rtcpeerconnection установить прямое соединение между браузерами.

Чтобы инициализировать этот процесс Rtcpeerconnection имеет две задачи:

Определение местных условий сред (аудио и видео), такие как возможности разрешения и кодеков. Это метаданные, используемые для предложения и ответа и отправляются через сигнализацию.
Получите потенциальные сетевые адреса (известные как кандидаты) (что состоит из IP-адреса и номера порта) для хоста приложения, который должен также отправляться сигнализацией

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

Представьте себе Эми пытается позвонить Bernadette Отказ Вот полное предложение/ответ ответа во всех его деталях: сначала давайте обсудим, как они будут делиться информацией о условиях СМИ.

Эми создает Rtcpeerconnection объект.
Эми создает предложение (описание сеанса SDP) с Rtcpeerconnection CreateOffer () метод.
Эми звонит setlocaldescription () Чтобы установить созданное предложение (описание сеанса) в качестве описания локальных носителей в соединении, которое будет создано.
AMY строгает предложение и использует механизм сигнализации для отправки его в Bernadette.
Bernadette звонит setremotedescription () С предложением Эми, так что ее Rtcpeerconnection Знает об установке Эми.
Bernadette звонит Createanswer () И функция обратного вызова успеха для этого передается локальное описание сеанса – ответ Bernadette.
Bernadette устанавливает свой ответ как местное описание, позвонив setlocaldescription () Отказ
Затем Bernadette использует механизм сигнализации для отправки ее строгового ответа на Эми.
Эми устанавливает ответ Bernadette в качестве дистанционного описания сеанса, используя setremotedescription () Отказ

Теперь Эми и Бернадете также нужно также обменять сетевую информацию. Выражение «нахождение кандидатов» относится к процессу поиска сетевых интерфейсов и портов (присутствует на одноранговых интерфейсах и доступна для установления прямой связи с другой PEER) с помощью льда Рамки Отказ

Эми создает Rtcpeerconnection объект с OnicecanDidate обработчик.
Обработчик называется, когда сетевые кандидаты становятся доступными.
В обработчике, Эми Отправляет строгие данные кандидата в Bernadette через их канал сигнализации.
Когда Bernadette Получает кандидатское сообщение от Эми она звонит AddiceCanditytate () Чтобы добавить кандидата на дистанционное описание реестра.

WEBRTC поддерживает Ледяной кандидат ободки , который позволяет вызывающемуленсу постепенно и автоматически предоставлять кандидаты в Callee после первоначального предложения, а для Callee автоматически начать действовать на вызов и настроить соединение без ожидания всех кандидатов для прибытия. Не волнуйтесь, если вы не понимаете Ледяной кандидат ободки Отказ Важно, что WEBRTC автоматически создает кандидаты льда (содержащие IP-адрес) после того, как сверстник создает предложение. Нам нужно только реализовать методы, которые необходимы для получения и отправки этих кандидатов через сигнализацию.

После того, как информация о условиях СМИ и кандидатов на льду передается между двумя сверстниками, WEBRTC автоматически создает прямое соединение между сверстниками.

После сигнализации – используйте лед, чтобы справиться с NATS и брандмауэрами

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

Проблема 1 – NAT

Если вы знакомы с компьютерными сетями, вы бы знали, что такое NAT. Если не знаю, не волнуйтесь. Мы объясним это здесь:

Вы уже знаете, какие IP-адреса. Это адрес, который идентифицирует устройство, подключенное к Интернету. Логично, вы ожидаете, что каждое устройство (которое подключено к Интернету) должно иметь уникальный IP-адрес. Но это не совсем верно.

Адрес IPv4 составляет 32 бита, что подразумевает, что существует около 4 миллиардов уникальных адресов, 294 967,296). В конце 2018 года было около 22 миллиардов устройств, подключенных к Интернету. Итак, вам должно быть интересно – если есть только 4 миллиарда IP-адресов, как 22 миллиарда устройств могут быть подключены к Интернету? Ответ на это Nat.

Ребята, которые поддерживают Интернет, придумали следующее решение – они разделили весь диапазон адресов IPv4 на две группы – публичные IP-адреса и частные IP-адреса. Теперь каждый публичный IP-адрес может быть назначен только одному устройству, но то же самое не соответствует частным IP-адресам. Смотрите изображение ниже для более разъяснений. В приведенной выше картинке каждый маршрутизатор имеет два IP-адреса – один публичный IP-адрес (обращенный к серверу) и один частный IP-адрес (обращенный к внутренней сети). Итак, если любое устройство внутри внутренней сети 1 отправляет запрос на сервер, сервер увидит запрос, исходящий из того же IP-адреса I.E. 180.190.104.50

Таким образом, это подразумевает, что каждый маршрутизатор отображает один публичный IP-адрес для нескольких частных IP-адресов устройств. Это также подразумевает, что каждое устройство (ноутбук, компьютер, смартфон) знает только свой частный IP-адрес, а не публичный IP-адрес маршрутизатора. (Кроме того, если вы ищете в Google – My IP-адрес, Google скажет вам публичный IP-адрес маршрутизатора (к подключению), потому что Google видит публичный IP-адрес маршрутизатора, а не ваш личный IP-адрес.)

Следовательно, в некотором смысле мы можем сказать, что каждое устройство имеет два IP-адреса – частный IP-адрес (назначенный устройству) и публичный IP-адрес (назначенный маршрутизатору, к которому подключен устройство).

Это может вызвать проблему для WEBRTC в качестве кандидатов на льду сети (сгенерированные браузером), содержат частный IP-адрес, а не публичный IP-адрес устройства. Следовательно, мы должны найти способ для браузера узнать общедоступный IP-адрес, чтобы он мог создавать кандидаты, содержащие публичный IP-адрес. Решение – это оглушение (коммунальные услуги обхода сеанса для NAT). Когда устройство делает запрос на STUN Server, STUN Server отвечает с сообщением, содержащим публичный IP маршрутизатора, к которому подключено устройство. Таким образом, STUN Server помогает браузеру генерировать кандидатов.

Мы увидим, как интегрировать Stun с Webrtc позже в руководстве.

Проблема 2 – Брандмауэр

На самом деле большинство устройств живут за одним или несколькими слоями брандмауэров, которые похожи на антивирусные программы, которые блокируют определенные порты и протоколы. Брандмауэр и Nat, на самом деле могут быть реализованы одним и тем же устройством, таким как маршрутизатор дома WiFi. Поскольку WEBRTC использует ряд нестандартных портов, некоторые брандмауэры не позволяют выполнять прямое соединение между двумя браузерами. Следовательно, решить это, нам нужен поворот (обход с помощью реле NAT) Server. Поверните сервер в основном, действует сервер ретрансляции I.E. Передающийся трафик напрямую между двумя сверстниками, если прямое (одноранговая) соединение не удается. Следующее изображение иллюстрирует: – Решение

Как мы обсуждали ранее, нам нужно использовать Shun и повороты серверов при создании одноранговой связи с использованием WEBRTC. Чтобы интегрировать поворот и оглушить с помощью WEBRTC, нам нужно только пройти объект, содержащий URL-адреса поворотов и окуривых серверов для RTCPeerConnection () в качестве его аргумента. Следующий код иллюстрирует: –

//Object containing TURN/STUN URLs.
var pcConfig = {
  'iceServers': [
  {
  	'urls': 'stun:stun.l.google.com:19302'
  },
  {
  	'urls': 'turn:192.158.29.39:3478?transport=udp',
  	'credential': 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
  	'username': '28224511:1379330808'
  },
  {
  	'urls': 'turn:192.158.29.39:3478?transport=tcp',
  	'credential': 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
  	'username': '28224511:1379330808'
  }
  ]
}........
//Passing the above object to RTCPeerConnection
RTCPeerConnection(pcConfig);

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

Следующая диаграмма иллюстрирует все соединения, сделанные во время вызова WEBRTC Примечание:-

В большинстве случаев успешное соединение будет сделано только с помощью Shun Server, и без необходимости сервера поворота. Только в течение нескольких раз вам потребуется сервер поворота для успешного вызова.
Есть компании (например, Xirsys), которые предоставляют бесплатный сервер поворота/STUN.

Поздравляем

Вы доверяли это до конца этого урока. Теперь вы должны иметь четкое понимание того, как работает WEBRTC.

До сих пор мы описали только набор событий, которые происходят, когда один человек (в нашем примере, emy ) пытается позвонить другому человеку (в нашем примере, Bernadette), используя webrtc. Если вам интересно, как реализовать все это в коде, оставайся настроенными нами. Мы напишем и объясним код, который реализует все эти концепции в следующем руководстве.

Продолжайте читать часть 2 здесь