Ершов Константин о медиавозможностях, предоставляемым HTML5 - WebRTC. http://yarfrontend.ru/talks/html5-media/

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

2. Real Time Communication

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

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

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

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

7. WebRTC

8. Принципы WebRTC
- open source
- стандартизированное API
- реализация в веб-браузерах
- эффективность по сравнению с существующими
технологиями

9. WebRTC APIs
- MediaStream (getUserMedia)
- RTCPeerConnection
- RTCDataChannel

10. Получение медиа-потока
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);
}
);

11. Получение медиа-потока
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);
}
);

12. Получение медиа-потока
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);
}
);

13. Получение медиа-потока
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);
}
);

14. Что можно делать с потоком?
- Анализ, обработка
- Передача через RTCPeerConnection

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

16. Audio Context (Web Audio API)

17. Примеры обработки аудио
- http://webaudiodemos.appspot.com/
- http://webaudioplayground.appspot.com/
- https://github.com/Dinahmoe/tuna - пачка гитарных
эффектов =)

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

19. Получение кадра
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);

20. Примеры обработки видео
- https://github.com/auduno/headtrackr/
- https://github.com/idevelop/ascii-camera

21. Что можно делать с потоком?
- Анализ, обработка
- Передача через RTCPeerConnection

22. RTCPeerConnection

23. Информация для установки
соединения
- offer/answer (информация о медиаданных, их типе
и используемых кодеках)
- ice candidates (инфрмация о интерфейсах и портах
для установки p2p соединения)

24. Порядок установки соединения
offer
answer
ice candidates

25. Порядок установки соединения
offer
signaling server
answer
ice candidates

26. signaling signaling
media

27. NAT
signaling signaling
NAT

28. NATNAT
signaling signaling
stun
media
stun

29. NATNAT
signaling signaling
turn
media
turn

30. Код

31. 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));
};
Исходящий вызов

32. 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));
Входящий вызов

33. RTCDataChannel

34. Особенности
- возможность одновременного использования нескольких каналов
- возможность расстановки приоритетов
- надежная и ненадежная семантика доставки
- встроенная система безопасности (DTLS) и контроль перегрузки
- возможность использования с видео и без видео

35. RTCDataChannel
var pc = new RTCPeerConnection({}, {
optional: [{RtpDataChannels: true}]
});
var channel = pc.createDataChannel("sendDataChannel", {
reliable: false
});
channel.send(JSON.stringify({}));

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

37. Инструменты разработчика
- chrome://webrtc-internals
- opera://webrtc-internals
- about:webrtc

39. Поддержка браузерами
26+ 29+ 18+ 22+

41. Материалы
- 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/