WhatRTC? Everything you need to know about modern web communications.

Traditionally browsers and mobile applications 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, from app to app, 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.

--

Some links from the slides:

Blog post on getting started:
https://www.twilio.com/blog/2014/12/set-phasers-to-stunturn-getting-started-with-webrtc-using-node-js-socket-io-and-twilios-nat-traversal-service.html
https://github.com/philnash/video-chat

Waggledance:
http://waggle.monkeypatch.me/
https://github.com/tOkeshu/waggle.js
https://www.youtube.com/watch?v=pyIIkUV3moM

WebTorrent
http://webtorrent.io/

CubeSlam
https://www.cubeslam.com/

Twilio Client
https://www.twilio.com/client

Transcript

1. WHATRTC?
2. Phil Nash @philnash http:/ /philna.sh philnash@twilio.com
3. CLOUD COMMUNICATIONS
4. (+48) 79 944 92 68
5. TECH CHECK
6. Today •  Communication •  Introduction to WebRTC •  Implementing WebRTC •  Applications of WebRTC
7. COMMUNICATION
8. CONTEXT
10. MOBILE WITH A HUMAN TOUCH
13. POWERED BY WEBRTC
14. WHAT IS WEBRTC?
15. WEB REAL TIME COMMUNICATION
17. REALLY REAL TIME
18. PEER TO PEER
19. HOLD UP!
20. WEBRTC?
21. AT A MOBILE EVENT?
22. SUPPORT
25. MOBILE SUPPORT
27. APIs •  MediaStream •  RTCPeerConnection •  RTCDataChannel
28. WHAT DOES WEBRTC DO?
29. Get Video
30. AWESOME RIGHT?
31. HOW DOES IT WORK?
32. Meet Alice and Bob
33. PRESENCE
34. You need a server
35. Alice logs on
36. Bob logs on
37. Alice knows Bob is there
38. NAT TRAVERSAL
40. ICE ICE BABY
41. ICE ICE Baby •  ICE — Interactive Connectivity Establishment •  NAT — Network Address Translation •  STUN — Session Traversal Utilities for NAT •  TURN — Traversal Using Relays around NAT
42. Hidden behind NAT
44. Alice gets ICE candidates
45. Bob gets ICE candidates
46. SIGNALLING
47. Alice sends candidates to Bob
48. Bob sends candidates to Alice
49. Media offer/answer
50. Connection!
51. TURN Connection!
52. OTHER WEBRTC IDEAS
53. 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
54. Webtorrent Streaming torrent client for node and the browser •  Code: http:/ /webtorrent.io/ •  npm: https:/ /www.npmjs.org/package/webtorrent
55. Gaming •  sLive gaming against friends •  CubeSlam: https:/ /www.cubeslam.com/
58. Remember those texts? Call
59. 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
60. MOBILE WITH A HUMAN TOUCH
61. Resources •  http:/ /bit.ly/stunturn •  https:/ /github.com/philnash/video-chat •  https:/ /github.com/philnash/whatrtc Image credits •  Alone on the Bench — Geraint Rowland
62. 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) 79 944 92 68
63. ONWARD!
64. Thanks! @philnash http:/ /philna.sh philnash@twilio.com