Методы реализации видеосвязи в браузере с использованием Оpen-source инструментов

В рамках данной статьи представлено рассмотрение базового набора open-source инструментов, позволяющих реализовать инструментарий видеосвязи посредством обычного веб-браузера. В работе

Реализация видеосвязи не является проблемой для разработчиков – достаточно взять один из распространенных браузеров, и сформировать для него веб-сервис с использованием стандарта WebRTC (англ. Web Real Time Communications – Веб коммуникации в режиме реального времени). Это открытый стандарт, который не требует особых вычислительных мощностей, и позволяет осуществлять обмен любой мультимедиа информацией между двумя и более пользователями, используя в качестве клиента веб-браузер. То есть пользователям не требуется установка дополнительных приложений или расширений для браузера – достаточно открыть страницу сервиса, разрешить доступ к камере и микрофону, и ожидать соединения либо осуществить вызов своего собеседника.

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

Функционирование данной технологии основано на использовании собственного набора API. Данные программные интерфейсы являются открытыми и бесплатными, но при этом довольно жестко стандартизированы. Это позволяет использовать их при реализации видеосвязи посредством любого современного браузера. Основой API технологии WebRTC является использование языка программирования JavaScript в совокупности с инструментами языка гипертекстовой разметки, что позволяет разработчикам использовать их для работы практически с любым современным веб-браузером. Для подтверждения данного факта стоит кратко описать, каков уровень поддержки технологии WebRTC в современных браузерах. Один из популярнейших сегодня браузеров Google Chrome содержит большой набор инструментов для отладки и тестирования работы сервисов видеосвязи на основе технологии веб-связи в режиме реального времени, что делает его наиболее популярным среди разработчиков. Браузер Mozilla Firefox также обладает очень хорошим инструментарием, обеспечивающим поддержку технологии WebRTC, а команда разработчиков Mozilla являются активными участниками сообщества, поддерживающего этот стандарт. Еще один из известных браузеров Opera тоже может похвастаться высоким уровнем поддержки технологии WebRTC, и наличием большого числа инструментов, позволяющих реализовывать собственные приложения с её использованием. Браузер Microsoft Edge, поставляемый в комплекте с операционной системой Windows 10 и 11-й версий, функционирует на движке Chromium, в связи с чем уровень поддержки им технологии WebRTC аналогичен браузеру Chrome. А аналогичный программный продукт от компании Apple – браузер Safari, поддержкой WebRTC обладает, однако при разработке решений для него рекомендуется проводить обязательную проверку совместимости

То, для какого варианта организации связи с использованием технологии WebRTC будет реализовываться веб-сервис или приложение, оказывает непосредственное влияние на архитектуру данных программных решений, а также на используемые протоколы связи. Технология WebRTC может быть реализована с применением нескольких различных протоколов, различия в функциональном назначении между которыми довольно существенны: протокол MPEG-DASH/HLS используется при реализации сервисов потокового вещания по запросу, протокол WebRTC применяется при реализации обмена видео-потоком с низкой задержкой сигнала для связи между двумя или более браузерами, а протокол RTMP идентичен WebRTC с той разницей, что он заточен в большей степени на качественную передачу больших потоков информации, по причине чего он чаще применяется для реализации прямых трансляций.

Так как тема данной статьи напрямую связана с организацией видеосвязи в браузере, то протокол WebRTC представляет наибольший интерес для рассмотрения. Именно эта технология более всего подходит для видеосвязи в браузерах, и следует рассмотреть, с какими кодеками она работает. Так, для передачи аудио-потока используются кодеки Opus, G.711, G.722, PCMU и PCMA. Базовым кодеком передачи аудио является кодек Opus, при реализации приложений голосовой телефонии применяют кодеки G.711 и G.722, а для обеспечения поддержки устаревших приложений применяют кодеки PCMU и PCMA. Аналогичная ситуация и с кодеками для видеопотока. Базовым кодеком выступает VP8, обеспечивающий возможность динамического конфигурирования качества видео в зависимости от ширины канала связи. Помимо него могут быть использованы кодеки VP9, H.264 и H.265, но их использование варьируется в зависимости от используемого браузера или устройства, и по этой причине рекомендуется применять в работе только те кодеки, которые являются базовыми.

С учетом простоты реализации приложений и сервисов с применением WebRTC, сегодня их реализация чаще всего происходит на основании трех различных направлений:

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

- веб-соединение, при котором медиапоток с одного браузера передается множеству браузеров, с которыми было установлено соединение. Яркий пример данного рода связи – трансляции видео, видеоуроки, стримы и т.п.

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

Роль технологии WebRTC можно описать довольно просто – между двумя клиентами устанавливается соединение, при этом сервер используется только на этапе подключения пользователей (как это показано на рисунке 1). На всех этапах своей работы механизмы данной технологии решают очень много вопросов, связанных с разрывом соединения или потери данных, работы со скрытыми за NAT IP-адресами, настройки потока мультимедиа в соответствии с пропускной возможностью канала связи и т.п. Фактически, при реализации собственного приложения, разработчикам требуется реализовать процедуры вызова, начала и завершения соединения между абонентами, все остальное выполняют внутренние API

Рисунок 1 - Принцип функционирования технологии WebRTC

DOI:10.23670/IRJ.2024.140.12.1

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

- первый шаг – пользователь открывает страницу сервиса, который позволит ему организовать связь посредством WebRTC;

- второй шаг – в браузере появляется запрос на предоставление доступа к веб-камере и микрофону, на который пользователь должен ответить положительно;

- третий шаг – генерация пакета инициации соединения протоколом описания сеанса в браузере вызывающего абонента. Данный пакет представляет собой текстовый файл с описанием информации об устанавливаемом соединении;

- четвертый шаг – происходит передача сгенерированного пакета вызываемому абоненту, используя при этом сигнальный сервер и протокол WebSocket. При получении данного пакета в браузере принимаемого абонента выполняется генерация аналогичного пакета, и происходит его возврат вызываемому абоненту;

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

- шестой шаг – непосредственно установление сетевого соединения, при работе которого в рамках функционирования механизмов технологии выполняется вызов события «onicecandidate», позволяющего контролировать состояние текущего подключения

Перечисленные шаги реализуются технологией WebRTC, а для обеспечения её работы разработчиками используются три API JavaScript:

- MediaStream (getUserMedia) – представляет собой интерфейс для передачи медиапотока;

- RTCPeerConnection – метод формирования связи между браузерами связывающихся абонентов. Он выполняет обработку всех сообщений с предложениями начала связи и ответы на эти сообщения, содержащие сформированные параметры начала сеанса;

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

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

Одним из наиболее распространенных решений для реализации видеосвязи посредством браузера сегодня является платформа Zoom. Она представлена и приложением, и набором бесплатных программных интерфейсов, которые могут быть использованы для реализации собственных программных решений. Однако данный сервис был отмечен в нескольких исследованиях как обладающий низким уровнем защиты соединения, что ставит вопрос о целесообразности его использовании при реализации решений корпоративного уровня. Далее по уровню популярности следует сервис Ant Media Server, который по аналогии с платформой Zoom предоставляет инструментарий для реализации связи в аудио и видео формате в режиме реального времени. Это решение поддерживает большое число протоколов, предоставляет гибкое масштабирование реализуемых решений и может быть использовано в облачном варианте, либо установлено на локальный сервер. Платформа Kurento – это еще один сервис для реализации связи посредством браузера. Особенность этой платформы – высокий уровень контроля процедуры направления мультимедиапотока, что позволяет в дальнейшем более детально с ним работать, например в случае организации работы технологии распознавания лиц и подобных её решений. Следующий пример Open-Source решения для реализации WebRTC – это платформа Open-EasyRTC. Она обладает всеми возможностями WebRTC, имеет большую библиотеку примеров реализации код для HTML5 и JavaScript, и довольно большой набор серверных и клиентских API. Еще одна бесплатная платформа – openVidu – распространяется по лицензии Apache License v2, имеет гибкую поддержку шифрования передаваемого мультимедиа потока, и может быть легко интегрирована в различные платформы JavaScript. Разработчикам предоставляется удобный набор программных интерфейсов REST. Протокол организации процедур связи между браузерами на основании сквозного шифрования SaltyRTC преимущественно используется при реализации зашифрованных приложений. Удобством для начала его использования на практике можно назвать большое число документации и примеров для разработчиков.

Помимо готовых сервисов и протоколов реализация прямой видеосвязи может быть выполнена с использованием специализированных веб-фреймворков или библиотек. Одним из распространенных решений является фреймворк Express, который может похвастаться незначительным объемом, но при этом существенным функционалом. При его применении разработчик получает возможность реализации как веб-приложений, так и мобильных приложений для реализации прямой видеосвязи на основе WebRTC. Он имеет собственные API, посредством которых разработчики могут работать как со служебными методами HTTP, так и с функционалом Node.js. Еще одним примером является проект Temasys, основанный на библиотеке SkylinkJS. Он имеет большой объем документации, согласно которой разработчики могут работать с различными технологиями – Swift, Objective-C, React, C++, Java и Android. Следующий пример – JSCommunicator – решение на основе языка JavaScript, которое использует HTML и CSS. Функционирует оно на основании протокола SIP и технологии WebSockets, и обладает высоким уровнем совместимости как с различными веб-приложениями, так и платформами систем управления контентом. Последним примером инструментария для работы с WebRTC будет представлена библиотека PeerJS, представляющая собой довольно простой API. Работает данная библиотека на основе JavaScript, обладает совместимостью с другими фреймворками, основанными на языке программирования JavaScript

После того как были рассмотрены готовые бесплатные решения для WebRTC, следует описать процесс реализации собственного приложения для видеосвязи в режиме реального времени с использованием open-source инструментов. Для этого в первую очередь следует произвести установку данного решения. Так как речь идет о бесплатных решениях, то в качестве серверной платформы будем рассматривать Linux, например, Ubuntu Server.

Установка любого сервера происходит в несколько этапов. Сначала необходимо установить среду выполнения приложения сервера. В данном примере это будет среда выполнения JavaScript – Node.js. Web-сервер сигналинга будет реализован с использованием фреймворка Express. Пример программного кода для реализации сервера сигналинга WebRTC:

Рисунок 2 - Пример программного кода для реализации сервера сигналинга WebRTC

DOI:10.23670/IRJ.2024.140.12.2

Рассмотрим процесс реализации клиента WebRTC. Сначала устанавливается соединение с сервером сигналинга через WebSocket. После чего добавляются обработчики сообщений с сервера для корректной установки соединения между абонентами. Ниже приведен пример реализации клиентского кода для осуществления видеозвонка в браузере.

Рисунок 3 - Процесс реализации клиента WebRTC 1

DOI:10.23670/IRJ.2024.140.12.3

Рисунок 4 - Процесс реализации клиента WebRTC 2

DOI:10.23670/IRJ.2024.140.12.4

Рисунок 5 - Процесс реализации клиента WebRTC 3

DOI:10.23670/IRJ.2024.140.12.5

Рисунок 6 - Процесс реализации клиента WebRTC 4

DOI:10.23670/IRJ.2024.140.12.6

Для получения доступа к камере и микрофону пользователя в данном коде используется метод getUserMedia, посредством которого происходит реализация объекта RTCPeerConnection. После его создания будет добавлен локальный поток медиа-информации с обязательным соединением и созданием оффера для начала соединения. Затем начинается воспроизведение собственного потока на открытой странице и происходит переход в режим ожидания соединения с другими абонентами. Для того чтобы обнаружить новых кандидатов ICE и обработать потоки медиа от удаленных клиентов, в коде размещены обработчики соответствующих событий. После того как соединение будет установлено, на странице дополнительно будет воспроизведён поток мультимедиа от собеседника.

Последним примером будет приведена реализация простейшего клиента WebRTC с использованием фреймворка EasyRTC:

Рисунок 7 - Реализация простейшего клиента WebRTC с использованием фреймворка EasyRTC

DOI:10.23670/IRJ.2024.140.12.7

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

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