Primary tabs

Как создать приложение для видео чата?

Ссылка на оригинал - https://blog.phuaxueyong.com/post/2020-06-15-how-to-make-a-video-chat-app/, автор публикации - JOSHUA PHUA

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

Даже если вы не слышали о WebRTC, вы, вероятно, уже использовали его раньше. Они используются в Whatapps, Facebook и даже в Google handout и т.д. Это называется Web Real-Time общение, которое позволяет вам иметь прямое соединение между браузерами. Эта технология существует уже как минимум 7 лет, но я, наконец, наверстала упущенное! Мне удалось создать собственное приложение WebRTC, чтобы испачкать руки, чтобы лучше понять инструмент.

Вот мое приложение WebRTC в качестве моей новой игровой игрушки! Проверьте это здесь


В этой статье я расскажу о некоторых широких темах:

1. Как это работает?

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

2. Какие компоненты необходимы для запуска приложения WebRTC

Веб-приложение имеет разные компоненты. Большинство из них невидимы и не видны, такие как сервер и т. п. Но они похожи на двигатель вашего автомобиля. Вы не видите этого, когда ведете машину (если вы не водите Doge Charger R / T), но это не значит, что двигателя там тоже нет.

Источник: Carsforsale

3. Для чего используется сервер STUN

В этом разделе мы немного поговорим о том, как и когда вам нужен сервер STUN во всем процессе.

4. Для чего используется сервер TURN

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

5. Каковы некоторые из возможных архитектур WebRTC для разных вариантов использования и оптимизированной емкости помещения

В основном, когда мы говорим о WebRTC, существует 4 типа архитектур. Когда вы используете масштабирование, задумывались ли вы, как сервер может обрабатывать собрания до 160 участников? Это не волшебство, и на самом деле для передачи требуется ОГРОМНАЯ тонна данных, говоря о терабайтах данных за простой вызов 10 минут.

Получение правильной архитектуры для бизнес-прецедента - полдела

6. Как проверить свой WebRTC и бесплатный ресурс, чтобы попробовать

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

Давайте погрузимся!


# 1. Как это работает?

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

В техническом смысле сигнализация является частью структуры установления интерактивного взаимодействия и представляет собой процесс поиска друг друга, а затем координации взаимодействия посредством обмена медиаинформацией. Сигнализация использует протокол описания сеанса (SDP) для сбора сетевой информации, такой как адрес интернет-протокола (IP-адрес) и номера портов, используемых для обмена мультимедиа.

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

Чтобы ваш браузер мог подключаться к другим, информация, передаваемая в SDP, содержит следующее:

  • Сообщения управления сеансом, используемые для открытия или закрытия связи.
  • Сообщения об ошибках.
  • Метаданные мультимедиа, такие как кодеки и настройки кодеков, пропускная способность и типы мультимедиа.
  • Ключевые данные, используемые для установления защищенных соединений.
  • Сетевые данные, такие как IP-адрес хоста и порт, видимый внешним миром.

Архитектура того, как будет выглядеть ваше приложение WebRTC


# 2. Какие компоненты необходимы для запуска и запуска приложения WebRTC?

1. Вам нужен пользовательский интерфейс.

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

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

2. Вам нужен сервер для сигнализации

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

С технической точки зрения WebRTC управляет созданием и обработкой информации SDP, но не отправляющей и принимающей ее частью. Поэтому для этой передачи необходим сервер. Для этой передачи и инициализации довольно часто используется сервер веб-сокетов.

3. Вам нужен сервер STUN

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

4. Вам может понадобиться сервер TURN

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


# 3. Для чего используется сервер STUN?

Утилиты обхода сессии для Nat (STUN). Обе стороны обязательно должны знать хотя бы IP-адрес своего партнера и назначенный порт UDP.

Независимо от используемой архитектуры, нам всегда понадобится сигнальный сервер для регистрации и присутствия. Нам понадобится сервер TURN для обхода сети и обеспечения возможности сопоставления внутренних IP-адресов с внешними общедоступными IP-адресами.

Как работает STUN

STUN сервер

Вы можете свободно обновлять или редактировать это здесь

Теперь вы можете видеть, что сервер STUN используется вашим браузером для запроса вашего публичного IP-адреса. Все это сделано под капотом, вне поля зрения. Одна вещь, которую я узнал, магия никогда не бывает волшебной. За сценой происходит много вещей. Если вы хотите научиться магии? Вы должны изучить эти шаги за кулисами.


# 4. Что такое сервер TURN

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

Включи сервер


# 5. Как масштабировать, есть 4 ключевые архитектуры, которые вы можете рассмотреть!

  • меш

Клиент-клиент, где в конференц-связи 3 клиента, будет 2 соединения для шифрования и установления. Все соединяются со всеми, как вы можете видеть на скриншоте ниже:

  • Форвардинг

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

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

  • смешивание

Микширование зависит от многоточечного блока управления (MCU), который выступает в качестве мощного медиа-микшера в середине сеанса. Каждый клиент подключается к MCU один раз, имея дело только с одним двунаправленным соединением, независимо от количества подключенных клиентов. Соединение будет использоваться для отправки и получения медиа с сервера.

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

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

  • Гибридный

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

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

# 6. Как вы тестируете свой WebRTC, используя Testrtc

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

С помощью стресс-теста на 500 участников, разбейте его на группы по многопартийным вызовам с 5 участниками, работающими всего 6,5 минут. Сервер фактически передал 52 ГБ медиа-трафика в обоих направлениях. Менее 10 минут.


# 6б. Ресурсы

Существуют бесплатные серверы STUN, которые вы можете использовать в своей реализации webRTC

Бесплатный уровень для webRTC

Я нашел исчерпывающее видео на YouTube, которое помогает понять, как работает приложение WebRTC. Интересно узнать, что все видео на YouTube, связанные с webrtc, имеют возраст не менее года. WebRTC существует уже около 7 лет. Я думаю, что Джошуа здесь наконец-то догнал, и я надеюсь, что мне удалось познакомить вас с этой устаревшей технологией сегодня! (:


Ссылки:

Добавить комментарий

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Не нашли ответ на свой вопрос? Возможно, вы найдете решение проблемы на нашем канале в Youtube! Здесь мы собрали небольшие, но эффективные инструкции. Смотрите и подписывайтесь на наш youtube-канал!

Смотреть на Youtube