WebRTC #1 — Знакомимся



    Многие уже слышали о проекте WebRTC, некоторые даже используют его (или пытаются применять в существующих проектах), а кто-то злобно потирает руки, предвкушая постепенную расправу со Skype и Flash.

    Погуглив в Хабре (хе-хе) я почему-то не нашел статей, которые углублялись в техническую сторону WebRTC, показывали бы примеры его использования.

    Что же, я попытаюсь порадовать вас схемками, кодом. В общем, именно тем, что всем по вкусу. Так пройдем же под кат, мой любимый читатель.

    Что это?


    WebRTC — проект, который позволяет получать медиаданные (аудио и видео) через браузер и устанавливать Peer-to-Peer соединение между двумя и более клиентами, через которое могут передаваться обычные данные и медиапотоки.

    По сути, WebRTC являет собой:
    1. Media Streams (getUserMedia).
    2. Peer Connection.

    Ниже я вкратце опишу эти элементы, но подробное описание я все же хочу оставить на две следующие части статьи.

    Media Streams


    Media Streams — API, позволяющий получить доступ к камере и микрофону через браузер без каких-либо плагинов и флеша.

    Следуя WebRTC Public API, нам нужно использовать метод getUserMedia у глобального объекта navigator.
    Передавать стоит три параметра:
    — объект со списком того, что нам нужно (аудио/видео)
    — success callback
    — error callback

    И пока что есть необходимость в костылях из-за наличия префиксов в различных браузерах:

    var getUserMedia;
    var browserUserMedia =	navigator.webkitGetUserMedia	||	// WebKit
    						navigator.mozGetUserMedia	||	// Mozilla FireFox
    						navigator.getUserMedia;			// 2013...
    if ( !browserUserMedia ) throw 'Your browser doesn\'t support WebRTC';
    
    getUserMedia = browserUserMedia.bind( navigator );
    
    getUserMedia(
    	{
    		audio: true,
    		video: true
    	},
    	function( stream ) {
    		console.log( stream );
    	},
    	function( err ) {
    		console.log( err );
    	}
    );
    

    Браузер мило попросит разрешения.



    Ура! Мы получили Stream-объект с аудио и видео. И что же с ним делать?
    Можем показать это дело юзеру используя html5 тег «video».

    <video id="video" autoplay></video>
    

    var videoElement = document.getElementById( 'video' );
    videoElement.src = URL.createObjectURL( stream );
    

    И немножко сахара. Теперь можно смело применять html5 фильтры (webkit) к видео элементу.

    #video {
    	-webkit-filter: sepia(1);
    }
    

    Клево, не правда ли?

    Peer Connection


    Peer Connection — это тот самый API, который позволяет установить Peer-to-Peer соединение между браузерами.

    Ниже представлена упрощенная схема соединения между двумя клиентами.


    — Первый клиент отправляет так называемый Offer второму клиенту через сервер (PeerConnection Observer).
    — Второй клиент (Remote Peer) отправляет через сервер ответ первому клиенту.
    — Устанавливается P2P соединение между клиентами.

    Примечательно, что в дальнейшем для работы такого соединения сервер становится опциональным. Т.е. после его выключения данные все также будут передаваться. Дальнейшее участие PeerConnection Observer'а нужно для правильного закрытия соединения, добавления участников в поток и т.п.

    В спецификации указан конструктор RTCPeerConnection, но пока что мы вынуждены использовать префиксы для различных браузеров:

    var PeerConnection =	webkitRTCPeerConnection	||	// WebKit
    						mozRTCPeerConnection	||	// Mozilla FireFox
    						RTCPeerConnection;		// 2013...
    if ( !PeerConnection ) throw 'Your browser doesn\'t support WebRTC';
    

    Здесь пора бы уже и 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, к примеру) проекты. Да и интересно же, правда?

    Дальше — больше


    Заканчивая первую часть цикла статей, хотелось бы составить примерный план:
    1. WebRTC #1 — Знакомимся
    2. WebRTC #2 — Media Streams
    3. WebRTC #3 — Peer Connection: Server Side
    4. WebRTC #4 — Peer Connection: Client Side
    5.…

    P.S. если ожидали больше материала, сильно не ругайтесь. Тема мне очень интересна, поэтому я очень заинтересован продолжить цикл, одновременно углубляясь в нее.

    UPD: спасибо GeorP и egobrain за замечания.
    Поделиться публикацией

    Комментарии 12

      +6
      Что-то у вас с FF устаревшая картина. В FF 17 включен getuserMedia (с префиксом). В FF nightly есть PeerConnection.
      Про Opera забыли, там с 12 версии getuserMedia работает.
      Про microsoft и CU-RTC-WEB ни слова не сказали.
      Вы как бы еще одну фишку WebRTC замолчали — Data Channels.
      Смысл было приводить код RTCPeerConnection который ничего не делает?
        +2
        Интересная тема. Вам пожелание: осветить такой момент, как установление p2p соединения. Как браузеры будут это делать? Полагаться на какие-то сервисы ОС или сами? Как осуществляется NAT traversal?
          +1
          Всегда напрягали куски повторяющегося кода. Темболее с присваиванием переменной. Может лучше делать так:
          var getUserMedia;
          var browserUserMedia = navigator.webkitGetUserMedia ||  // WebKit
                                 navigator.mozGetUserMedia    ||  // Mozilla FireFox
                                 navigator.getUserMedia;          // 2013...
          if(!browserUserMedia) throw 'Your browser doesn\'t support WebRTC';
          getUserMedia = browserUserMedia.bind(navigator);
          

          и
          var PeerConnection = webkitRTCPeerConnection ||   // WebKit
                               mozRTCPeerConnection    ||   // Mozilla FireFox
                  	     RTCPeerConnection;           // 2013...
          if(!PeerConnection) throw 'Your browser doesn\'t support WebRTC';
          
          

          ???
            +1
            Спасибо, поправил.
            0
            Большое спасибо Вам за проделанную работу. Давно хотел узнать больше про Web RTC, но лень было лазить по англоязычным ресурсам
              0
              Было бы еще круто, если бы это видео можно было гонять не только peer-to-peer, но и на сервер.
              У меня в текущем проекте, например, запланирована фича, которая требует именно этого.
                0
                Есть open source реализация WebRTC на C++. Ставите на сервере, добавляете в RTCPeerConnection еще один узел и все ок.
                  0
                  Это, конечно, круто. Но хотелось бы чего-то более высокоуровневого. Поверх HTTP, например.
                0
                спасибо, интересно, хотим добавить совместимость в QuickBlox чат сервер, как только будет более-менее стабильно
                  +1
                  не хватает демо
                    0
                    Только учитывайте, что для полноценной работы нужен еще TURN сервер (релей), потому что по статистике до 10% пользователей живут за NATом, который не позволит UDP hole punching.
                    А про p2p компонент лучше читать на сайте libjingle, webrtc использует именно его.
                      0
                      подтверждаю, мы на QuickBlox для видеочата подняли свой TURN сервер, одним STUN обойтись не получится как раз из-за этих 10%. Еще не знаю как насчет WebRTC, но в нашем случае помогло понижать битрейт для звукового потока, чтобы достичь вменяемой скорости передачи

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое