Создание сайтов в Попасной, ЛНР. Создание приложений для видеочата WebRTC

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

Если вам нужно немного предыстории WebRTC и одноранговой связи, рекомендую прочитать «Рассвет WebRTC «и «Введение в API getUserMedia «.

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

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

Что такое WebRTC

WebRTC (веб-связь в реальном времени) — это проект с открытым исходным кодом, который обеспечивает одноранговую связь в реальном времени между веб-браузерами для потоковой передачи потокового видео, аудио и данных по сети. Современные настольные и мобильные браузеры, такие как Google Chrome, Mozilla Firefox, Safari, Opera и другие браузеры на основе Chromium, уже изначально реализовали эту технологию. Это хорошая новость, поскольку пользователям не нужно устанавливать сторонний плагин или приложение для доступа к технологии.

В более старых версиях браузеров и устаревших браузерах, таких как Internet Explorer, эта технология отсутствует. Пользователям необходимо будет использовать современные браузеры. Вы можете проверить полный список поддерживаемых браузеров:

В январе 2021 года спецификация WebRTC 1.0 была переведена из статуса кандидата в рекомендации в статус рекомендации консорциумом World Wide Web. Это замечательное достижение, учитывая, что впервые технология была представлена ​​общественности 10 лет назад.

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

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

Как работает сигнализация для веб-браузеров

Само определение WebRTC — это одноранговая связь между веб-браузерами. Реальность такова, что большинство браузеров работают на компьютерах, которые работают за устройством NAT (преобразование сетевых адресов) и, возможно, за брандмауэром. Устройство NAT, обычно маршрутизатор или модем, позволяет компьютерам с частными IP-адресами подключаться к Интернету через один общедоступный IP-адрес.

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

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

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

Вот анимированная демонстрация:

webrtc оглушает только сигнализацию

Фото предоставлено: Сигнализация WebRTC

Чтобы настроить сигнализацию WebRTC, платформа ICE требует, чтобы вы предоставили два типа серверов, подробно описанных ниже.

1. STUN-сервер

Сервер STUN (Session Traversal Utilities for NAT) делает именно то, что я только что описал выше. Он просто предоставляет пространство для встреч компьютеров для обмена контактной информацией. После обмена информацией между одноранговыми компьютерами устанавливается соединение, после чего сервер STUN не участвует в остальной части диалога.

Вот пример скрипта, который запускается на клиенте и позволяет браузеру инициировать подключение через STUN-сервер. Сценарий позволяет указать несколько URL-адресов сервера STUN в случае сбоя одного из них:

Соединения, установленные через серверы STUN, являются наиболее идеальным и экономичным типом связи WebRTC. Пользователи почти не несут эксплуатационных расходов. К сожалению, соединение может не установиться для некоторых пользователей из-за типа устройства NAT, используемого каждым узлом. В такой ситуации протокол ICE требует, чтобы вы предоставили запасной вариант, который представляет собой сигнальный сервер другого типа, известный как сервер TURN.

2. ПОВЕРНИТЕ сервер

Сервер TURN (Traversal Using Relay NAT) является расширением сервера STUN. Отличие от своего предшественника в том, что он обрабатывает весь сеанс связи.

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

Ниже представлено графическое изображение всего процесса передачи сигналов с участием сначала сервера STUN, а затем сервера TURN в качестве запасного варианта:

webrtc оглушает сигнал поворота

Фото предоставлено: Полная архитектурная схема, показывающая весь процесс WebRTC.

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

Хотя можно настроить собственное решение для видеочата, используя простой код JavaScript и бесплатные общедоступные серверы STUN, не все смогут общаться друг с другом на вашей платформе. Использование серверов TURN является обязательным, если вы хотите предоставить надежный сервис всем своим пользователям.

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

Что такое SimpleWebRTC

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

SimpleWebRTC SDK: интерфейсная библиотека

Хостинг: серверы STUN/TURN и SFU (Selective Forward Unit).

Техническая поддержка

Разработка пользовательских приложений и консультационные услуги по WebRTC

Однопользовательская и локальная инфраструктура

Talky: бесплатное приложение для видеочата, полностью созданное с помощью SimpleWebRTC.

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

веб-разговорчивый

Фото кредит: Talky

веб-репетиторство

Фото предоставлено: приложение для веб-обучения.

Основные услуги WebRTC, предоставляемые платформой SimpleWebRTC, включают:

безопасная потоковая передача видео, голоса и демонстрации экрана

сквозное шифрование

поддержка до 30 одновременных пользователей

неограниченное количество комнат

Что касается цен, они предлагают следующие планы:

Малая группа: до 6 участников, от $5 в месяц

Большая группа: до 30 участников, от $3 в месяц

Преимущество плана для малых групп состоит в том, что сквозное шифрование доступно по сравнению с планом для больших групп. В плане Small Group 60–80% сеансов представляют собой одноранговые соединения, при которых медиапотоки никогда не касаются серверов. Потребление пропускной способности для таких типов сессий не тарифицируется.

В планах для больших групп трафик направляется через сервер, называемый SFU (Selective Forwarding Unit), где измеряются все потоки.

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

Предпосылки

Клиентская библиотека SimpleWebRTC зависит от экосистемы React и Redux. Вам необходимо обладать базовыми навыками в следующих областях:

Реагировать

Редукс

Асинхронные библиотеки Redux, такие как Redux Thunk, Redux Saga и Redux Observables.

Будущие версии SimpleWebRTC SDK будут включать поддержку других фреймворков, таких как React Native, Angular, Flutter и Vue.js. Есть также планы по выпуску решения для видеочата «без кода», которое позволит пользователям автоматически развертывать собственную фирменную версию Talky.

Настройка учетной записи

Перейдите на страницу регистрации simplewebrtc.com и зарегистрируйте новую учетную запись. Вам будет предоставлено 2 ГБ пропускной способности плюс еще 3 ГБ, если вы подпишитесь на их информационный бюллетень. Этого разрешения должно быть достаточно для разработки и тестирования приложения для видеочата.

регистрация аккаунта

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

зарегистрировать API-ключ

С помощью этого ключа API вы можете начать создавать собственное приложение WebRTC. В следующем разделе мы запустим полный образец приложения, созданный командой SimpleWebRTC.

Сборка и запуск примера приложения

Прежде чем мы запустим пример приложения, давайте кратко рассмотрим, как мы можем начать с нуля. Во-первых, вам нужно настроить проект React, который использует веб-пакет для разработки. В этом вам может помочь генератор приложений create-react-app.

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

Вместо этого мы рассмотрим полный образец проекта, который вы можете загрузить с GitHub, где вы сможете увидеть, как все это устроено. После загрузки вам нужно будет указать свой ключ API в формате, public/index.htmlкак показано ниже:

Вам также потребуется выполнить быстрый видеотест в браузере, чтобы убедиться, что технология видеовызовов API работает с вашей стороны. Далее вы будете перенаправлены на панель инструментов, где вам нужно создать комнату. Назовем helloпока. Панель инструментов предоставляет ряд настраиваемых параметров для вашей комнаты, таких как конфиденциальность, совместное использование экрана и разрешения на запись.

Вашему приложению потребуется сборщик, такой как webpack или Rollup, для работы с этой библиотекой. К сожалению, пользователям Vite и Parcel не повезло. В их репозитории GitHub есть полный образец приложения React, который вы можете проверить. Есть инструкции, как настроить приложение и как развернуть его на Netlify.

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

Другие альтернативы

Есть много других альтернатив SimpleWebRTC и Daily, которые я перечислю далее. К коммерческим относятся:

Ксирсис

Сумерки

Вонаж

Ледяная гора

Twilio, Vonage и Frozen Mountain предоставляют разработчикам внешние библиотеки и внутренние серверы, необходимые для создания и запуска решения для видеочата в реальном времени. Xirsys предоставляет только внутренние серверы, то есть серверы STUN и TURN. Вам нужно будет использовать библиотеку с открытым исходным кодом, такую ​​как PeerJS, чтобы клиентская библиотека могла подключиться к ней.

В Интернете доступно множество библиотек WebRTC с открытым исходным кодом. Однако большинство из них не поддерживаются активно, за исключением следующих:

PeerJS

Открыть EasyRTC

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

Заключение

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

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