WebRTC overview

WebRTC is a new milestone in the evolution of the web. This technology allows us to quickly create real-time communication applications using HTML5 and JavaScript. You can develop your own peer-to-peer video chat in just 15 minutes. WebRTC is very flexible, you can make calls to another networks that using offer/answer model, for example SIP protocol.

Transcript

1. Real-time communication between browsers WebRTC
2. Inbitec | Georgiy Podsvetov WebRTC is a new front in the long war for an open and unencumbered web Brendan Eich 2
3. Inbitec | Georgiy Podsvetov WebRTC and HTML5 could enable the same transformation for real time that the original browser did for information Phil Endholm 3
4. Web RTC Inbitec | Georgiy Podsvetov 4
5. Inbitec | Georgiy Podsvetov 5
6. Inbitec | Georgiy Podsvetov 6 Your grandmother doesn't has a computer, is it?
7. Inbitec | Georgiy Podsvetov 7 Call her on TV In the near future
8. Inbitec | Georgiy Podsvetov Media Streams PeerConnection DataChannels 8
9. Inbitec | Georgiy Podsvetov Browser A Server Browser B MEDIA 9
10. Inbitec | Georgiy Podsvetov Media access navigator.getUserMedia( { audio: true, video: true }, onSuccess, onError ); 10
11. 11 Stream processing var localStream; var onSuccess = function(stream) { localStream = stream; var v = URL.createObjectURL(stream); localVideo.src = v; } 11 Inbitec | Georgiy Podsvetov
12. 12 New Peer Connection var pc = new RTCPeerConnection({ iceServers: [] }); 12 Inbitec | Georgiy Podsvetov
13. Inbitec | Georgiy Podsvetov Create offer pc.addStream(localStream); pc.createOffer( function(offer){ pc.setLocalDescription(offer); sendToTarget(offer); }, onError ); 13
14. Inbitec | Georgiy Podsvetov Set remote description pc.addStream(localStream); offerSD = new RTCSessionDescription(offer); pc.setRemoteDescription(offerSD); 14
15. Inbitec | Georgiy Podsvetov Create answer pc.createAnswer( function(answer){ pc.setLocalDescription(answer); sendToTarget(answer); }, onError ); 15
16. Inbitec | Georgiy Podsvetov Transfer candidates pc.onicecandidate = function(evt){ if (!evt.candidate) { return; } sendToTarget(evt.candidate); }; 16
17. Inbitec | Georgiy Podsvetov Display remote stream pc.onaddstream = function(event){ var stream = event.stream; var v = URL.createObjectURL(stream); remoteVideo.src = v; }; 17
18. Inbitec | Georgiy Podsvetov 18
19. Inbitec | Georgiy Podsvetov 19 Media Streams
20. Inbitec | Georgiy Podsvetov MediaStreamTrack (Video) MediaStreamTrack (Audio) Left Channel Right Channel <video> PeerConnection MediaStream INPUT OUTPUT 20
21. Inbitec | Georgiy Podsvetov 21 MediaStream • audioTracks [MediaStreamTrackList] • videoTracks [MediaStreamTrackList] • label [String] – unique identifier stop() – local MediaStream only
22. Inbitec | Georgiy Podsvetov 22 MediaStreamTrack • label – unique identifier • kind – “audio” or “video” • enabled – true | false • readyState – LIVE | MUTED | ENDED
23. Inbitec | Georgiy Podsvetov 23 MediaStreamList MediaStream MediaStreamTrackList MediaStreamTrack
24. 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
25. Inbitec | Georgiy Podsvetov 25
26. Inbitec | Georgiy Podsvetov Peer-to-peer Data API 26
27. Inbitec | Georgiy Podsvetov Create new DataChannel var channel = pc.createDataChannel(“Name”); 27
28. Inbitec | Georgiy Podsvetov Sending data channel.send(someData); 28
29. Inbitec | Georgiy Podsvetov Receiving data channel.onmessage = function(event) { console.log( event.data ); } 29
30. 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
31. Inbitec | Georgiy Podsvetov 31
32. 32 Inbitec | Georgiy Podsvetov Browser A Server Browser B 32 N A T N A T STUN ICE ICE
33. Inbitec | Georgiy Podsvetov 33 Session Description Protocol (SDP) http://tools.ietf.org/html/rfc3264 http:// bit.ly/UgdLpt All about Offer/Answer
34. 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
35. Inbitec | Georgiy Podsvetov 35 Interactive Connectivity Establishment ICE http://tools.ietf.org/html/rfc5245 http:// bit.ly/SYEWap
36. 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
37. Inbitec | Georgiy Podsvetov 37 Near future Standardization of audio / video codecs Device detection Video resolution Switch camera Media recorder Data channel API improvements
38. Inbitec | Georgiy Podsvetov 38 WebRTC alliance
39. Inbitec | Georgiy Podsvetov 39 http:// bit.ly/Z63rrd CU-RTC-Web
40. Inbitec Georgiy Podsvetov podsvetov@outlook.com 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