WebRTC

Константин Ершов,frontend meetup, Ярославль, 25.03.2015

Real Time Communication

Краткая история

Краткая история

Краткая история

Краткая история

WebRTC

Принципы WebRTC

- open source

- стандартизированное API

- реализация в веб-браузерах

- эффективность по сравнению с существующими технологиями

WebRTC APIs

- MediaStream (getUserMedia)

- RTCPeerConnection

- RTCDataChannel

Получение медиа-потока

navigator.getUserMedia( {audio: true, video: true}, //constraints function(mediaStream){ //callback var src = window.URL.createObjectURL(mediaStream); document.getElementById('myVideo').src = src; }, function(err){ //errback console.error(err); });

Получение медиа-потока

navigator.getUserMedia( {audio: true, video: true}, //constraints function(mediaStream){ //callback var src = window.URL.createObjectURL(mediaStream); document.getElementById('myVideo').src = src; }, function(err){ //errback console.error(err); });

Получение медиа-потока

navigator.getUserMedia( {audio: true, video: true}, //constraints function(mediaStream){ //callback var src = window.URL.createObjectURL(mediaStream); document.getElementById('myVideo').src = src; }, function(err){ //errback console.error(err); });

Получение медиа-потока

navigator.getUserMedia( {audio: true, video: true}, //constraints function(mediaStream){ //callback var src = window.URL.createObjectURL(mediaStream); document.getElementById('myVideo').src = src; }, function(err){ //errback console.error(err); });

Что можно делать с потоком?

- Анализ, обработка

- Передача через RTCPeerConnection

Обработка аудио

Audio Context (Web Audio API)

Примеры обработки аудио

- http://webaudiodemos.appspot.com/

- http://webaudioplayground.appspot.com/

- https://github.com/Dinahmoe/tuna - пачка гитарных эффектов =)

Обработка видео

Получение кадраvar video = document.getElementById('myVideo'), canvas = document.createElement('canvas'), context = canvas.getContext('2d'), width = 640, height = 480;

setInterval(function(){ context.drawImage(video, 0, 0, width, height); var pngData = canvas.toDataURL(); // do something with ’data:image/png;base64,<base64_data>’

}, 1000/15);

Примеры обработки видео

- https://github.com/auduno/headtrackr/

- https://github.com/idevelop/ascii-camera

Что можно делать с потоком?

- Анализ, обработка

- Передача через RTCPeerConnection

RTCPeerConnection

Информация для установки соединения

- offer/answer (информация о медиаданных, их типе и используемых кодеках)

- ice candidates (инфрмация о интерфейсах и портах для установки p2p соединения)

Порядок установки соединения

offer

answer

ice candidates

Порядок установки соединения

offer

signaling server

answer

ice candidates

signaling signaling

media

NAT

signaling signaling

NAT

NATNAT

signaling signaling

stun

media

stun

NATNAT

signaling signaling

turnmedia

turn

Код

var pc = new RTCPeerConnection({iceServers: [...]});navigator.getUserMedia({audio: true, video: true}, function(stream){ pc.addStream(stream); pc.createOffer(function(offer){ pc.setLocalDescription(offer); signalingChannel.send("offer", JSON.stringify({ offer })) }); pc.onicecandidate = function(event){/*send ice to signalingChannel*/};

pc.onaddstream = function (evt) {remoteVideoTag.src = URL.createObjectURL(evt.stream);};}, console.error);

signalingChannel.on("answer", function(answer){ pc.setRemoteDescription(new RTCSessionDescription(answer));};

signalingChannel.on("icecandidate", function(iceCandidate){ pc.addIceCandidate(new RTCIceCandidate(iceCandidate));};

Исходящий вызов

var pc;signalingChannel.onoffer = function(sdpOffer){ pc = new RTCPeerConnection({iceServers: [...]}); navigator.getUserMedia({audio: true, video: true}, function(stream){ pc.addStream(stream); pc.setRemoteDescription(new RTCSessionDescription(sdpOffer), function(){ pc.createAnswer(function(answer){ pc.setLocalDescription(answer); signalingChannel.send("answer", JSON.stringify({ answer })) }) });

pc.onicecandidate = function(event){/*send ice to signalingChannel*/}; pc.onaddstream = function (evt) {remoteVideoTag.src = URL.createObjectURL(evt.stream);}; }, console.error);};

signalingChannel.on("icecandidate", function(iceCandidate){ pc.addIceCandidate(new RTCIceCandidate(iceCandidate));};

Входящий вызов

RTCDataChannel

Особенности

- возможность одновременного использования нескольких каналов

- возможность расстановки приоритетов

- надежная и ненадежная семантика доставки

- встроенная система безопасности (DTLS) и контроль перегрузки

- возможность использования с видео и без видео

RTCDataChannel

var pc = new RTCPeerConnection({}, { optional: [{RtpDataChannels: true}]});

var channel = pc.createDataChannel("sendDataChannel", { reliable: false});

channel.send(JSON.stringify({}));

RTCDataChannel

var pc = new RTCPeerConnection({}, { optional: [{RtpDataChannels: true}]});var channel;pc.ondatachannel = function(event){ channel = event.channel; channel.onmessage = function(event){ //handle message }};

Инструменты разработчика

- chrome://webrtc-internals

- opera://webrtc-internals

- about:webrtc

Поддержка браузерами

26+

29+

18+

22+

Материалы

- http://www.html5rocks.com/en/tutorials/webrtc/basics/

- http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/

- https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection

- https://www.webrtc-experiment.com/