WebRTC overview - Speaker Deck

Slide 1

Slide 1 text

Real-time communication between browsers WebRTC

Slide 2

Slide 2 text

Inbitec | Georgiy Podsvetov WebRTC is a new front in the long war for an open and unencumbered web Brendan Eich 2

Slide 3

Slide 3 text

Inbitec | Georgiy Podsvetov WebRTC and HTML5 could enable the same transformation for real time that the original browser did for information Phil Endholm 3

Slide 4

Slide 4 text

Web RTC Inbitec | Georgiy Podsvetov 4

Slide 5

Slide 5 text

Inbitec | Georgiy Podsvetov 5

Slide 6

Slide 6 text

Inbitec | Georgiy Podsvetov 6 Your grandmother doesn't has a computer, is it?

Slide 7

Slide 7 text

Inbitec | Georgiy Podsvetov 7 Call her on TV In the near future

Slide 8

Slide 8 text

Inbitec | Georgiy Podsvetov Media Streams PeerConnection DataChannels 8

Slide 9

Slide 9 text

Inbitec | Georgiy Podsvetov Browser A Server Browser B MEDIA 9

Slide 10

Slide 10 text

Inbitec | Georgiy Podsvetov Media access navigator.getUserMedia( { audio: true, video: true }, onSuccess, onError ); 10

Slide 11

Slide 11 text

11 Stream processing var localStream; var onSuccess = function(stream) { localStream = stream; var v = URL.createObjectURL(stream); localVideo.src = v; } 11 Inbitec | Georgiy Podsvetov

Slide 12

Slide 12 text

12 New Peer Connection var pc = new RTCPeerConnection({ iceServers: [] }); 12 Inbitec | Georgiy Podsvetov

Slide 13

Slide 13 text

Inbitec | Georgiy Podsvetov Create offer pc.addStream(localStream); pc.createOffer( function(offer){ pc.setLocalDescription(offer); sendToTarget(offer); }, onError ); 13

Slide 14

Slide 14 text

Inbitec | Georgiy Podsvetov Set remote description pc.addStream(localStream); offerSD = new RTCSessionDescription(offer); pc.setRemoteDescription(offerSD); 14

Slide 15

Slide 15 text

Inbitec | Georgiy Podsvetov Create answer pc.createAnswer( function(answer){ pc.setLocalDescription(answer); sendToTarget(answer); }, onError ); 15

Slide 16

Slide 16 text

Inbitec | Georgiy Podsvetov Transfer candidates pc.onicecandidate = function(evt){ if (!evt.candidate) { return; } sendToTarget(evt.candidate); }; 16

Slide 17

Slide 17 text

Inbitec | Georgiy Podsvetov Display remote stream pc.onaddstream = function(event){ var stream = event.stream; var v = URL.createObjectURL(stream); remoteVideo.src = v; }; 17

Slide 18

Slide 18 text

Inbitec | Georgiy Podsvetov 18

Slide 19

Slide 19 text

Inbitec | Georgiy Podsvetov 19 Media Streams

Slide 20

Slide 20 text

Inbitec | Georgiy Podsvetov MediaStreamTrack (Video) MediaStreamTrack (Audio) Left Channel Right Channel PeerConnection MediaStream INPUT OUTPUT 20

Slide 21

Slide 21 text

Inbitec | Georgiy Podsvetov 21 MediaStream • audioTracks [MediaStreamTrackList] • videoTracks [MediaStreamTrackList] • label [String] – unique identifier stop() – local MediaStream only

Slide 22

Slide 22 text

Inbitec | Georgiy Podsvetov 22 MediaStreamTrack • label – unique identifier • kind – “audio” or “video” • enabled – true | false • readyState – LIVE | MUTED | ENDED

Slide 23

Slide 23 text

Inbitec | Georgiy Podsvetov 23 MediaStreamList MediaStream MediaStreamTrackList MediaStreamTrack

Slide 24

Slide 24 text

Inbitec | Georgiy Podsvetov 24 remoteStreams: MediaStreamList 0: MediaStream label: "hbeExA…" readyState: 1 videoTracks: MediaStreamTrackList 0: MediaStreamTrack enabled: true kind: "video" label: "hbeExA0…" audioTracks: MediaStreamTrackList RTCPeerConnection

Slide 25

Slide 25 text

Inbitec | Georgiy Podsvetov 25

Slide 26

Slide 26 text

Inbitec | Georgiy Podsvetov Peer-to-peer Data API 26

Slide 27

Slide 27 text

Inbitec | Georgiy Podsvetov Create new DataChannel var channel = pc.createDataChannel(“Name”); 27

Slide 28

Slide 28 text

Inbitec | Georgiy Podsvetov Sending data channel.send(someData); 28

Slide 29

Slide 29 text

Inbitec | Georgiy Podsvetov Receiving data channel.onmessage = function(event) { console.log( event.data ); } 29

Slide 30

Slide 30 text

Inbitec | Georgiy Podsvetov Remote peer create new channel pc.ondatachannel = function(event) { var channel = event.channel; channel.onmessage = function(event) { //… } channel.onclose = function(event) { //… } } 30

Slide 31

Slide 31 text

Inbitec | Georgiy Podsvetov 31

Slide 32

Slide 32 text

32 Inbitec | Georgiy Podsvetov Browser A Server Browser B 32 N A T N A T STUN ICE ICE

Slide 33

Slide 33 text

Inbitec | Georgiy Podsvetov 33 Session Description Protocol (SDP) http://tools.ietf.org/html/rfc3264 http:// bit.ly/UgdLpt All about Offer/Answer

Slide 34

Slide 34 text

Inbitec | Georgiy Podsvetov 34 JavaScript Session Establishment Protocol (JSEP) http://tools.ietf.org/html/draft-ietf-rtcweb-jsep-02 http:// bit.ly/UXuC37 Control the signaling plane of a multimedia session

Slide 35

Slide 35 text

Inbitec | Georgiy Podsvetov 35 Interactive Connectivity Establishment ICE http://tools.ietf.org/html/rfc5245 http:// bit.ly/SYEWap

Slide 36

Slide 36 text

Inbitec | Georgiy Podsvetov 36 Traversal Using Relays around NAT (TURN) RFC5289: http://bit.ly/12cW3cd Session Traversal Utilities for NAT (STUN) RFC5766: http://bit.ly/RtbU4H

Slide 37

Slide 37 text

Inbitec | Georgiy Podsvetov 37 Near future Standardization of audio / video codecs Device detection Video resolution Switch camera Media recorder Data channel API improvements

Slide 38

Slide 38 text

Inbitec | Georgiy Podsvetov 38 WebRTC alliance

Slide 39

Slide 39 text

Inbitec | Georgiy Podsvetov 39 http:// bit.ly/Z63rrd CU-RTC-Web

Slide 40

Slide 40 text

Inbitec Georgiy Podsvetov [email protected] http://www.webrtc.org http://www.w3.org/TR/webrtc/ Presentation based on Draft 21 August 2012 http://bit.ly/UggEGR slides online: http://sdrv.ms/Rv0M7b