Web приложения с webrtc. Пиринговый видеочат на базе WebRTC

Цель этой статьи - на демонстрационном образце пирингового видеочата (p2p видеочата) ознакомиться с его структурой и принципом работы. Для этой цели воспользуемся многопользовательским демонстрационным образцом пирингового видеочата webrtc.io-demo. Его можно скачать по ссылке: https://github.com/webRTC/webrtc.io-demo/tree/master/site .

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

Итак, скачанный с GitHub демонстрационный образец пирингового видеочата, разместим на диске C персонального компьютера в созданной директории для нашего приложения "webrtc_demo".

Рис. 1

Как следует из структуры (рис.1) пиринговый видеочат состоит из клиентского script.js и серверного server.js скриптов, реализованных на языке программирования JavaScript. Скрипт (библиотека) webrtc.io.js (CLIENT) - обеспечивает организацию коммуникаций в реальном времени между браузерами по одноранговой схеме: "клиент-клиент", а webrtc.io.js (CLIENT) и webrtc.io.js (SERVER), используя протокол WebSocket, обеспечивают дуплексную связь между браузером и веб-сервером по архитектуре "клиент-сервер".

Скрипт webrtc.io.js (SERVER) входит в библиотеку webrtc.io и находится в директории node_modules\webrtc.io\lib. Интерфейс видеочата index.html реализован на HTML5 и CSS3. Содержимое файлов приложения webrtc_demo можно посмотреть одним из html-редакторов, например "Notepad++".

Принцип работы видеочата будем проверять в файловой системе ПК. Для запуска сервера (server.js) на ПК необходимо установить среду выполнения node.js. Node.js позволяет запускать JavaScript-код вне браузера. Скачать node.js можно по ссылке: http://nodejs.org/ (версия v0.10.13 на 15.07.13). На главной страничке сайта node.org щелкаем на кнопке download и переходим на http://nodejs.org/download/. Для пользователей windows сначала скачиваем win.installer (.msi), затем запускаем win.installer (.msi) на ПК, и устанавливаем nodejs и "npm package manager" в директорию Program Files.

Рис. 2

Таким образом, node.js состоит из среды разработки и выполнения JavaScript кода, а также из набора внутренних модулей, которые можно установить с помощью менеджера или диспетчера пакетов npm.

Для установки модулей необходимо в командной строке из директории приложения (например, "webrtc_demo") выполнить команду: npm install имя_модуля . В процессе установки модулей npm-менеджер создает папку node_modules в директории, из которой была выполнена установка. В процессе работы nodejs автоматически подключает модули из директории node_modules.

Итак, после установки node.js, открываем командную строку и обновим модуль express в папке node_modules директории webrtc_demo с помощью менеджера пакетов npm:

C:\webrtc_demo>npm install express

Модуль express - это веб-фреймворк для node.js или веб-платформа для разработки приложений. Чтобы иметь глобальный доступ к express, можно установить его таким образом: npm install -g express .

Затем обновим модуль webrtc.io:

C:\webrtc_demo>npm install webrtc.io

Затем в командной строке запускаем сервер: server.js:

C:\webrtc_demo>node server.js

Рис. 3

Все, сервер работает успешно (рисунок 3). Теперь с помощью веб-браузера можно обратиться к серверу по ip-адресу и загрузить веб-страницу index.html, с которой веб-браузер будет извлекать код клиентского скрипта - script.js и код скрипта webrtc.io.js, и выполнять их. Для работы пирингового видеочата (для установки соединения между двумя браузерами) необходимо с двух браузеров, поддерживающих webrtc, обратиться по ip-адресу к сигнальному серверу, работающему на node.js.

В результате откроется интерфейс клиентской части коммуникационного приложения (видеочата) с запросом на разрешение доступа к камере и микрофону (рис. 4).

Рис. 4

После щелчка на кнопке "Разрешить" подключаются камера и микрофон для мультимедийное общения. Кроме того, через интерфейс видеочата можно общаться текстовыми данными (рис. 5).

Рис. 5

Необходимо отметить, что . Сервер является сигнальным, и в основном предназначен для установки соединения между браузерами пользователей. Для работы серверного скрипта server.js, обеспечивающего WebRTC-сигнализацию, используется Node.js.

WebRTC (сокращенно от Web real-time communications) – это технология, которая позволяет передавать аудио и видео потоковые данные между браузерами и мобильными приложениями.

Разработка этой технологии составляет конкуренцию Skype. WebRTC можно использовать для организации видеоконференций напрямую в браузере. Проект имеет открытый исходный код и активно продвигается компанией Google и в частности командой разработки браузера Google Chrome.

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

Технология WebRTC поддерживается всеми популярными браузерами Mozilla Firefox, Opera, Google Chrome (и всеми браузерами на базе Google Chrome), а также мобильными приложениями на базе Android и iOS.

Опасность WebRTC

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

Анонимный VPN сервис решает данную проблему и скрывает реальный IP адрес. Максимум, что может быть обнаружено – это локальный IP адрес, присвоенный пользователю VPN сетью. Это не опасно, так как такие же локальные IP адреса будут показываться, если вы используете роутер для раздачи Интернета.

Если вы используете прокси, тогда WebRTC сможет определить ваш реальный IP адрес за прокси или IP адрес VPN сервера, если вы используете цепочку VPN + прокси.

WebRTC также определяет ваш реальный IP адрес при использовании сети Tor .

Самое лучшее решение – отключить технологию WebRTC, если вы этим не пользуетесь.

Как отключить WebRTC в браузерах

Быстрая навигация по этой странице.

Как отключить WebRTC в Mozilla Firefox

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

Ручная настройка

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

Чтобы отключить технологию WebRTC в Mozilla Firefox необходимо в адресной строке браузера ввести следующий текст и нажать кнопку Enter.

About:config

Нажмите, кнопку Я принимаю на себя риск.

Выполните следующее:

1. В поисковую строку введите текст и нажмите Enter.
media.peerconnection.enabled
2. Нажмите правой кнопкой мышки на строку и выберите Переключить. Или дважды кликните по строке.

После этих действий WebRTC будет отключен.

Настройка через плагин WebRTC Control

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

Откройте Дополнения.

Выберите:

1. Раздел Поиск
2. Введите название плагина в поисковую строку: WebRTC Control
3. Нажмите кнопку Установить

Как отключить WebRTC в браузере Opera

Для отключения WebRTC в браузере Opera перейдите в галерею Расширений.

Выполните следующие действия:

1. Введите название плагина в поисковой строке: WebRTC Control
2. Нажмите на плагин

Нажмите Добавить в Opera.

Активируйте плагин. Иконка плагина должна стать синего цвета для блокировки WebRTC.

Как отключить WebRTC в Google Chrome

Для отключения WebRTC в браузере Google Chrome перейдите в раздел Расширения.

Пролистайте страницу вниз и нажмите Еще расширения.

Выполните следующие действия:

1. Введите в поисковую строку название плагина: WebRTC Control
2. Нажмите кнопку Установить.

Активируйте плагин. Иконка плагина должна стать синего цвета для блокировки WebRTC.

Как отключить WebRTC в Яндекс Браузере

Для отключения WebRTC в Яндекс Браузере перейдите в раздел Дополнения.

Пролистайте страницу вниз и нажмите Каталог расширений для Яндекс Браузера.

Выполните действия:

1. Введите в поисковой строке название плагина: WebRTC Control
2. Нажмите на плагин для установки.

Нажмите Добавить в Яндекс Браузер.

Нажмите Установить расширение.

Активируйте плагин. Иконка плагина должна стать синего цвета для блокировки WebRTC.

Как отключить WebRTC в браузере SRWare Iron

Браузер SRWare Iron сделан на базе Google Chrome.

Установите плагин WebRTC Control по инструкции для .

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 соединениями. Они представляют одноуровневые медиа соединения, каналы данных, и интерфейсы, использующиеся при обмене информацией о возможностях каждого узла, для выбора наилучшей конфигурации при установки двустороннего мультимедийного соединения.

Руководства

Привет друзья, как вы уже знаете, мы сообщаем вам регулярно новые технологии, сегодня я представлю WebRTC, технология, разработанная компанией Google, которая позволяет пользователям говорить непосредственно в браузере видео и аудио, не требуя, что использование plugin- Веб-сайты или приложения. Видео и аудио прямое соединение между пользователями осуществляется непосредственно в браузере.
Технология WebRTC поддерживается в Mozilla Firefox браузеров Google Chrome и на любой операционной системе, скоро присоединится и Opera.
Что такое WebRTC и что?
WebRTC короток для Web Real Time Comunication, эта технология позволяет открывать аудио и видео чатов непосредственно в браузере без необходимости других плагинов, приложений или услуг в Интернете для этого. Подключение осуществляется непосредственно из браузера в браузере.
Если известные услуги (Skype, Yahoo Messenger, Apple FaceTime, Google Hago и т.д.) требуют сервер, который соединяет пользователей, чтобы инициировать и управлять трафиком. Используя эти услуги нам нужно зарегистрироваться и установил список клиентов и контактов.
С WebRTC нам не нужны серверы, приложения или серверы, которые подключаются к заступиться.
WebRTC преимущества:
1. Нет больше приложений, потребляющее использование ресурсов и аккумулятора.
2. В чатах более частные (относительно).
3. Как связаться можно сделать на местном уровне, а не Flos США серверы для локальных соединений.
4. Простота, удобство использования.
5. Возможность дальнейшего развития, и в других направлениях.
6. Связь стабильна и не зависит от внешних соединений, которые иногда крайне нестабильным.
В учебнике я использовал демо, что люди в Google разработали, это демо довольно просто, более расширенные возможности и более быстрые соединения могут использовать один из приложений, которые поддерживают WebRTC, они проще в использовании. Скоро мы будем делать учебник и о приложениях WebRTC.
Как использовать WebRTC демо?
Очень просто нажмите на ссылку ниже, он автоматически генерирует чат. связать эту комнату, вы должны отправить друг / подруга, которую вы хотите, чтобы войти в контакт.
Друг / подруга и ваш, но вы должны использовать только самые последние версии Mozilla Firefox или Google Chrome.

Demo WebRTC (Вводный чат аудио - видео)

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

Европейские пользователи Сети разделились на две части: согласно опросу Института анализа общественного мнения в Алленбахе (Германия), Skype, чат и системы мгновенного обмена сообщениями стали неотъемлемой частью повседневной жизни для 16,5 млн. взрослых и детей, 9 млн. используют эти службы от случая к случаю, а 28 млн. к ним не прикасаются.

Ситуация может измениться, поскольку теперь в Firefox интегрирована технология коммуникаций в реальном времени (WebRTC ), а также сам клиент. Запустить аудио- и видеочат теперь ничуть не сложнее, чем открыть сайт. Такие сервисы, как Facebook и Skype, напротив, делают ставку на решения с использованием отдельного клиента и созданием учетной записи.

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

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

Вскоре после этого Chrome и Firefox получили собственные WebRTC-движки. В настоящее время их мобильные варианты оснащены как этой технологией, так и устанавливаемым вместе с Android 5.0 движком WebView 3.6, который используется приложениями.

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

Параллельно с интеграцией в браузер рабочая группа Консорциума Всемирной паутины (W3C) форсировала процесс стандартизации WebRTC. Он должен завершиться уже в 2015-го году.

WebRTC довольствуется малым

Для использования службы WebRTC не требуется много ресурсов, поскольку сервер соединяет только собеседников. Установка соединения также не представляет особой сложности. Сначала браузер подает серверу WebRTC сигнал, что он планирует начать вызов. От сервера он получает HTTPS-ссылку - связь осуществляется в зашифрованном виде. Этот линк пользователь отправляет своему собеседнику. После этого браузер запрашивает у пользователя разрешение на доступ к веб-камере и микрофону.

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

Чтобы потоковое соединение функционировало без сбоев и в хорошем качестве, в браузере работают три движка. Два из них оптимизируют и сжимают аудиои видеоданные, третий ответственен за их транспортировку. Он пересылает данные посредством протокола SRTP (Secure Real-time Transport Protocol), который позволяет осуществлять зашифрованную потоковую передачу в реальном времени.

Если прямое соединение установить не удается, WebRTC ищет другой путь. К примеру, это происходит в том случае, когда сетевые настройки препятствуют тому, чтобы STUN-сервер смог сообщить IP-адрес. Стандартом WebRTC предусмотрено, что в этом случае беседа состоится, но с промежуточным включением TURN-сервера (Traversal Using Relays around NAT). Так, на сайте netscan.co можно проверить, реализуется ли WebRTC на вашем компьютере и с вашим доступом к Сети.

Как осуществляется соединение

Сначала необходимо зарегистрировать беседу (1). Служба WebRTC дает ссылку, которую необходимо отправить собеседнику. Браузер с помощью STUNсервера выясняет свой собственный IP-адрес (2), отправляет его сервису и получает IP партнера для установки прямого соединения (3). Если использовать STUN не удается, беседа перенаправляется с помощью TURNсервера (4).

Общение по технологии WebRTC в браузере запускается с помощью кода JavaScript. После этого за коммуникацию отвечают три движка: голосовой и видеодвижки собирают мультимедийные данные с веб-камеры и микрофона, а транспортный движок объединяет информацию и пересылает поток в зашифрованном виде, используя протокол SRTP (Secure Real-time Protocol).

Какие браузеры работают с WebRTC

Chrome и Firefox оснащены движком WebRTC, который использует такие службы, как talky.io. Браузер от Mozilla может работать напрямую со своим собственным клиентом.

Google и Mozilla продолжают развивать идею коммуникации в реальном времени: Chrome может проводить конференцию WebRTC с несколькими участниками, а новый клиент Hello в Firefox разработан при содействии с дочерней компанией телекоммуникационного гиганта Telefonica. Apple пока что остается в стороне, в Safari WebRTC ожидать пока не стоит. Однако существует множество альтернативных приложений для iOS и плагинов для Safari.

Корпорация Microsoft идет несколько иным курсом. В качестве владельца конкурентного сервиса Skype данная компания не собирается так просто капитулировать перед WebRTC. Вместо этого Microsoft разрабатывает технологию под названием ORTC (Object Real-Time Communications) для Internet Explorer.

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

Фото: компании-производители; goodluz/Fotolia.com