Настройка оборудования и программного обеспечения

Webrtc голосовой чат. Технология WebRTC: аудио- и видеочат в браузере

WebRTC – это API, предоставляемое браузером и позволяющее организовать P2P соединение и передачу данных напрямую между браузерами. В Интернете довольно много руководств по написанию собственного видео-чата при помощи WebRTC. Например, вот статья на Хабре. Однако, все они ограничиваются соединением двух клиентов. В этой статье я постараюсь рассказать о том, как при помощи WebRTC организовать подключение и обмен сообщениями между тремя и более пользователями.

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

  • При открытии страницы проверяем наличие ID комнаты в location.hash
  • Если ID комнаты не указано, генерируем новый
  • Отправляем signalling server"у сообщение о том, что мы хотим присоединиться к указанной комнате
  • Signalling server разсылает остальным клиентам в этой комнате оповещение о новом пользователе
  • Клиенты, уже находящиеся к комнате, отправляют новичку SDP offer
  • Новичок отвечает на offer"ы
  • 0. Signalling server

    Как известно, хоть WebRTC и предоставляет возможность P2P соединения между браузерами, для его работы всё равно требуется дополнительный транспорт для обмена сервисными сообщениями. В этом примере в качестве такого транспорта выступает WebSocket сервер, написанный на Node.JS с использованием socket.io:

    Var socket_io = require("socket.io"); module.exports = function (server) { var users = {}; var io = socket_io(server); io.on("connection", function(socket) { // Желание нового пользователя присоединиться к комнате socket.on("room", function(message) { var json = JSON.parse(message); // Добавляем сокет в список пользователей users = socket; if (socket.room !== undefined) { // Если сокет уже находится в какой-то комнате, выходим из нее socket.leave(socket.room); } // Входим в запрошенную комнату socket.room = json.room; socket.join(socket.room); socket.user_id = json.id; // Отправялем остальным клиентам в этой комнате сообщение о присоединении нового участника socket.broadcast.to(socket.room).emit("new", json.id); }); // Сообщение, связанное с WebRTC (SDP offer, SDP answer или ICE candidate) socket.on("webrtc", function(message) { var json = JSON.parse(message); if (json.to !== undefined && users !== undefined) { // Если в сообщении указан получатель и этот получатель известен серверу, отправляем сообщение только ему... users.emit("webrtc", message); } else { // ...иначе считаем сообщение широковещательным socket.broadcast.to(socket.room).emit("webrtc", message); } }); // Кто-то отсоединился socket.on("disconnect", function() { // При отсоединении клиента, оповещаем об этом остальных socket.broadcast.to(socket.room).emit("leave", socket.user_id); delete users; }); }); };

    1. index.html

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

    WebRTC Chat Demo Connected to 0 peers
    Send

    2. main.js 2.0. Получение ссылок на элементы страницы и интерфейсы WebRTC var chatlog = document.getElementById("chatlog"); var message = document.getElementById("message"); var connection_num = document.getElementById("connection_num"); var room_link = document.getElementById("room_link");

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

    Var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription; var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;

    2.1. Определение ID комнаты

    Тут нам понадобится функция, для генерации уникального идентификатора комнаты и пользователя. Будем использовать для этих целей UUID.

    Function uuid () { var s4 = function() { return Math.floor(Math.random() * 0x10000).toString(16); }; return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4(); }

    Теперь попробуем вытащить идентификатор комнаты из адреса. Если такового не задано, сгенерируем новый. Выведем на страницу ссылку на текущую комнату, и, за одно, сгенерируем идентификатор текущего пользователя.

    Var ROOM = location.hash.substr(1); if (!ROOM) { ROOM = uuid(); } room_link.innerHTML = "Link to the room"; var ME = uuid();

    2.2. WebSocket

    Сразу при открытии страницы подключимся к нашему signalling server"у, отправим запрос на вход в комнату и укажем обработчики сообщений.

    // Указываем, что при закрытии сообщения нужно отправить серверу оповещение об этом var socket = io.connect("", {"sync disconnect on unload": true}); socket.on("webrtc", socketReceived); socket.on("new", socketNewPeer); // Сразу отправляем запрос на вход в комнату socket.emit("room", JSON.stringify({id: ME, room: ROOM})); // Вспомогательная функция для отправки адресных сообщений, связанных с WebRTC function sendViaSocket(type, message, to) { socket.emit("webrtc", JSON.stringify({id: ME, to: to, type: type, data: message})); }

    2.3. Настройки PeerConnection

    Большинство провайдеров предоставляем подключение к Интернету через NAT. Из-за этого прямое подключение становится не таким уж тривиальным делом. При создании соединения нам нужно указать список STUN и TURN серверов, которые браузер будет пытаться использовать для обхода NAT. Так же укажем пару дополнительных опций для подключения.

    Var server = { iceServers: [ {url: "stun:23.21.150.121"}, {url: "stun:stun.l.google.com:19302"}, {url: "turn:numb.viagenie.ca", credential: "your password goes here", username: "[email protected]"} ] }; var options = { optional: [ {DtlsSrtpKeyAgreement: true}, // требуется для соединения между Chrome и Firefox {RtpDataChannels: true} // требуется в Firefox для использования DataChannels API ] }

    2.4. Подключение нового пользователя

    Когда в комнату добавляется новый пир, сервер отправляет нам сообщение new . Согласно обработчикам сообщений, указанным выше, вызовется функция socketNewPeer .

    Var peers = {}; function socketNewPeer(data) { peers = { candidateCache: }; // Создаем новое подключение var pc = new PeerConnection(server, options); // Инициализирууем его initConnection(pc, data, "offer"); // Сохраняем пира в списке пиров peers.connection = pc; // Создаем DataChannel по которому и будет происходить обмен сообщениями var channel = pc.createDataChannel("mychannel", {}); channel.owner = data; peers.channel = channel; // Устанавливаем обработчики событий канала bindEvents(channel); // Создаем SDP offer pc.createOffer(function(offer) { pc.setLocalDescription(offer); }); } function initConnection(pc, id, sdpType) { pc.onicecandidate = function (event) { if (event.candidate) { // При обнаружении нового ICE кандидата добавляем его в список для дальнейшей отправки peers.candidateCache.push(event.candidate); } else { // Когда обнаружение кандидатов завершено, обработчик будет вызван еще раз, но без кандидата // В этом случае мы отправялем пиру сначала SDP offer или SDP answer (в зависимости от параметра функции)... sendViaSocket(sdpType, pc.localDescription, id); // ...а затем все найденные ранее ICE кандидаты for (var i = 0; i < peers.candidateCache.length; i++) { sendViaSocket("candidate", peers.candidateCache[i], id); } } } pc.oniceconnectionstatechange = function (event) { if (pc.iceConnectionState == "disconnected") { connection_num.innerText = parseInt(connection_num.innerText) - 1; delete peers; } } } function bindEvents (channel) { channel.onopen = function () { connection_num.innerText = parseInt(connection_num.innerText) + 1; }; channel.onmessage = function (e) { chatlog.innerHTML += "Peer says: " + e.data + ""; }; }

    2.5. SDP offer, SDP answer, ICE candidate

    При получении одного из этих сообщений вызываем обработчик соответствующего сообщения.

    Function socketReceived(data) { var json = JSON.parse(data); switch (json.type) { case "candidate": remoteCandidateReceived(json.id, json.data); break; case "offer": remoteOfferReceived(json.id, json.data); break; case "answer": remoteAnswerReceived(json.id, json.data); break; } }

    2.5.0 SDP offer function remoteOfferReceived(id, data) { createConnection(id); var pc = peers.connection; pc.setRemoteDescription(new SessionDescription(data)); pc.createAnswer(function(answer) { pc.setLocalDescription(answer); }); } function createConnection(id) { if (peers === undefined) { peers = { candidateCache: }; var pc = new PeerConnection(server, options); initConnection(pc, id, "answer"); peers.connection = pc; pc.ondatachannel = function(e) { peers.channel = e.channel; peers.channel.owner = id; bindEvents(peers.channel); } } } 2.5.1 SDP answer function remoteAnswerReceived(id, data) { var pc = peers.connection; pc.setRemoteDescription(new SessionDescription(data)); } 2.5.2 ICE candidate function remoteCandidateReceived(id, data) { createConnection(id); var pc = peers.connection; pc.addIceCandidate(new IceCandidate(data)); } 2.6. Отправка сообщения

    При нажатии на кнопку Send вызывается функция sendMessage . Всё, что она делает, это проходится по списку пиров, и пытается отправить всем указанное сообщение.

    WebRTC (Web Real-Time Communications) - это технология, которая позволяет Web-приложениям и сайтам захватывать и выборочно передавать аудио и/или видео медиа-потоки, а также обмениваться произвольными данными между браузерами, без обязательного использования посредников. Набор стандартов, которые включает в себя технология WebRTC, позволяет обмениваться данными и проводить пиринговые телеконференции, без необходимости пользователю устанавливать плагины или любое другое стороннее программное обеспечение.

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

    Совместимость

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

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

    Для дальнейшего изучения библиотеки Adapter.js, смотрим .

    Понятия и использование WebRTC

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

    Соединение между двумя узлами представлено как объект интерфейса RTCPeerConnection . Как только соединение установлено и открыто, используя объект RTCPeerConnection , медиапотоки ( MediaStream s) и/или каналы данных ( RTCDataChannel s) могут быть добавлены в соединение.

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

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

    more details and links to relevant guides and tutorials needed

    WebRTC интерфейсы

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

    Настройка соединения и управление

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

    RTCPeerConnection Представляет WebRTC соединение между локальным компьютером и удаленным узлом. Используется для обработки успешной передачи данных между двумя узлами. RTCSessionDescription Представляет параметры сессии. Каждый RTCSessionDescription содержит описания типа , показывающего какую часть (предложение/ответ) процесса переговоров он описывает, и SDP -дескриптор сессии. RTCIceCandidate Представляет собой кандидата сервера установки интернет соединения (ICE) для установленовки соединения RTCPeerConnection . RTCIceTransport Представляет информацию о средстве подключения к Интернету (ICE). RTCPeerConnectionIceEvent Представляет события, которые происходят в отношении кандидатов ICE, обычно RTCPeerConnection . Один тип передается данному объекту события: icecandidate . RTCRtpSender Управляет кродированием и передачей данных через объект типа MediaStreamTrack для объекта типа RTCPeerConnection . RTCRtpReceiver Управляет получением и декодированием данных через объект типа MediaStreamTrack для объекта типа RTCPeerConnection . RTCTrackEvent Указывает на то, что новый входящий объект типа MediaStreamTrack был создан и объект типа RTCRtpReceiver был добавлен в объект RTCPeerConnection . RTCCertificate Представляет сертификат, который использует объект RTCPeerConnection . RTCDataChannel Представляет двунапрвленный канал данных между двумя узлами соединения. RTCDataChannelEvent Представляет события, которые возникают при присоединении объекта типа RTCDataChannel к объекту типа RTCPeerConnection datachannel . RTCDTMFSender Управляет кодированием и передачей двутональной мультичастотной (DTMF) сигнализацией для объекта типа RTCPeerConnection . RTCDTMFToneChangeEvent Указывает на входящее событие изменение тона двутоновой мультичастотной сигнализации (DTMF). Это событие не всплывает (если не указано иначе) и не является отменяемым (если не указано иначе). RTCStatsReport Ассинхронно сообщает статус для переданного объекта типа MediaStreamTrack . RTCIdentityProviderRegistrar Регистрирует провайдер идентификации (idP). RTCIdentityProvider Активирует возможность браузеру запросить создание или проверку обяъвления идентификации. RTCIdentityAssertion Представляет идентификатор удаленного узла текущего соединения. Если узел еще не установлен и подтвержден, ссылка на интерфейс вернет null . После установки не изменяется. RTCIdentityEvent Представляет объект события объявление идентификатора провайдером идентификации (idP). Событие объекта типа RTCPeerConnection . Один тип передается этому событию identityresult . RTCIdentityErrorEvent Представляет объект события ошибки, связанной с провайдером идентификации (idP). Событие объекта типа RTCPeerConnection . Два типа ошибки передаются этому событию: idpassertionerror и idpvalidationerror . Руководства Обзор архитектуры WebRTC Под API, который применяют разработчики, чтобы создавать и использовать WebRTC, расположен набор сетевых протоколов и стандартов соединения. Этот обзор - витрина этих стандартов. WebRTC позволяет вам организовать соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию в браузере. В этой статье мы взглянем на жизнь WebRTC-сессии, начиная с установки соединения и пройдем весь путь до его завершения, когда оно больше не нужно. Обзор WebRTC API WebRTC состоит из нескольких взаимосвязанных программных интерфейсов (API) и протоколов, которые работают вместе, чтобы обеспечить поддержку обмена данными и медиа-потоками между двумя и более узлами. В этой статье представлен краткий обзор каждого из этих API и какую цель он преследует. Основы WebRTC Эта статья проведет вас через создание кросс-браузерного RTC-приложения. К концу этой статьи вы должны иметь работающий дата- и медиа-канал, работающий в режиме точка-точка. Протоколы WebRTC В этой статье представлены протоколы, в дополнение к которым создан API WebRTC. Это руководство описывает как вы можете использовать соединение узел-узел и связанный

    Преамбула. P2P видеочат на базе WebRTC - это альтернатива Skype и другим средствам связи. Основными элементами p2p видеочата на базе WebRTC является браузер и контактный сервер. P2P видеочаты - это пиринговые видеочаты, в которых сервер не принимает участия в передаче информационных потоков. Информация передается непосредственно между браузерами пользователей (пирингами) без каких-либо дополнительных программ. Кроме браузеров в p2p видеочатах используются контактные серверы, которые предназначены для регистрации пользователей, хранения данных о них и обеспечения коммутации между пользователями. Браузеры, которые поддерживают новейшие технологии WebRTC и HTML5, обеспечивают передачу мгновенных текстовых сообщений и файлов, а также обеспечивают голосовое и видео общение в IP сетях.

    Итак, чаты, веб чаты, голосовые и видеочаты в веб интерфейсе, IMS, VoIP - это сервисы, которые обеспечивают коммуникации в режиме онлайн через составные сети с пакетной коммутацией. Как правило, коммуникационные сервисы требуют или установки клиентских приложений на пользовательские устройства (ПК, смартфоны и т.д.), или установки плагинов и расширений в браузеры. Сервисы имеют свои коммуникационные сети, большинство из которых построены по архитектуре "клиент-сервер".

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

    Проблему интеграции коммуникационных услуг реального времени (чата, телефонии, видеоконференции), т.е. интеграцию каналов передачи голоса, видео, данных и доступ к ним с помощью одного приложения (браузера) можно решить в одноранговых или p2p видеочатах (пиринговых, point - to - point) на основе протокола WebRTC . По сути, браузер, поддерживающий WebRTC, становится единым интерфейсом для всех пользовательских устройств (ПК, смартфонов, айпадов, IP-телефонов, мобильных телефонов и т.д.), которые работают с коммуникационными сервисами.

    Именно WebRTC обеспечивает реализацию в браузере всех технологий, обеспечивающих коммуникации реального времени. Суть p2p видеочатов заключается в том, что мультимедийные и текстовые данные передаются непосредственно между браузерами пользователей (удаленными пирингами) без участия сервера и дополнительных программ. Таким образом, браузеры не только обеспечивают доступ практически ко всем информационным ресурсам Интернет, которые хранятся на серверах, но и становятся средством доступа ко всем коммуникационным услугам реального времени и к почтовым услугам (голосовой почте, электронной почте, SMS и т.д.)

    Серверы (контактные серверы) p2p видеочатов предназначены только для регистрации пользователей, хранения данных о пользователях и установки соединения (коммутации) между браузерами пользователей. Первые p2p видеочаты были реализованы с применением flash технологий. Flash p2p видеочаты применяются, например, в социальных сетях. Flash p2p видеочаты не обеспечивают высокое качество передачи мультимедийных данных. Кроме того, для вывода голоса и видеопотока из микрофона и видеокамеры в p2p flash видеочатах необходима установка flash плагина в веб-браузер.

    Но к телекоммуникационным сервисам нового поколения относятся веб-коммуникации , которые для общения через Интернет используют только браузеры и контактные серверы , поддерживающие протоколы WebRTC и спецификацию HTML5 . Любое пользовательское устройство (ПК, iPad, смартфоны и т.д.), снабженное таким браузером, может обеспечить качественные голосовые и видеозвонки, а также передачу мгновенных текстовых сообщений и файлов.

    Итак, новой технологией веб-коммуникаций (p2p чатов, видеочатов) является протокол WebRTC. WebRTC совместно с HTML5, CSS3 и JavaScript позволяют создавать различные веб приложения. WebRT предназначен для организации веб-коммуникаций (пиринговых сетей) в реальном времени по одноранговой архитектуре. P2P чаты на основе WebRTC обеспечивают передачу файлов, а также текстовые, голосовые и видео общения пользователей через Интернет с использованием только веб-браузеров без применения внешних дополнений и плагинов в браузере.

    В p2p чатах сервер используется только для установки p2p соединения между двумя браузерами. Для создания клиентской части p2p чата на базе протокола WebRTC используют HTML5, CSS3 и JavaScript. Клиентское приложение взаимодействует с браузерами через API WebRTC.

    WebRTC реализуются тремя JavaScript API:

    • RTCPeerConnection;
    • MediaStream (getUserMedia);
    • RTCDataChannel.

    Браузеры передают мультимедийные данные по протоколу SRTP, который работает поверх UDP. Поскольку NAT создает проблемы для браузеров (клиентов), находящихся за маршрутизаторами NAT, которые используют p2p соединения через сеть Интернет, то для обхода NAT трансляторов используется STUN. STUN - это клиент-серверный протокол, который работает поверх транспортного протокола UDP. В p2p чатах, как правило, применяется публичный STUN-сервер, а полученная с него информация используется для UDP-соединения между двумя браузерами, если они находятся за NAT.

    Примеры реализации WebRTC приложений (p2p чатов, голосовых и видео веб чатов):
    1. P2P видеочат Bistri (one-click video chat, p2p чат), выполненный на основе WebRTC, можно открыть на Bistri. Bistri работает в браузере без установки дополнительных программ и плагинов. Суть работы состоит в следующем: откройте p2p видеочат по указанной ссылке, после регистрации в открывшемся интерфейсе пригласите партнеров, затем из списка peer-клиентов выберите того партнера, который находится в сети и щелкните на кнопке "видеовызов".

    В результате MediaStream (getUserMedia) выполнит захват микрофона + веб-камеры, а сервер выполнит обмен сигнальными сообщениями с выбранным партнером. После обмена сигнальными сообщениями PeerConnection API создает каналы для передачи голосового и видео потоков. Кроме того, Bistri осуществляет передачу мгновенных текстовых сообщений и файлов. На рис. 1 представлен скриншот интерфейса p2p видеочата Bistri.


    Рис. 1. P2P видеочат Bistri

    2. Twelephone (p2p видеочат, p2p чат, SIP Twelephone) - это клиентское приложение построено на базе HTML5 и WebRTC, которое позволяет совершать голосовые и видеозвонки, а также осуществлять передачу мгновенных текстовых сообщений, т.е. Twelephone включает тестовый p2p чат, видеочат и SIP Twelephone. Необходимо отметить, что Twelephone поддерживает протокол SIP и теперь можно совершать и принимать голосовые и видеозвонки с SIP-телефонов, используя свой аккаунт в Twitter, как номер телефона. Кроме того, текстовые сообщения можно вводить голосом через микрофон, а программа распознавания голоса вводит текст в строку "Send a message".

    Twelephone - это веб телефония, которая функционирует на основе браузера Google Chrome, начиная с версии 25, без дополнительного программного обеспечения. Twelephone был разработан Chris Matthieu. Серверная часть Twelephone построена на основе Node.js. Сервер (контактный сервер) используется только для установки p2p соединения между двумя браузерами или WebRTC клиентами. Приложение Twelephone не имеет собственных средств авторизации, а ориентировано на подключение к аккаунту (учетной записи) в Twitter.

    На рис. 2 представлен скриншот интерфейса p2p видеочата Twelephone.



    Рис. 2. P2P Twelephone

    3. Групповой p2p видеочат Conversat.io построен на основе новейших технологий WebRTC и HTML5. Видеочат Conversat разработан на основе библиотеки SimpleWebRTC и предназначен для общения до 6 peer-клиентов в одной комнате (для общения укажите название общей комнаты для peer-клиентов в строке "Name the conversation"). P2P видеочат Conversat предоставляет коммуникационные услуги пользователям без регистрации на контактном сервере. На рис. 3 представлен скриншот интерфейса p2p видеочата Conversat.



    Рис. 3. Групповой P2P видеочат Conversat.io

    Для участия в P2P видеочатах на базе WebRTC необходимо чтобы у пользователей был установлен браузер, поддерживающий протокол WebRTC и спецификацию HTML5. В настоящее время браузеры Google Chrome, начиная с версии 25, и Mozilla Firefox Nightly поддерживают протокол WebRTC и спецификацию HTML5. WebRTC приложения по качеству передачи изображения и звука превосходят Flash приложения.

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

    Что такое WebRTC?

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

    Что нужно знать про WebRTC?

    Эволюция стандартов и технологий видеосвязи Сергей Юцайтис, Cisco, Видео+Конференция 2016 Как работает WebRTCНа стороне клиента
    • Пользователь открывает страницу, содержащую HTML5 тег .
    • Браузер запрашивает доступ к веб-камере и микрофону пользователя.
    • JavaScript код на странице пользователя контролирует параметры соединения (IP-адреса и порты сервера WebRTC или других WebRTC клиентов) для обхода NAT и Firewall.
    • При получении информации о собеседнике или о потоке со смикшированной на сервере конференцией, браузер начинает согласование используемых аудио и видео кодеков.
    • Начинается процесс кодирования и передача потоковых данных между WebRTC клиентами (в нашем случае, между браузером и сервером).
    На стороне WebRTC сервера

    Для обмена данными между двумя участниками видеосервер не требуется, но если нужно объединить в одной конференции несколько участников, сервер необходим.



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

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

    Преимущества стандарта
    • Не требуется установка ПО.
    • Очень высокое качество связи, благодаря:
      • Использованию современных видео (VP8, H.264) и аудиокодеков (Opus).
      • Автоматическое подстраивание качества потока под условия соединения.
      • Встроенная система эхо- и шумоподавления.
      • Автоматическая регулировка уровня чувствительности микрофонов участников (АРУ).
    • Высокий уровень безопасности: все соединения защищены и зашифрованы согласно протоколам TLS и SRTP.
    • Есть встроенный механизм захвата контента, например, рабочего стола.
    • Возможность реализации любого интерфейса управления на основе HTML5 и JavaScript.
    • Возможность интеграции интерфейса с любыми back-end системами с помощью WebSockets.
    • Проект с открытым исходным кодом — можно внедрить в свой продукт или сервис.
    • Настоящая кросс-платформенность: одно и то же WebRTC приложение будет одинаково хорошо работать на любой операционной системе, десктопной или мобильной, при условии, что браузер поддерживает WebRTC. Это значительно экономит ресурсы на разработку ПО.
    Недостатки стандарта
    • Для организации групповых аудио и видеоконференций требуется сервер ВКС, который бы микшировал видео и звук от участников, т.к. браузер не умеет синхронизировать несколько входящих потоков между собой.
    • Все WebRTC решения несовместимы между собой, т.к. стандарт описывает лишь способы передачи видео и звука, оставляя реализацию способов адресации абонентов, отслеживания их доступности, обмена сообщениями и файлами, планирования и прочего за вендором.
    • Другими словами вы не сможете позвонить из WebRTC приложения одного разработчика в WebRTC приложение другого разработчика.
    • Микширование групповых конференций требует больших вычислительных ресурсов, поэтому такой тип видеосвязи требует покупки платной подписки либо инвестирования в свою инфраструктуру, где на каждую конференцию требуется 1 физическое ядро современного процессора.
    Секреты WebRTC: как вендоры извлекают пользу из прорывной веб-технологии


    Цахи Левент-Леви, Bloggeek.me, Видео+Конференция 2015 WebRTC для рынка ВКСУвеличение числа ВКС-терминалов

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

    Использование в специализированных решениях

    Использование различных JavaScript библиотек и API облачных сервисов с поддержкой WebRTC позволяет легко добавить поддержку видеосвязи в любые веб-проекты. Ранее для передачи данных в реальном времени разработчикам приходилось изучать принципы работы протоколов и использовать наработки других компаний, которые чаще всего требовали дополнительного лицензирования, что увеличивало расходы. Уже сейчас WebRTC активно используется в сервисах вида “Позвонить с сайта”, “Онлайн-чат поддержки”, и т.п.

    Ex-пользователям Skype для Linux

    В 2014 году Microsoft объявила об прекращении поддержки проекта Skype для Linux, что вызвало большое раздражение у IT-специалистов. Технология WebRTC не привязана к операционной системе, а реализована на уровне браузера, т.е. Linux пользователи смогут увидеть в продуктах и сервисах на основе WebRTC полноценную замену Skype.

    Конкуренция с Flash

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

    Видеопрезентации WebRTC

    Дмитрий Одинцов, TrueConf, Видео+Конференция октябрь 2017

    Кодеки в WebRTCАудиокодеки

    Для сжатия аудио-трафика в WebRTC используются кодеки Opus и G.711.

    G.711 — самый старый голосовой кодек с высоким битрейтом (64 kbps), который чаще всего применяется в системах традиционной телефонии. Основным достоинством является минимальная вычислительная нагрузка из-за использования легких алгоритмов сжатия. Кодек отличается низким уровнем компрессии голосовых сигналов и не вносит дополнительной задержки звука во время общения между пользователями.

    G.711 поддерживается большим количеством устройств. Системы, в которых используется этот кодек, более легкие в применении, чем те, которые основаны на других аудиокодеках (G.723, G.726, G.728 и т.д.). По качеству G.711 получил оценку 4.2 в тестировании MOS (оценка в пределах 4-5 является самой высокой и означает хорошее качество, аналогичное качеству передачи голосового трафика в ISDN и даже выше).

    Opus — это кодек с низкой задержкой кодирования (от 2.5 мс до 60 мс), поддержкой переменного битрейта и высоким уровнем сжатия, что идеально подходит для передачи потокового аудиосигнала в сетях с переменной пропускной способностью. Opus - гибридное решение, сочетающее в себе лучшие характеристики кодеков SILK (компрессия голоса, устранение искажений человеческой речи) и CELT (кодирование аудиоданных). Кодек находится в свободном доступе, разработчикам, которые его используют, не нужно платить отчисления правообладателям. По сравнению с другими аудиокодеками, Opus, несомненно, выигрывает по множеству показателей. Он затмил довольно популярные кодеки с низким битрейтом, такие, как MP3, Vorbis, AAC LC. Opus восстанавливает наиболее приближенную к оригиналу “картину” звука, чем AMR-WB и Speex. За этим кодеком - будущее, именно поэтому создатели технологии WebRTC включили его в обязательный ряд поддерживаемых аудиостандартов.

    Видеокодеки

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

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

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

    Компании Google и Mozilla активно продвигают кодек VP8, а Microsoft, Apple и Cisco — H.264 (для обеспечения совместимости с традиционными системами видеоконференцсвязи). И вот тут возникакет очень большая проблема для разработчиков облачных WebRTC решений, ведь если в конференции все участники используют один браузер, то конференцию достаточно микшировать один раз одним кодеком, а если браузеры разные и среди них есть Safari / Edge, то конференцию придётся кодировать два раза разными кодеками, что в два раза повысит системные требования к медиа-серверу и как следствие, стоимость подписок на WebRTC сервисы.

    WebRTC API

    Технология WebRTC базируется на трех основных API:

    • (отвечает за принятие веб-браузером аудио и видеосигнала от камер или рабочего стола пользователя).
    • RTCPeerConnection (отвечает за соединение между браузерами для “обмена” полученными от камеры, микрофона и рабочего стола, медиаданными. Также в “обязанности” этого API входит обработка сигнала (очистка его от посторонних шумов, регулировка громкости микрофона) и контроль над используемыми аудио и видеокодеками).
    • RTCData Channel (обеспечивает двустороннюю передачу данных через установленное соединение).

    Прежде чем получить доступ к микрофону и камере пользователя, браузер запрашивает на это разрешение. В Google Chrome можно заранее настроить доступ в разделе “Настройки”, в Opera и Firefox выбор устройств осуществляется непосредственно в момент получения доступа, из выпадающего списка. Запрос на разрешение будет появляться всегда при использовании протокола HTTP и однократно, если использовать HTTPS:


    RTCPeerConnection . Каждый браузер, участвующий в WebRTC конференции, должен иметь доступ к данному объекту. Благодаря использованию RTCPeerConnection медиаданные от одного браузера к другому могут проходить даже через NAT и сетевые экраны. Для успешной передачи медиапотоков участники должны обменяться следующими данными с помощью транспорта, например, веб-сокетов:

    • участник-инициатор направляет второму участнику Offer-SDP (структура данных, с характеристиками медиапотока, которые он будет передавать);
    • второй участник формирует “ответ” — Answer-SDP и пересылает его инициатору;
    • затем между участниками организуется обмен ICE-кандидатами, если таковые обнаружены (если участники находятся за NAT или сетевыми экранами).

    После успешного завершения данного обмена между участниками организуется непосредственно передача медиапотоков (аудио и видео).

    RTCData Channel . Поддержка протокола Data Channel появилась в браузерах сравнительно недавно, поэтому данный API можно рассматривать исключительно в случаях использования WebRTC в браузерах Mozilla Firefox 22+ и Google Chrome 26+. С его помощью участники могут обмениваться текстовыми сообщениями в браузере.

    Подключение по WebRTCПоддерживаемые десктопные браузеры
    • Google Chrome (17+) и все браузеры на основе движка Chromium;
    • Mozilla FireFox (18+);
    • Opera (12+);
    • Safari (11+);
    Поддерживаемые мобильные браузеры для Android
    • Google Chrome (28+);
    • Mozilla Firefox (24+);
    • Opera Mobile (12+);
    • Safari (11+).
    WebRTC, Microsoft и Internet Explorer

    Очень долго Microsoft хранила молчание по поводу поддержки WebRTC в Internet Explorer и в своём новым браузере Edge. Ребята из Редмонда не очень любят давать в руки пользователей технологии, которые они не контролируют, вот такая вот политика. Но постепенно дело сдвинулось с мёртвой точки, т.к. игнорировать WebRTC далее было уже нельзя, и был анонсирован проект ORTC, производный от стандарта WebRTC.

    По словам разработчиков ORTC — это расширение стандарта WebRTC с улучшенным набором API на основе JavaScript и HTML5, что в переводе на обычный язык означает, что всё будет то же самое, только контролировать стандарт и его развитие будет Microsoft, а не Google. Набор кодеков расширен поддержкой H.264 и некоторым аудиокодеками серии G.7ХХ, используемыми в телефонии и аппаратных ВКС системах. Возможно появится встроенная поддержка RDP (для передачи контента) и обмена сообщениями. Кстати, пользователям Internet Explorer не повезло, поддержка ORTC будет только в Edge. Ну и, естественно, такой набор протоколов и кодеков малой кровью стыкуется со Skype for Business, что открывает для WebRTC ещё больше бизнес применений.

    Понравилась статья? Поделитесь с друзьями!
    Была ли эта статья полезной?
    Да
    Нет
    Спасибо, за Ваш отзыв!
    Что-то пошло не так и Ваш голос не был учтен.
    Спасибо. Ваше сообщение отправлено
    Нашли в тексте ошибку?
    Выделите её, нажмите Ctrl + Enter и мы всё исправим!