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="📷" 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 не ограничиваются. Впрочем, не буду писать высокопарные фразы про рухнувшие барьеры и невиданный уровень коммуникабельности — мы все скоро сами увидим.
Добавить комментарий