Иван Башлаков
15.06.2020
2268

Технология WebRTC для разработки VoIP Web приложений

WebRTC является технологией, которая позволяет разработчикам создавать приложения для осуществления аудио- и видео- звонков, непосредственно из браузера, без использования каких-либо дополнительных средств. Краткий обзор технологии WebRTC Аббревиатура WebRTC расшифровывается как Web Real Time Communication — веб коммуникации в режиме реального времени. WebRTC является стандартом передачи голоса, видео, а также данных в браузерах, использую peer2peer-соединение между […]

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

Краткий обзор технологии WebRTC

Аббревиатура WebRTC расшифровывается как Web Real Time Communication — веб коммуникации в режиме реального времени. WebRTC является стандартом передачи голоса, видео, а также данных в браузерах, использую peer2peer-соединение между клиентами. Такой высокоуровневый подход позволяет обеспечить абсолютную кроссплатформенность для приложений, полную независимость, как от аппаратных, так и средств операционной системы, что открывает большие границы в разработке VoIP-приложений. Для разработчиков данная технология доступна в виде библиотек JavaScript API. Проект WebRTC имеет открытый исходный код и поддерживается Google, Firefox, Apple и многими другими вендорами.

Стандарт WebRTC является продуктом совмещения двух различных технологий: обеспечения взаимодействия web-браузера с аппаратными мультимедийными средствами компьютера (камера, микрофон, средства захвата экрана) и создания пиринговой одноранговой сети (peer-to-peer), т.е. использование прямого обмена данными между браузерами, без использования сторонних серверов.

Структура уровней взаимодействия WebRTC

WebRTC основан на трех программных интерфейсах, реализующих его функциональность: для использования камер и микрофонов используется интерфейс navigator.mediaDevices.getUserMedia(). Для трансляции экрана используется navigator.mediaDevices.getDisplayMedia(). Создание peer-to-peer соединения управляется интерфейсом RTCPeerConnection.

WebRTC поддерживает аудио кодеки G.711 и Opus, а также видеокодеки H.264 и VP8, что позволяет обеспечить высокое качество связи между абонентами.

Схема инфраструктуры WebRTC

О безопасности WebRTC

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

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

Помимо DTLS, WebRTC может использовать SRTP, который также обеспечивает безопасную передачу данных по шифрованным каналам связи.

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

Потоки передачи данных в WebRTC

Поддержка WebRTC

Для функционирования WebRTC в браузере необходима поддержка таких технологий, как JavaScript и HTML5. Эти инструменты позволяют создавать интерфейс для VoIP-приложений и использовать библиотеки интерфейсов (API) WebRTC. Непосредственная поддержка самого механизма WebRTC заявлена в браузерах Google Chrome начиная с версии 23, Firefox с версии 38, Opera с версии 12 и в Safari с версии 11. Браузеры компании Microsoft открытую реализацию WebRTC не поддерживают, Edge использует собственную реализацию под названием Object Real Time Communications (ORTC), а для IE с версии 9+ существует плагин webrtc4all, обеспечивающий поддержку необходимых кодеков и библиотек.

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

Взаимодействие клиентов WebRTC

Взаимодействие WebRTC и Asterisk

Asterisk поддерживает WebRTC начиная с версии 11. Был создан модуль res_http_websocket, который позволяет разработчикам JavaScript-приложений взаимодействовать с Asterisk. В модуль chan_sip была добавлена ​​поддержка WebSocket как транспорта, чтобы SIP можно было использовать в качестве протокола сигнализации. В модуль res_rtp_asterisk была добавлена ​​поддержка ICE, STUN и TURN, чтобы позволить клиентам, использующим сетевую инфраструктуру с NAT избежать проблем с трансляцией адресов.

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

Еще одним необходимым условием для взаимодействия Asterisk с WebRTC-абонентами является наличие STUN-сервера, независимо от того, используют ваши абоненты NAT или нет. STUN необходим для корректной обработки заголовков SDP-пакетов, которые устанавливают сессии между абонентами и содержат в себя их ip-адреса.

Протоколы общения клиентов WebRTC

Также необходимо обеспечить прием websocket-соединений от абонентов, использующих WebRTC. Сделать это можно, используя встроенный веб-сервер Asterisk.

Здесь описаны лишь теоретические аспекты взаимодействия Asterisk с WebRTC. Подробную инструкцию по конфигурированию Asterisk для работы с абонентами WebRTC Вы можете найти на нашем сайте ознакомившись с постом «Настройка WebRTC в Asterisk 13».

Существуют альтернативные методы поддержки абонентов WebRTC в Asterisk, такие как WebRTC-шлюзы. Примером может служить проект webrtc2sip. Это может понадобиться, если по каким-то причинам вы используете версии Asterisk ниже 11. Каких-либо специальных настроек Asterisk для использования webrtc2sip не требуется.

Особенности реализации технологии WebRTC

Для создания подключения peer-2-peer между двумя браузерами используется класс RTCPeerConnection:

initConnection = (id:string):RTCPeerConnection => {
	const peerConnection = new RTCPeerConnection({
iceServers: [
	{urls: ‘stun:4.l.google.com:19302’},
	{
		urls: ’turn:turn.interpals.net:3478’,
		credential: ‘pass’,
		username: ‘username’
	 },
		]
});
}

В данном контейнере используются механизмы STUN и TURN для определения реальных ip-адресов абонентов и преодоления инфраструктуры NAT

Сетевая модель взаимодействия клиентов (1)

После создания подключения в него добавляются медиа-потоки, например, видео с веб-камеры:

	RTCPeerConnection.prototype.addStream=function(stream){
stream.GetTracks().ForEach(Track=>This.addTrack(track,stream));
};

Интерфейс GetUserMedia позволяет задавать различные параметры для передаваемого медиа-потока:

window.navigator.getUserMedia(
{
	audio:true;
	video:{
		width:1024,
		height: 720}
},
this.getUSerMediaSucces;
this.getUSerMediaFail;
);

Для общения двух абонентов необходимо создать ICE-сервер, который будет обрабатывать события создания, установления и разрыва связи между пирами:

	peer.Connection.onicecandidat=(event)=>{
if (event.candidate) {
this.props.wsRTCSignal(
‘RTC_ICE_CANDIDATE’,
this.props.call.room,
this.clientID,
id,
event.candidate
);
}
};

Соответственно, для сервера включаем обработку указанных событий (OFFER,ANSWER,CANDIDATE):

Event.Emmiter.WS.on(
‘RTC_OFFER’,
this.filterMessage(This.onRTCOffer)
);
Event.Emmiter.WS.on(
‘RTC_ANSWER’,
this.filterMessage(This.onRTCAnswer)
);
Event.Emmiter.WS.on(
‘RTC_ICE_CANDIDATE’,
this.filterMessage(This.onRTCIceCandidate)
);

            Со стороны вызывающего (создающего соединение) абонента последовательность создания методов выглядит следующим образом:

  1. createOffer(offer) создание события звонка
  2. setLocalDescropton(offer) установка локального события
  3. SIGNALING RTC_OFFER передача события звонка серверу

            Со стороны принимающего абонента используются следующая последовательность методов:

  1. setRemoteDescription(offer) принятие события от вызывающего
  2. createAnswer(answer) создание события ответа
  3. setLocalAnswer(answer) установка локального события
  4. SIGNALING RTC_ANSWER передача события серверу
Схема создания сокетов между абонентами
Подписаться
Уведомление о
guest
1 Комментарий
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
#BadeyS
#BadeyS
27.08.2020 00:16

Очень подробно и понятно.
Но во многом ещё нужно развиваться.

Доброго времени суток вам.

Остались вопросы?

Я - Першин Артём, менеджер компании Voxlink. Хотите уточнить детали или готовы оставить заявку? Укажите номер телефона, я перезвоню в течение 3-х секунд.

VoIP оборудование

ближайшие курсы

ближайшие Вебинары

ONLINE

10 доводов в пользу Asterisk

Распространяется бесплатно.

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

Безопасен в использовании.

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

Надежен в эксплуатации.

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

Гибкий в настройке.

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

Имеет огромный функционал.

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

Интегрируется с любыми системами.

То, что Asterisk не умеет сам, он позволяет реализовать за счет интеграции. Это могут быть интеграции с коммерческими телефонными станциями, CRM, ERP системами, биллингом, сервисами колл-трекинга, колл-бэка и модулями статистики и аналитики.

Позволяет телефонизировать офис за считанные часы.

В нашей практике были проекты, реализованные за один рабочий день. Это значит, что утром к нам обращался клиент, а уже через несколько часов он пользовался новой IP-АТС. Безусловно, такая скорость редкость, ведь АТС – инструмент зарабатывания денег для многих компаний и спешка во внедрении не уместна. Но в случае острой необходимости Asterisk готов к быстрому старту.

Отличная масштабируемость.

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

Повышает управляемость бизнеса.

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

Снижает расходы на связь.

Связь между внутренними абонентами IP-АТС бесплатна всегда, независимо от их географического расположения. Также к Asterisk можно подключить любых операторов телефонии, в том числе GSM сим-карты и настроить маршрутизацию вызовов по наиболее выгодному тарифу. Всё это позволяет экономить с первых минут пользования станцией.