Save 37% off PRO during our Black Friday Sale! »

Making video chat a feature

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.

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

April 14, 2016
Tweet

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

  7. None
  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

  14. None
  15. SUPPORT

  16. None
  17. None
  18. MOBILE SUPPORT

  19. None
  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

  51. None
  52. POLYFILLS!

  53. None
  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