Making video chat a feature

WebRTC has been promising a glorious future of peer to peer communications since its initial release back in 2011. As always the reality is a bit more difficult than it sounded. We'll take a look at what WebRTC gives you as well as, importantly, what it leaves out. We'll take a look at the hurdles involved in implementing WebRTC. Finally we'll see how we can combine WebRTC services with Web Components to realise that glorious future with very little effort.

Transcript

1. MAKING VIDEO CHAT A FEATURE
2. Phil Nash @philnash http:/ /philna.sh philnash@twilio.com
3. WEB TECHNOLOGY IS COOL
4. WEB TECHNOLOGY IS HARD
5. WEBRTC IS COOL
6. WEBRTC IS HARD
8. < t w i l i o - v i d e o > < / t w i l i o - v i d e o >
9. WHAT IS WEBRTC?
10. WEB REAL TIME COMMUNICATION
11. REALLY REAL TIME
12. PEER TO PEER
13. VIDEO, AUDIO AND DATA
15. SUPPORT
18. MOBILE SUPPORT
20. APIS
21. APIs • getUserMedia • RTCPeerConnection • RTCDataChannel
22. getUserMedia
23. WHAT WEBRTC DOESN'T DO
24. PRESENCE
25. SIGNALLING
26. NAT TRAVERSAL
27. NAT Traversal • ICE protocol • STUN/TURN servers
28. “But I just want a video chat!”
29. PROBLEMS
30. BROWSER UPDATES
31. BROWSER INTEROP
32. PRIMITIVES
33. DEMO
34. CAN IT BE BETTER?
35. COMPONENTS
36. DROP IN FUNCTIONALITY
37. ENCAPSULATES BEHAVIOUR
38. A HIGHER ABSTRACTION
39. < t w i l i o - v i d e o > < / t w i l i o - v i d e o >
40. I <3 BROWSERS
41. WEB COMPONENTS
42. TEMPLATES
43. Templates < t e m p l a t e i d = " t w i l i o - v i d e o - t e m p l a t e " > . . . < / t e m p l a t e > 0 1 . 0 2 . 0 3 .
44. HTML IMPORTS
45. HTML Imports < l i n k r e l = " i m p o r t " h r e f = " / v i d e o - c h a t . h t m l " >
46. CUSTOM ELEMENTS
47. Custom Elements v a r T w i l i o V i d e o = d o c u m e n t . r e g i s t e r E l e m e n t ( " t w i l i o - v i d e o " , { p r o t o t y p e : O b j e c t . c r e a t e ( H T M L E l e m e n t . p r o t o t y p e ) } ) ; 0 1 . 0 2 . 0 3 .
48. SHADOW DOM
49. Shadow DOM v a r s h a d o w R o o t = t h i s . c r e a t e S h a d o w R o o t ( ) ; s h a d o w R o o t . a p p e n d C h i l d ( h t m l ) ; 0 1 . 0 2 .
50. SUPPORT
52. POLYFILLS!
54. DEMO
55. IN CONCLUSION
56. WEBRTC IS A TECHNOLOGY
57. VIDEO CHAT IS AWESOME
58. VIDEO CHAT IS AWESOME
59. WEB COMPONENTS ARE AWESOME
60. Use code PNASH20 for 20% off tickets
61. Thanks! @philnash http:/ /philna.sh philnash@twilio.com