CC BY
79
WebRTC. Коммуникация в режиме реального времени
Н.А. Северинов,
студент 4-го курса, специальность «Информационные системы и технологии»
А.Ф. Иванько,
к.т.н., доцент кафедры информационных систем
Такие средства как Vkontakte, Facebook, Skype, Google Talk, Twitter, MySpace и другие предоставляют широкий выбор связи (как посредством обычных чатов, так и хороших видео-конференций). Мы поговорим о приложениях, у которых видео- и аудиосвязь являются главной задачей и целью, и о технологии, которая позволяет их полностью заменить.
Любое приложение, нацеленное на видео- и аудиозвонки, требует первоначальной установки на персональном компьютере, требует некоторой платы за совершение видео-конференций и прочих услуг. Конечно же, есть и плюсы: поддержка видео- в HD формате, хороший звук, есть и система текстового чата. Что еще нужно современному человеку в мире, где правит коммуникация?
В середине 2012 года, корпорация Google анонсировала технологию коммуникации в реальном времени - WebRTC. Но только к началу 2013 года был осуществлен первый видеозвонок между браузерами Chrome и Firefox.
Что дает нам данная технология?
Возможность создавать собственные приложения, для голосовой и видеосвязи, распознавания и редактирования, для создания своих приложений, для дистанционного образования (вебинаров). Теперь технология WebRTC может составить конкуренцию Skype. Технология WebRTC в той или иной степени поддерживается в Google Chrome с 17 версии, Opera с 12 версии и Firefox с 18 версии.
127
Для других же браузеров можно использовать расширение WebRTC4All, технология не требует дополнительной установки на компьютере или мобильном устройстве. Также WebRTC поддерживает передачу данных.
Таким образом, уже сейчас мы можем написать кроссплатформенное решение по осуществлению видеозвонков с мобильных устройств (Android) на персональные компьютеры зная только JavaScript и HTML5!
История возникновения WebRTC берет начало с 2004 года, где только начинает свое развитие технология Ajax, позже, достигая 2008 года, новой ступенью становится технология Web Sockets, дающая намного больше возможностей чем Ajax. И вот, c 2012 года, вступает технология WebRTC. Технология коммуникации в реальном времени.
Можно выделить следующие особенности данной технологии:
1. Не требует аутентификации пользователя.
2. Не требует первоначальной установки.
3. Возможность писать свои собственные платформы для коммуникации.
4. Данная технология является мультиплатформенной.
Уже сейчас в настройках Google Chrome, можно найти пункт -
включение данной технологии на устройствах Android.
Как было сказано выше, WebRTC - мультиплатформенная технология, но как же быть с браузером IE от Microsoft. Ответ прост, данный функционал технологии WebRTC поддерживается в нем при помощи Chrome Frame. Также WebRTC доступна как библиотека C++ , используя WebKitGTK+ и Qt.
Технология WebRTC состоит из:
- Media Streams - поток информации с камеры и микрофона.
- PeerConnection - организации простых аудио-/видео-
звонков.
- DataChannels - передача файлов.
Нововведениями являются:
1. GroupConnection - организация видеоконференции.
2. ScreenSharing - передача изображения своего рабочего
стола.
Все эти возможности позволяют создать очень мощное решение по коммуникации.
Рассмотрим шаги инициализации WebRTC в простом HTML5 приложении:
- для начала в теги <body> установим HTML5 Video тег
<video>;
- получаем изображение и звук посредством метода getUserMedia();
128
- преобразуем поток с камеры и микрофона в SRC-путь, при помощи ObjectURL.
Поговорим отдельно о getUserMedia, данный метод позволяет взять изображение и звук с камеры и микрофона. Для работы данного метода во всех браузерах нужно использовать префиксы, которые говорят нам о технологии построения браузера, например: браузеры, организуемые по технологии WebKit, требуют использовать префикс webkit: webkitGetUserMedia и т. д.
Рассмотрев шаги и префиксы мы можем приступить непосредственно к реализации (листинг 1). Уточню, что технология WebRTC работает только на сервере.
11
12 т
13
14 а
15
16 т
17
18
19 а
20 21т
<script>
window.onload = function!){
navigator.webkitGetUserMedia!{video:true}, getStream, noStream);
>;
function getStream(strea/n){
var url = webkitURL.createObjectURL(stream); video.src = url; b
function noStreamifaild){
22
23 a >;
24 </SCript>
25 <video id-livideo" autoplay^autoplay" wic/t/i=* l, 2 3400,l></video>
Листинг 1. Реализация взятия потока информации с вебкамеры www.lineto.ru /g1.html
За основу мы взяли браузер Google Chrome, префикс -webkit. В JavaScript мы инициализируем событие успешной загрузки страницы - window.onload, в котором вызываем объект navigator и его метод webkitGetUserMedia (строка 13, листинг 1). Метод: webkitGetUserMedia принимает в себя:
1. Перечисление {video: true, audio: true}, или {video: true}, или {audio: true} - что означает взять видео- и аудиопотоки или только видеопоток, или аудиопоток соответственно.
2. Следующий аргумент метода является callback функция, которая, в случае успешного подтверждения и взятия потока информации, формирует поток и возвращает его.
3. Последний аргумент метода является также callback — функция, которая, в случае ошибки взятия информации возвращает нам ошибку.
Для преобразования выходного потока - stream (строка 17, листинг 1) мы используем метод webkitURL.createObjectURL(stream), который на выход дает путь до потока (url).
129
В итоге нам осталось лишь сделать отношение video.src = url (строка 18, листинг 1) и мы получили уже изображение с камеры в тег HTML5 Video.
Также стоит отметить, что пользовательский интерфейс подтверждения взятия потока информации с камеры и микрофона всегда разный, в зависимости от браузера.
Например, в браузере Google Chrome это выглядит так (рис. 1):
-v _^Р lineto.ru/gl.html ®*| н =
■4 http://linetD.ru/ запрашивает разрешение на использование вашей камеры. [ Запретить | [ Разрешить | X
Рис. 1. Разрешение взятия потока в браузере Google Chrome
В браузере Opera совсем иначе (рис. 2):
Рис. 2. Разрешение взятия потока в браузере Opera
Мы также можем сделать приложение реализации мгновенных снимков с камеры, используя HTML5 Canvas (листинг 2).
31 <script>
32 function myclick(){
33 canvas.getContext t'2d1)-drawlmage(video,0,0,canvas.width,canvas.height);
34 } .
35 </script>
36 cvideo id="vid" at/toplay=Mautoplay" width-'400" height-,300"></video>
37 ccanvas id-'canvas" width-'400" /7eight="300"x/canvasxbr>
| 38 <button o/iCZic/f=,,myclick( )">Snapshot</button>|
Листинг 2. Реализация мгновенных снимков с камеры (Snapshot)
Для реализации снимков, используем HTML5 Canvas, объявим тег <canvas> и кнопку в html документе. На кнопку, устанавливаем событие — click, по которому вызывается функция myclick() (строка 38, листинг 2), которая как раз и делает снимок с камеры.
Самая интересная особенность — PeerConnection, которая позволяет организовывать простые аудио-/видеозвонки.
130
PeerConnection - включает в себя:
1. Peer-to-Peer.
2. Контроль кодеков.
3. Шифрование соединения.
В заключение можно сказать, что за этой технологией будущее - коммуникации реального времени. Данная технология применяется, в режиме тестирования, для ведения вебинаров и консультаций заочного отделения факультета издательского дела и журналистики, а также для организации онлайн конференций и собеседований в различных компаниях России и в странах дальнего, и ближнего зарубежья.
Библиографический список
1. Официальный сайт WebRTC - www.webrtc.org
2. Открытая энциклопедия «Wikipedia» - http://ru.wikipedia. org/wiki/WebRTC
131
