Медиавозможности html5. webrtc
TRANSCRIPT
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/