Webrtc control как пользоваться
Многие уже слышали о проекте WebRTC, некоторые даже используют его (или пытаются применять в существующих проектах), а кто-то злобно потирает руки, предвкушая постепенную расправу со Skype и Flash.
Погуглив в Хабре (хе-хе) я почему-то не нашел статей, которые углублялись в техническую сторону WebRTC, показывали бы примеры его использования.
Что же, я попытаюсь порадовать вас схемками, кодом. В общем, именно тем, что всем по вкусу. Так пройдем же под кат, мой любимый читатель.
Что это?
По сути, WebRTC являет собой:
1. Media Streams (getUserMedia).
2. Peer Connection.
Ниже я вкратце опишу эти элементы, но подробное описание я все же хочу оставить на две следующие части статьи.
Media Streams
Media Streams — API, позволяющий получить доступ к камере и микрофону через браузер без каких-либо плагинов и флеша.
Следуя WebRTC Public API, нам нужно использовать метод getUserMedia у глобального объекта navigator.
Передавать стоит три параметра:
— объект со списком того, что нам нужно (аудио/видео)
— success callback
— error callback
И пока что есть необходимость в костылях из-за наличия префиксов в различных браузерах:
Браузер мило попросит разрешения.
Ура! Мы получили Stream-объект с аудио и видео. И что же с ним делать?
Можем показать это дело юзеру используя html5 тег «video».
И немножко сахара. Теперь можно смело применять html5 фильтры (webkit) к видео элементу.
Клево, не правда ли?
Peer Connection
Peer Connection — это тот самый API, который позволяет установить Peer-to-Peer соединение между браузерами.
Ниже представлена упрощенная схема соединения между двумя клиентами.
— Первый клиент отправляет так называемый Offer второму клиенту через сервер (PeerConnection Observer).
— Второй клиент (Remote Peer) отправляет через сервер ответ первому клиенту.
— Устанавливается P2P соединение между клиентами.
Примечательно, что в дальнейшем для работы такого соединения сервер становится опциональным. Т.е. после его выключения данные все также будут передаваться. Дальнейшее участие PeerConnection Observer'а нужно для правильного закрытия соединения, добавления участников в поток и т.п.
В спецификации указан конструктор RTCPeerConnection, но пока что мы вынуждены использовать префиксы для различных браузеров:
Здесь пора бы уже и server side рассматривать, но хочется оставить первую статью более обзорной.
Недостатки
Продолжая «осмотр», нужно отметить темную сторону проекта:
1. API изменяется, т.к. проект находится на стадии активной разработки. Следовательно, иногда придется менять свой код.
2. До утверждения аудио и видео кодеков, возможны проблемы с кроссплатформенностью.
3. Кроссбраузерность. Имеем такую картину:
| Chrome | Firefox | Opera | |
|---|---|---|---|
| getUserMedia | Stable (as of version 21) | 17 | 12 |
| Peer Connection | Stable (as of version 23) | Nightly | - |
Зачем тогда это все?
Думаю, в недалеком будущем мы все же получим стабильный WebRTC API в современных браузерах. Это откроет невероятные возможности в веб разработке. Интересуясь этим проектом уже сейчас, можно будет намного быстрее вникнуть и начать использовать его потом.
И никто не отменял рассчитанные на определенный браузер (Chrome Stable, к примеру) проекты. Да и интересно же, правда?
Дальше — больше
WebRTC — это браузерная технология, предназначенная для передачи потоковых данных между браузерами или приложениями с использованием технологии двухточечной передачи (point-to-point transmission).
Эта технология хороша тем, что позволяет устанавливать связь между пользователями, используя только браузер. Для некоторых разработчиков, когда они узнают о WebRTC, это становится открытием: ведь можно создать видеочат без использования стороннего сервера — нужен только браузер.
WebRTC не требует установки дополнительных плагинов. Нужно просто написать код на HTML или JavaScript, и видеопотоки в браузере будут работать плавно.
Технические тонкости
У WebRTC есть свои тонкости — он использует два сетевых протокола — TCP и UDP.
Особенность протокола TCP в том, что он передает данные без потерь: пользователь получает стабильное изображение, видео передается без потерь и повреждений. Но этот протокол имеет ограничения по объему передачи данных. Например, нельзя передавать видео Full HD пяти людям одновременно.
Эта проблема решается с помощью протокола UDP: пользователи могут передавать высококачественные изображения и видео без ограничений. Но у него есть свой недостаток: он допускает потерю пакетов. Из-за этого изображение может дрожать и сильно терять в качестве.
Что такое WebRTC и как это отключить
WebRTC (сокращенно от Web real-time communications) – это технология, которая позволяет передавать аудио и видео потоковые данные между браузерами и мобильными приложениями.
Разработка этой технологии составляет конкуренцию Skype. WebRTC можно использовать для организации видеоконференций напрямую в браузере. Проект имеет открытый исходный код и активно продвигается компанией Google и в частности командой разработки браузера Google Chrome.
API WebRTC
WebRTC имеет довольно большой набор функций и инструментов. В этой статье мы разберем три API.
1. getUserMedia
API позволяет управлять пользовательскими устройствами из браузера. Здесь можно выбрать:
- камеру, с которой должно транслироваться видео;
- микрофон;
- качество передаваемого изображения.
Такие настройки помогают оптимизировать проект. Для того, чтобы все работало быстрее, качество можно уменьшить до 360 пикселей.
Алгоритм управления шумом тоже помогает: он эффективно устраняет шум и фоновые звуки из аудиопотока.
2. RTCPeerConnection
Этот API-интерфейс относится к технологии Peer-to-Peer, которая представляет собой прямую комбинацию двух браузеров, которые не используют сервер. Таким образом, происходит прямая передача видеопотоков с одного устройства на другое.
В RTCPeerConnection есть важная функция — встроенная поддержка серверов Stun/Turn, которые необходимы для обхода провайдера NAT, из-за которого видеопотоки могут не доходить до пользователей.
Разработчики могут получить доступ к серверам Stun/Turn от одного пользователя и получить чистый адрес для передачи видеопотока. Затем, можно подключиться к серверам Stun/Turn от другого пользователя и подключиться повторно. Таким образом, можно избежать сбоев и проблем с подключением пользователей из-за NAT.
3. RTCDataChannel
Используя RTCDataChannel, можно передавать текст и файлы различных форматов параллельно с видеопотоком.
Благодаря этому API вы можете разработать простой и быстрый чат для пользователей приложения. Он не требует установки на сервер, его можно переписать и передавать файлы любого формата размером до 4 ГБ (и более, если это позволяет браузер).
Что по безопасности?
WebRTC не использует сторонние сервисы, где можно было бы реализовать защиту данных. Однако, технология работает через проверенные сетевые протоколы, которые обеспечивают безопасность передачи данных.
Пример из практики: онлайн школа танцев
Пара слов о проекте, в котором мы использовали WebRTC. Нам пришел запрос на разработку приложения для онлайн школы танцев. Стандартная группа для каждого урока — 16 пользователей (один учитель и 15 учеников).
Одна из сложнейших задач проекта — добиться идеальной синхронизации 15 видеопотоков для студентов.
Проблема синхронизации возникала из-за того, что у каждого пользователя разная скорость соединения, местоположение и интернет-провайдер. Поэтому мы развернули медиа-сервер Wowza, который собрал все видеопотоки. Затем мы разместили медиа-сервер и веб-сайт приложения на Amazon, что снизило нагрузку на пользовательские устройства. Расчеты, обработка, синхронизация и мультиплексирование видеопотоков выполняются на сервере — учитель и ученики получают материалы, готовые к воспроизведению.
Синхронизация была достигнута с помощью FFmpeg — инструмента, который позволяет гибко и удобно управлять передачей аудио и видео потоков.
Нам нужно было найти решение проблемы отображения видеопотоков без использования сторонних систем. Мы решили использовать технологию WebRTC, и это оказалось идеальным решением для потоковой передачи видео через браузер.
What is WebRTC and how to disable it?
WebRTC (from Web real-time communications) is a technology that allows you to transfer audio and video streaming data between browsers and mobile applications.
The development of this technology is competing with Skype. WebRTC can be used to organize video conferences directly in the browser. The project has open source code and is actively promoted by Google and in particular the development team of Google Chrome browser.
Как работает WebRTC
Браузеры пользователей благодаря технологии 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, если вы этим не пользуетесь.
Миграция с Flash
Flash уже почти вышел из пользования. Поэтому важно мигрировать проекты (если по какой-то причине вы еще этого не сделали), разработанные с использованием Flash, на другие технологии, в частности на WebRTC.
Однако важно понимать, что WebRTC не является заменой Flash. Это инструмент, с помощью которого можно частично реализовать функциональность Flash.
Аналитика для WebRTC
В браузере Google Chrome есть отдельная страница, где можно отслеживать передачу данных с помощью WebRTC. Там отображается вся статистика соединения: количество переданных пакетов, качество звука и видео, загрузка браузера, используемая сервером Stun/Turn.
Заключение
У нас еще не так много опыта в применении этой технологии, поэтому буду благодарен, если поделитесь своими случаями из практики и крутыми источниками для более углубленного изучения.
How WebRTC works
Browsers of users thanks to WebRTC technology can transmit data directly to each other. WebRTC does not need a separate server that would store and process the data. All data is processed directly by browsers and mobile applications of users.
WebRTC technology is supported by all popular browsers Mozilla Firefox, Opera, Google Chrome (and all browsers based on Google Chrome), as well as mobile applications based on Android and iOS.
The Danger of WebRTC
The danger of WebRTC technology is to determine your real IP address. Since the connection goes directly to another user, browser, website or mobile application, the network settings are ignored. To create audio and video communication, browsers must exchange external and local IP addresses.
Anonymous VPN service solves this problem and hides the real IP address. The maximum that can be detected is the local IP address assigned to the user by the VPN network. This is not dangerous, since the same local IP addresses will be shown if you use a router to distribute the Internet.
If you use a proxy, then WebRTC will be able to determine your real IP address for the proxy or IP address of the VPN server if you use the VPN + proxy chain.
WebRTC also determines your real IP address using Tor network.
The best solution is to disable WebRTC technology if you do not use it.
Для каких проектов подходит WebRTC
Изначально, цель WebRTC — создание видеоконференций с использованием одноранговой технологии без использования какого-либо дополнительного сервера. Технология идеально подходит для разработки приложений для видеоконференций на основе браузера. Можно сказать, что это почти Skype внутри браузера.
Читайте также: