WebRTC — коммуникации через веб-страницу

Наверное, самой ожидаемой технологией, относимой к семейству HTML5, которая бурно развивается прямо сейчас, вот прямо в момент написания этих строк, является WebRTC. WebRTC (real-time communications) — это сетевой протокол с открытым исходным кодом, предназначенный для организации голосовой и видеосвязи через Интернет в режиме реального времени. WebRTC основывается на продукте от компании Global IP Solution (GIPS), которая была куплена компанией Google в мае 2010-го. Технология использует свои аудиокодеки и открытый видеоформат VP8 (WebM).

В браузер Google Chrome технология WebRTC была добавлена в январе 2012 года, правда, до сих пор она присутствует только в ветке для разработчиков.

В то же время WebRTC является открытой технологией (лицензия BSD-3), и поддержка ее другими производителями браузеров не заставила себя ждать. В апреле 2012 года на парижском саммите IETF 83 команда разработчиков Mozilla показала экспериментальную сборку браузера Firefox со встроенной поддержкой WebRTC (был продемонстрирован видеочат между двумя интернет-обозревателями на основе этой технологии). Первые сборки Opera с поддержкой WebRTC появились (в рамках Opera Labs) еще раньше — в октябре 2011-го.

Правда, полной реализацией протокола пока не может похвастаться ни один браузер, это дело ближайшего будущего, но кое-что мы попробуем прямо сейчас. Чем и займемся.

Сейчас мы попробуем задействовать один из основных интерфейсов WebRTC — TediaStream, реализуемый посредством метода getUserMedia. Задача очень скромная — захватить входной поток видеокамеры и вывести его на экран.

К сожалению, первая проблема, которую нужно решить, — это обзавестись браузером, в котором это вообще возможно. На момент написания гарантированно работал в Chrome Dev Channe — девелоперская версия браузера Google Chrome. Для операционной системы Windows можно взять бинарную сборку по адресу http:// Www. google. com/chrome/eula. html? extra=devchannel&platform=w in, для MacOS — Http://www. google. com/chrome/intl/en/eula_dev. html? dl=mac. Инструкции для сборки под Linux здесь: Http://dev. chromium. org/getting-involved/dev-channel.

Во всех случаях браузер следует запускать с флагами — enable-media-stream and — enable-peer-connection.

Еще один момент — на странице флагов Chrome (chrome://flags) следует включить флаг Enable PeerConnection (рис. 92).

Впрочем, я надеюсь, что к моменту прочтения эти ухищрения вам уже не понадобятся. В только что вышедшей версии Google Chrome (23) поддержка WebRTC обещана «из коробки».

Рис. 92. Включаем воспроизведение WebRTC (Googl Chrome)

Теперь все — начнем писать код.

Поскольку мы уже живем в мире HTML5, не будем стесняться, используем для вывода видеосигнала специальный предназначенный для этого элемент <video>:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>W ebRTC</title>

<script src=". ./jquery-1.4.4.min. js"></script>

<style>

.content { width: 960px: margin: 0 auto:

}

Video {

Width: 352px: height: 288px:

}

</style>

</head>

<body>

<div class="content">

<h3>WebRTC — getUserMedia</h3>

<div >

<wideo cwntrols autoplay> </wideo> <output></output>

</div>

</div>

</body>

</html>

Теперь приступим к захвату видеокамеры и микрофона (мосты, баyки, телеграф — как-нибудь потом). Сначала получим наш video-элемент в переменную и примем некоторые меры предосторожности:

<script>

$(function(){

Var ideo = $(‘ideo’)[0];

Navigator. getUserMedia = navigator. getUserMedia || navigator. webkitGetUserMedia; URL = window. URL || window. webkitURL;

CreateObjectURL = URL. createObjectURL || webkitURL. createObjectURL:

});

</script>

Тут мы страхуем существование нужных нам объектов с помощью vendor-prefix. На момент написания этих строк — совершенно необходимая процедура.

Теперь собственно захват:

CreateObjectURL = URL. createObjectURL || webkitURL. createObjectURL if(!!navigator. getUserMedia!== false) {

Navigator. getUserMedia({video: true, audio:true}, successCallback, errorCallback): } else {

$(‘output’).html(‘Ваш браузер не поддерживает метод getUserMedia. ‘); return;

}

Сейчас реализуем функции обратного вызова:

Navigator. getUserMedia({video: true, audio:true,}, successCallback, errorCallback):

Function successCallback(stream) { video. src = URL. createObjectURL(stream);

}

Function errorCallback(error) {

Console. error(‘An error occurred: [CODE ' + error. code + ']‘); return;

}

});

Здесь функция successCallback принимает в качестве аргумента Stream-объект c медиаконтентом (в данном случае аудио — и видеопотока с камеры и микрофона).

После запуска сценария пользователю будет показан запрос разрешения воспользоваться его видеокамерой и микрофоном, кроме этого, будет предоставлена возможность выбора устройства (рис. 93). В случае поручения согласия камера будет задействована, и картинка с нее немедленно станет свойством src для элемента <video>, соответственно, будет показана на экране. На рис. 94 можно видеть автора в момент написания этих строк и кусочек питерской белой ночи.

Итак, с инструментальной частью все в порядке. MediaStream API (getUserMedia) — это только часть технологии, но и c имеющимися возможностями мы попытаемся сделать что-нибудь полезное. Например, давайте дополним наш скрипт буквально десятком строк для получения фотографий с камеры.

Чуть-чуть дополним разметку:

<div >

<deo ntrols autoplay id ="view"> </o>

<output></output><br />

<input type=button value="&#x1F4F7;" onclick="snapshot()"> </div>

Рис. 93. Захват камеры и микрофона (с возможностью выбора)

Рис. 94. Hello WebRTC — видеозахват работает И добавим новую функцию:

Var o = document. getElementById(‘view’); var content = $(‘.content’);

Function snapshot() {

Canvas=document. createElement("canvas"); canvas. width="200"; canvas. height="200";

Canvas. getContext(’2d’).drawImage(o, 0, 0,200, 150); content. append(canvas);

}

Теперь по нажатии кнопки из текущей видеокартинки будет создана фотография на основе элемента <canvas>, которая затем немедленно размещается на странице (рис. 95). Естественно, полученное изображение можно затем отправлять на сервер, используя это, например, в сервисе регистрации в какой-либо социальной сети и т. д.

Рис. 95. Домашняя фотостудия из десятка строчек кода

Для обмена медиаконтентом, общения, организации видеочата и тому подобных действий нужно организовать передачу данных в рамках пирингового взаимодействия. Такими средствами протокол располагает, за это отвечает другая важная составляющая — PeerConnection API, но вот ее реализация, даже в самых последних версиях браузеров еще довольно далека до состояния, пригодного к демонстрации. Инициация взаимодействия происходит по следующей схеме:

- На стороне первого участника создается объект RTCPeerCon-nection:

PeerConnection = new RTCPeerConnection({

"iceServers": [{"url": "stun:stun. l.google. com:19302"}] };);

Параметром (необязательным) конструктора служит объект — описание сервера.

- С объектом пир соединения связывается медиапоток:

PeerConnection. addStream(stream);

- Объект отправляет через сервер запрос на соединение второму участнику методом createOffer, посылая ему дескриптор сессии. На этом этапе сервер еще участвует во взаимодействии, потом необходимость в нем отпадет.

- Второй участник (Remote Peer), в свою очередь, с помощью своего объекта RTCPeerConnection методом createAnswer отправляет через сервер ответ первому клиенту.

- P2P-соединение установлено.

Далее происходит P2P-обмен медиаконтентом, в подробности организации которого мы вдаваться не будем хотя бы потому, что сама технология еще довольно сыра и подвержена изменениям. Вместо этого предлагаю ознакомиться с ее пусть несколько «костыльной», но работающей реализацией на сайте Http://apprtc. appspot. com. Нужно зайти по указанному адресу, разрешить доступ к своей камере и микрофону. Если с вашем браузере все в порядке, будет сгенерирована ссылка, открыв которую в другом окне (а лучше вообще на другом устройстве), можно спокойно поболтать с самим собой.

Честно говоря, мне кажется, что технология WebRTC является самой перспективной из всего множества новшеств семейства HTML5. Сейчас про нее говорят как про «убийцу скайпа», но, по-моему, функциями видеопейджера перспективы WebRTC не ограничиваются. Впрочем, не буду писать высокопарные фразы про рухнувшие барьеры и невиданный уровень коммуникабельности — мы все скоро сами увидим.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *