Methods of Implementing Video Communication in a Browser Using Open-source Tools
Methods of Implementing Video Communication in a Browser Using Open-source Tools
Abstract
Communication on the Internet has long ago reached a new level. Messengers and chats for exchanging short text messages with emoticons have been replaced by the possibility of making calls in audio and video format. And the merit here is primarily in the development of technology – it was the emergence of WebRTC technology that greatly simplified the implementation of this kind of communication for developers. The technology is free and easy to use, due to which it quickly became widespread. Within the framework of this article, a review of open-source solutions for real-time video communication through a web browser and WebRTC technology will be made. The practical significance of the research lies in the implementation of an in-house solution for real-time communication using WebRTC technology. The novelty of the study is that open-source solutions will be used for implementation, which will make the implemented communication system absolutely free to use.
1. Введение
В рамках данной статьи представлено рассмотрение базового набора open-source инструментов, позволяющих реализовать инструментарий видеосвязи посредством обычного веб-браузера. В работе
представлен обзор возможностей протокола WebRTC, а также варианты реализации связи с его использованием. В исследовании авторы предлагают разработку адаптивной платформы, основанной на использовании протокола WebRTC при организации взаимодействия участников образовательного процесса. В работе представлено описание бесплатного сервера Kurento, позволяющего более обширно использовать возможности WebRTC. В работах и приводится описание процесса разработки систем видеоконференцсвязи на основании протокола WebRTC. Представленные работы демонстрируют высокую актуальность рассмотрения вопросов использования протокола WebRTC при организации видеосвязи посредством браузера. Тем не менее стоит отметить малое количество исследований, демонстрирующих практическое применение open source инструментов при работе с данным протоколом.Реализация видеосвязи не является проблемой для разработчиков – достаточно взять один из распространенных браузеров, и сформировать для него веб-сервис с использованием стандарта WebRTC (англ. Web Real Time Communications – Веб коммуникации в режиме реального времени). Это открытый стандарт, который не требует особых вычислительных мощностей, и позволяет осуществлять обмен любой мультимедиа информацией между двумя и более пользователями, используя в качестве клиента веб-браузер. То есть пользователям не требуется установка дополнительных приложений или расширений для браузера – достаточно открыть страницу сервиса, разрешить доступ к камере и микрофону, и ожидать соединения либо осуществить вызов своего собеседника.
2. Технология WebRTC
Впервые WebRTC использовали в 2011 году, с целью реализации связи между двумя браузерам и передачи данных без каких-либо сторонних инструментов или сервисов. Обусловлено это было желанием компании Ericsson уйти от необходимости использования сторонних приложений или плагинов в составе веб-браузера при осуществлении связи. Ведь при наличии возможности мультимедийного взаимодействия между двумя браузерами упрощалась жизнь не только пользователей, но и разработчиков – не нужно было выполнять поддержку плагинов и следить за обновления браузеров, все это должно было работать на уровне функционала последнего
. За относительно небольшой промежуток времени WebRTC стала очень популярной технологией, и сегодня активно применяется в самых различных вариантах. В основном это, конечно же, передача потока видео и аудио на веб-платформах для видеосвязи, обучения, связи с удаленными камерами, либо это сервисы для передачи иной мультимедийной информации .Функционирование данной технологии основано на использовании собственного набора 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, но их использование варьируется в зависимости от используемого браузера или устройства, и по этой причине рекомендуется применять в работе только те кодеки, которые являются базовыми.
3. Функционирование технологии WebRTC
С учетом простоты реализации приложений и сервисов с применением WebRTC, сегодня их реализация чаще всего происходит на основании трех различных направлений:
- веб-соединение между браузерами двух пользователей, раньше подобное сетевое соединение часто называли «точка-точка»;
- веб-соединение, при котором медиапоток с одного браузера передается множеству браузеров, с которыми было установлено соединение. Яркий пример данного рода связи – трансляции видео, видеоуроки, стримы и т.п.
- веб-соединение с одновременным обменом медиа между несколькими браузерами. Чаще всего данные соединение используются в групповых звонках, видео-совещаниях и т.д.
Роль технологии WebRTC можно описать довольно просто – между двумя клиентами устанавливается соединение, при этом сервер используется только на этапе подключения пользователей (как это показано на рисунке 1). На всех этапах своей работы механизмы данной технологии решают очень много вопросов, связанных с разрывом соединения или потери данных, работы со скрытыми за NAT IP-адресами, настройки потока мультимедиа в соответствии с пропускной возможностью канала связи и т.п. Фактически, при реализации собственного приложения, разработчикам требуется реализовать процедуры вызова, начала и завершения соединения между абонентами, все остальное выполняют внутренние API
.
Рисунок 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.
4. Пример программного кода для реализации сервера сигналинга WebRTC
Установка любого сервера происходит в несколько этапов. Сначала необходимо установить среду выполнения приложения сервера. В данном примере это будет среда выполнения JavaScript – Node.js. Web-сервер сигналинга будет реализован с использованием фреймворка Express. Пример программного кода для реализации сервера сигналинга WebRTC:
Рисунок 2 - Пример программного кода для реализации сервера сигналинга WebRTC
Рисунок 3 - Процесс реализации клиента WebRTC 1
Рисунок 4 - Процесс реализации клиента WebRTC 2
Рисунок 5 - Процесс реализации клиента WebRTC 3
Рисунок 6 - Процесс реализации клиента WebRTC 4
Последним примером будет приведена реализация простейшего клиента WebRTC с использованием фреймворка EasyRTC:
Рисунок 7 - Реализация простейшего клиента WebRTC с использованием фреймворка EasyRTC
5. Заключение
Резюмируя, можно сделать вывод, что сегодня на рынке программного обеспечения существует большое количество open-source решений, которые могут быть использованы для реализации собственного приложения WebRTC. При этом их функционал и возможности ограничены лишь опытом специалиста, который будет работать с ними. Рассмотренные примеры продемонстрировали, что базовый набор функций при реализации клиента практически одинаков, а принципы их функционирования абсолютно схожи. Но тем не менее, при выборе конечного решения следует внимательно изучить документацию и возможности выбираемого фреймворка, а также оценивать, насколько он может подойти для реализуемого сервиса или приложения.