На сегодняшний день WebRTC является «горячей» технологией для потокового аудио и видео в браузерах. Консервативные технологии, такие как HTTP Streaming и Flash, больше подходят для раздачи записанного контента (video on demand) и существенно уступают WebRTC в плане реалтайма и онлайн трансляций, т.е. там, где требуется минимальная задержка видео, позволяющая зрителям видеть то, что происходит «в прямом эфире».
Возможность качественной коммуникации в реальном времени происходит от самой архитектуры WebRTC, где для транспорта видеопотоков используется UDP протокол, являющийся стандартной основой для передачи видео с минимальными задержками и широко использующийся в коммуникационных системах реального времени.
Коммуникационная задержка важна в системах онлайн трансляций, вебинарах и других приложениях, где требуется интерактивная связь с источником видео, конечных пользователей и требует решения.
Другая весомая причина попробовать WebRTC — это, безусловно, тренд. Сегодня каждый Android Chrome браузер поддерживает эту технологию, что гарантирует миллионы устройств, готовых к просмотру трансляции без установки какого-либо дополнительного ПО и конфигураций.
Для того, чтобы проверить технологию WebRTC в деле и запустить на ней простую онлайн трансляцию, мы использовали серверное ПО Flashphoner WebRTC Media & Broadcasting Server. В фичах заявлена возможность транслировать WebRTC потоки в режиме «один ко многим» (one-to-many), а так же поддержка IP камер и систем видеонаблюдения через RTSP протокол; в настоящем обзоре мы сосредоточимся на web-web трансляциях и их особенностях.
Установка WebRTC Media & Broadcasting Server
Поскольку для Windows системы версии сервера не оказалось, а устанавливать виртуалку типа VMWare+Linux не хотелось, протестировать онлайн трансляции на домашнем Windows компьютере не получилось. Чтобы сэкономить время решили взять инстанс на облачном хостинге вроде такого:
Это был Centos x86_64 версии 6.5 без какого- либо предустановленного ПО в датацентре Амстердама. Таким образом, все, что мы получили в распоряжение, — это сервер и ssh доступ к нему. Для тех, кто знаком с консольными командами Linux, установка WebRTC сервера обещает пройти просто и безболезненно. Итак, что мы сделали:
1. Скачать архив:
$wget https://сайт/download-wcs5-server.tar.gz
2. Распаковать:
$tar -xzf download-wcs5-server.tar.gz
3. Установить:
$cd FlashphonerWebCallServer
Во время инсталляции ввевсти IP адрес сервера: XXX.XXX.XXX.XXX
4. Активировать лицензию:
$cd /usr/local/FlashphonerWebCallServer/bin
$./activation.sh
5. Запустить WCS сервер:
$service webcallserver start
6. Проверить лог:
$tail - f /usr/local/FlashphonerWebCallServer/logs/flashphoner_manager.log
7. Проверить, что два процесса на месте:
$ps aux | grep Flashphoner
Процесс установки закончен.
Тестирование WebRTC онлайн-трансляций
Тестирование трансляций оказалось делом нехитрым. В дополнение к серверу есть web-клиент, который состоит из десятка Javascript, HTML и CSS файлов и был развернут нами в папку /var/www/html на этапе установки. Единственное, что пришлось сделать, это вписать IP адрес сервера в конфиг flashphoner.xml, чтобы web-клиент мог установить соединение с сервером по HTML5 Websockets. Опишем процесс тестирования.
1. Открываем страницу тестового клиента index.html в Chrome браузере:
2.
Для того чтобы начать трансляцию, нужно нажать кнопку «Start» посередине экрана.
Перед тем как это сделать, необходимо убедиться что веб-камера подключена и готова к работе. Особых требований к вебкамере нет, мы, например, использовали стандартную встроенную в ноутбук камеру с разрешением 1280×800.
Chrome браузер обязательно попросит доступ к камере и микрофону для того чтобы пользователь понимал, что его видео будет отправлено на Интернет-сервер и разрешил это сделать.
3. Интерфейс представляет собой успешную трансляцию видеопотока с камеры на WebRTC сервер. В правом верхнем углу индикатор указывает, что поток уходит на сервер, в нижнем углу кнопка «Стоп» для остановки отправки видео.
Обратите внимание на ссылку в поле снизу. Она содержит уникальный идентификатор этого потока, так любой желающий может присоединиться к просмотру. Достаточно открыть эту ссылку в браузере. Чтобы ее скопировать в буфер обмена нужно кликнуть по кнопке «Copy».
В реальных приложениях вроде вебинаров, лекций, онлайн видео трансляций или интерактивного TV разработчикам придется реализовывать раздачу этого идентификатора определенным группам зрителей для того, чтобы они смогли подключиться к нужным потокам, но это уже логика работы приложения. WebRTC Media & Broadcasting Server ее не затрагивает, а занимается только раздачей видео.
5. Соединение установлено и зритель видит поток на экране. Теперь он может отправить ссылку кому-то другому, остановить воспроизведение потока либо включить полноэкранный режим, пользуясь контролами в правом нижем углу.
Результаты тестирования WebRTC сервера онлайн трансляций
Во время тестов задержка выглядела идеальной. Пинг до датацентра составил около 100 миллисекунд и задержка была не различима глазом. Отсюда, можно предположить, что реальная задержка составляет те же 100 плюс минус несколько десятков миллисекунд на время буферизации. Если сравнивать с Flash видео: в подобных тестах Flash ведет себя не так хорошо, как WebRTC. Так, если на схожей сети шевельнуть рукой, то движение на экране можно увидеть только через одну/две секунды.
Относительно качества отметим, что на движениях иногда можно различить кубики. Это соответствует природе кодека VP8 и его основной задаче — обеспечить видео связь в реальном времени с приемлемым качеством и без задержек в коммуникации.
Сервер достаточно прост в установке и настройке, для его запуска не требуется каких-либо серьезных навыков кроме знания Linux на уровне продвинутого пользователя, умеющего выполнять команды из консоли через ssh и пользоваться текстовым редактором. В итоге нам удалось наладить онлайн трансляцию one-to-many между браузерами. Подключение дополнительных зрителей к потоку также не вызвало проблем.
Качество трансляции оказалось вполне приемлемым для вебинаров и онлайн вещаний. Единственное, что вызвало некоторые вопросы, — это разрешение видео. Камера поддерживает 1280×800, но разрешение на тестовой картинке очень похоже на 640×480. Видимо, этот вопрос нужно уточнять у разработчиков.
Видео по тестированию трансляции с веб-камеры
через WebRTC-сервер
WebRTC позволяет реализовать real-time аудио/видео связь через браузер
В этом топике я расскажу как реализовать простейшее WebRTC приложение.
1. getUserMedia - получение доступа к медиа устройствам (микрофон/вебкамера)
Ничего сложного, с помощью 10 строк javascript-кода вы сможете увидеть и услышать себя в браузере(демо ).
Cоздайте index.html :
К элементу video вы можете применить css3-фильтры .
Огорчает здесь то, что на данном этапе развития WebRTC я не могу сказать браузеру «этому сайту я доверяю, всегда давай ему доступ к моей камере и микрофону» и нужно нажимать Allow после каждого открытия/обновления страницы.
Ну и не лишним будет напомнить, что если вы дали доступ к камере в одном браузере, другой при попытке получить доступ получит PERMISSION_DENIED.
2. Signaling server (сигнальный сервер)
Здесь я нарушаю последовательность большинства «webrtc getting started» инструкций потому как они вторым шагом демонструруют возможности webRTC на одном клиенте, что лично мне только добавило путаницы в объяснение.
Сигнальный сервер - это координирующий центр WebRTC, который обеспечивает коммуникацию между клиентами, инициализацию и закрытие соединения, отчеты об ошибках.
Сигнальный сервер в нашем случае это Node.js + socket.io + node-static, он будет слушать порт 1234.
Плюс ко всему node-static может отдать index.html, что сделает наше приложение максимально простым.
В папке приложения установим необходимое:
Npm install socket.io npm install node-static