Speaker: Phil Nash Language: English Traditionally browsers communicate via servers, but what if they could speak to each other? WebRTC is a small set of APIs that make peer to peer communication possible between browsers and mobile applications. Video, audio and data can flow from browser to browser, opening up a new set of possibilities for modern communications. We'll take a look at what WebRTC gives you and, importantly, what it leaves out. We'll take a look at implementing a simple chat application and speculate over more complicated use cases and examples. 4Developers: http://4developers.org.pl/pl/

1. WHATRTC?

2. Phil Nash
@philnash
http://philna.sh
philnash@twilio.com

3. CLOUD
COMMUNICATIONS

4. (+48) 73 248 31 45

5. TECH CHECK

6. Today
• Communication
• Introduction to WebRTC
• Implementing WebRTC
• Applications of WebRTC

7. COMMUNICATION

8. CONTEXT

11. POWERED BY
WEBRTC

12. WHAT IS
WEBRTC?

13. WEB REAL TIME
COMMUNICATION

14. REALLY REAL
TIME

15. PEER TO PEER

16. SUPPORT

19. MOBILE
SUPPORT

21. APIs
• getUserMedia
• RTCPeerConnection
• RTCDataChannel

22. WHAT DOES
WEBRTC DO?

23. Get Video

24. AWESOME
RIGHT?

25. HOW DOES IT
WORK?

26. Meet Alice and Bob

27. PRESENCE

28. You need a server

29. Alice logs on

30. Bob logs on

31. Alice knows Bob is there

32. NAT TRAVERSAL

34. ICE ICE BABY

35. ICE ICE Baby
• ICE — Interactive Connectivity Establishment
• NAT — Network Address Translation
• STUN — Session Traversal Utilities for NAT
• TURN — Traversal Using Relays around NAT

36. Hidden behind NAT

38. Alice gets ICE candidates

39. Bob gets ICE candidates

40. SIGNALLING

41. Alice sends candidates to Bob

42. Bob sends candidates to Alice

43. USER MEDIA

44. getUserMedia

45. Media offer/answer

46. Connection!

47. TURN Connection!

48. Summary
• Presence
• NAT Traversal
• User Media
• Signalling

49. OTHER WEBRTC
IDEAS

50. Waggledance
Distribute bandwidth amongst video viewers
• Example: http://waggle.monkeypatch.me/
• Code: https://github.com/tOkeshu/waggle.js
• Video: https://www.youtube.com/watch?
v=pyIIkUV3moM

51. Webtorrent
Streaming torrent client for node and the browser
• Code: http://webtorrent.io/
• npm:
https://www.npmjs.org/package/webtorrent

52. Gaming
• sLive gaming against friends
• CubeSlam: https://www.cubeslam.com/

55. Remember those texts?
Call

56. MayDay results
Launched September 2013, by April 2014
• 44 advisors sang happy birthday
• 648 advisors had been serenaded
• 35 advisors had received marriage proposals
• 3 customers asked for a bedtime story
• 1 customer asked for help with a particularly
difficult level of Angry Birds

57. Resources
• http://bit.ly/stunturn
• https://github.com/philnash/video-chat
• https://github.com/philnash/whatrtc

59. NASH20

60. Help me!
On a scale of 0 to 10, how likely is it that you
would recommend this talk to a friend or
colleague?
(+48) 73 248 31 45

61. ONWARD!

62. Thanks!
@philnash
http://philna.sh
philnash@twilio.com