Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AstriCon 2015: WebRTC: How it Works, and How it Breaks

WebRTC is an exciting new technology, perhaps the most exciting thing to happen to voice communication since the invention of Voice over IP. With WebRTC, we are no longer limited to a disjointed communication experience with poor quality audio on antiquated networks. Now we have the ability to put high-definition audio and video where it will have the most impact: right in line with the business processes that benefit the most from it.

This session will present an overview of how WebRTC works, reviewing both the network services that support it and the user-facing software that delivers it. We will look at how Asterisk can be used to give WebRTC additional capabilities that aren’t possible with browsers alone, and how to deploy Asterisk to get the most out of this powerful combination.

As with all new technology, however, there are rough edges. In the final part of this presentation, we will look at the common ways that WebRTC can break down, from technical deployment problems to user interface and design issues. These lessons are drawn from real-world experience deploying WebRTC over the last 3 years and multiple applications that are in production today.

  • Login to see the comments

AstriCon 2015: WebRTC: How it Works, and How it Breaks

  1. 1. WebRTC How it works How it breaks How we fixed it
  2. 2. CAN YOU SPEAK MAGIC? 2 Ben Klang
  3. 3. CAN YOU SPEAK MAGIC? 2 Ben Klang
  4. 4. CAN YOU SPEAK MAGIC? 2 Ben Klang
  5. 5. CAN YOU SPEAK MAGIC? 3
  6. 6. CAN YOU SPEAK MAGIC? 3 WebRTC
  7. 7. CAN YOU SPEAK MAGIC? 3 WebRTC How it works
  8. 8. CAN YOU SPEAK MAGIC? 3 WebRTC How it works How it breaks
  9. 9. CAN YOU SPEAK MAGIC? 3 WebRTC How it works How it breaks How we fixed it
  10. 10. CAN YOU SPEAK MAGIC? WHAT WEBRTC IS 4
  11. 11. CAN YOU SPEAK MAGIC? WHAT WEBRTC IS •Javascript access to Camera and Mic 4
  12. 12. CAN YOU SPEAK MAGIC? WHAT WEBRTC IS •Javascript access to Camera and Mic •High Quality Video & Audio Codecs 4
  13. 13. CAN YOU SPEAK MAGIC? WHAT WEBRTC IS •Javascript access to Camera and Mic •High Quality Video & Audio Codecs •Techniques for traversing NAT 4
  14. 14. CAN YOU SPEAK MAGIC? WHAT WEBRTC IS •Javascript access to Camera and Mic •High Quality Video & Audio Codecs •Techniques for traversing NAT •Peer-to-Peer 4
  15. 15. CAN YOU SPEAK MAGIC? WHAT WEBRTC IS •Javascript access to Camera and Mic •High Quality Video & Audio Codecs •Techniques for traversing NAT •Peer-to-Peer •A Data Channel 4
  16. 16. CAN YOU SPEAK MAGIC? WHAT WEBRTC IS •Javascript access to Camera and Mic •High Quality Video & Audio Codecs •Techniques for traversing NAT •Peer-to-Peer •A Data Channel •A Tool for Developers 4
  17. 17. CAN YOU SPEAK MAGIC? WHAT WEBRTC IS NOT 5
  18. 18. CAN YOU SPEAK MAGIC? WHAT WEBRTC IS NOT •…a Polished End-User Product 5
  19. 19. CAN YOU SPEAK MAGIC? WHAT WEBRTC IS NOT •…a Polished End-User Product •…required to interop…but may 5
  20. 20. CAN YOU SPEAK MAGIC? WHAT WEBRTC IS NOT •…a Polished End-User Product •…required to interop…but may •…the same thing to every application 5
  21. 21. CAN YOU SPEAK MAGIC? WHAT WEBRTC IS NOT •…a Polished End-User Product •…required to interop…but may •…the same thing to every application •…finished. 5
  22. 22. CAN YOU SPEAK MAGIC? WHAT WEBRTC IS NOT •…a Polished End-User Product •…required to interop…but may •…the same thing to every application •…finished. 5 But don’t sweat it
  23. 23. CAN YOU SPEAK MAGIC? Communication Topology 6
  24. 24. CAN YOU SPEAK MAGIC? 7 Alice BobThe Trapezoid
  25. 25. CAN YOU SPEAK MAGIC? 8 Alice BobThe Triangle
  26. 26. CAN YOU SPEAK MAGIC? 9 The WebRTC TriangleAlice Bob Signaling Media
  27. 27. CAN YOU SPEAK MAGIC? 9 The WebRTC TriangleAlice Bob Signaling Media
  28. 28. CAN YOU SPEAK MAGIC? WebRTC Infrastructure 10
  29. 29. CAN YOU SPEAK MAGIC? 11
  30. 30. CAN YOU SPEAK MAGIC? 11
  31. 31. CAN YOU SPEAK MAGIC? 11
  32. 32. CAN YOU SPEAK MAGIC? 11 http:// Signaling
  33. 33. CAN YOU SPEAK MAGIC? 11 http:// Signaling
  34. 34. CAN YOU SPEAK MAGIC? 11 http:// Signaling
  35. 35. CAN YOU SPEAK MAGIC? 11 http:// Signaling STUN & TURNNAT Traversal
  36. 36. CAN YOU SPEAK MAGIC? 11 http:// Signaling STUN & TURN SFU or MCU NAT Traversal Larger Multiparty Video Conferences
  37. 37. CAN YOU SPEAK MAGIC? 11 http:// Signaling Recording Conferencing PSTN Gateway STUN & TURN SFU or MCU NAT Traversal Larger Multiparty Video Conferences
  38. 38. CAN YOU SPEAK MAGIC? WEBRTC SIGNALING 12
  39. 39. CAN YOU SPEAK MAGIC? WEBRTC SIGNALING •Can be anything you like 12
  40. 40. CAN YOU SPEAK MAGIC? WEBRTC SIGNALING •Can be anything you like 12 http://
  41. 41. CAN YOU SPEAK MAGIC? WEBRTC SIGNALING •Can be anything you like 12 http://
  42. 42. CAN YOU SPEAK MAGIC? WEBRTC SIGNALING •Can be anything you like 12 http://
  43. 43. CAN YOU SPEAK MAGIC? WEBRTC SIGNALING •Can be anything you like 12 http://
  44. 44. CAN YOU SPEAK MAGIC? WEBRTC SIGNALING •Can be anything you like •Select based on application requirements 12 http://
  45. 45. CAN YOU SPEAK MAGIC? WEBRTC SIGNALING •Can be anything you like •Select based on application requirements •Integrate with existing or greenfield? 12 http://
  46. 46. CAN YOU SPEAK MAGIC? WEBRTC SIGNALING •Can be anything you like •Select based on application requirements •Integrate with existing or greenfield? •Federate? Or Not? 12 http://
  47. 47. CAN YOU SPEAK MAGIC? WEBRTC SIGNALING •Can be anything you like •Select based on application requirements •Integrate with existing or greenfield? •Federate? Or Not? •Anonymous or Real Names? 12 http://
  48. 48. CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC? 13 http://
  49. 49. CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC? 13 Alice http://
  50. 50. CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC? 13 Alice Bob http://
  51. 51. CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC? 13 H aveBob callm ehere! SDP:
 v=0o=alice20518 0 IN IP4 0.0.0.0 s=-t=0 0m =audio54609 RTP/SAVPF 109 Alice Bob http://
  52. 52. CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC? 13 H aveBob callm ehere! SDP:
 v=0o=alice20518 0 IN IP4 0.0.0.0 s=-t=0 0m =audio54609 RTP/SAVPF 109 Alice Bob http://
  53. 53. CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC? 13 H aveBob callm ehere! SDP:
 v=0o=alice20518 0 IN IP4 0.0.0.0 s=-t=0 0m =audio54609 RTP/SAVPF 109 Bob is at: SDP:
 v=0o=bob 19915 0 IN IP4 0.0.0.0 s=-t=0 0m =audio 61001 RTP/SAV PF 109 Alice Bob http://
  54. 54. CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC? 13 H aveBob callm ehere! SDP:
 v=0o=alice20518 0 IN IP4 0.0.0.0 s=-t=0 0m =audio54609 RTP/SAVPF 109 Bob is at: SDP:
 v=0o=bob 19915 0 IN IP4 0.0.0.0 s=-t=0 0m =audio 61001 RTP/SAV PF 109 Alice Bob http://
  55. 55. CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC? 13 H aveBob callm ehere! SDP:
 v=0o=alice20518 0 IN IP4 0.0.0.0 s=-t=0 0m =audio54609 RTP/SAVPF 109 Bob is at: SDP:
 v=0o=bob 19915 0 IN IP4 0.0.0.0 s=-t=0 0m =audio 61001 RTP/SAV PF 109 Alice Bob http://
  56. 56. CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC? 13 H aveBob callm ehere! SDP:
 v=0o=alice20518 0 IN IP4 0.0.0.0 s=-t=0 0m =audio54609 RTP/SAVPF 109 Bob is at: SDP:
 v=0o=bob 19915 0 IN IP4 0.0.0.0 s=-t=0 0m =audio 61001 RTP/SAV PF 109 Alice Bob http://
  57. 57. CAN YOU SPEAK MAGIC? ICE/STUN/TURN 14
  58. 58. CAN YOU SPEAK MAGIC? 15 ICE/STUN/TURN
  59. 59. CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC? 16 H aveBob callm ehere! SDP:
 v=0o=alice20518 0 IN IP4 0.0.0.0 s=-t=0 0m =audio54609 RTP/SAVPF 109 Bob is at: SDP:
 v=0o=bob 19915 0 IN IP4 0.0.0.0 s=-t=0 0m =audio 61001 RTP/SAV PF 109 Alice Bob http://
  60. 60. CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC? 16 H aveBob callm ehere! SDP:
 v=0o=alice20518 0 IN IP4 0.0.0.0 s=-t=0 0m =audio54609 RTP/SAVPF 109 Bob is at: SDP:
 v=0o=bob 19915 0 IN IP4 0.0.0.0 s=-t=0 0m =audio 61001 RTP/SAV PF 109 Alice Bob SRTP SRTP http://
  61. 61. CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC? 16 H aveBob callm ehere! SDP:
 v=0o=alice20518 0 IN IP4 0.0.0.0 s=-t=0 0m =audio54609 RTP/SAVPF 109 Bob is at: SDP:
 v=0o=bob 19915 0 IN IP4 0.0.0.0 s=-t=0 0m =audio 61001 RTP/SAV PF 109 Alice Bob SRTP SRTP http://
  62. 62. CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC? 16 H aveBob callm ehere! SDP:
 v=0o=alice20518 0 IN IP4 0.0.0.0 s=-t=0 0m =audio54609 RTP/SAVPF 109 Bob is at: SDP:
 v=0o=bob 19915 0 IN IP4 0.0.0.0 s=-t=0 0m =audio 61001 RTP/SAV PF 109 Alice Bob SRTP SRTP X http://
  63. 63. CAN YOU SPEAK MAGIC? That’s how it works 17
  64. 64. CAN YOU SPEAK MAGIC? Here’s how it breaks 18
  65. 65. CAN YOU SPEAK MAGIC? ENVIRONMENTAL PROBLEMS 19
  66. 66. CAN YOU SPEAK MAGIC? ENVIRONMENTAL PROBLEMS 19 •Microphone or Speakers Muted
  67. 67. CAN YOU SPEAK MAGIC? ENVIRONMENTAL PROBLEMS 19 •Microphone or Speakers Muted
  68. 68. CAN YOU SPEAK MAGIC? ENVIRONMENTAL PROBLEMS 19 •Microphone or Speakers Muted •Too Dark or Too Backlit
  69. 69. CAN YOU SPEAK MAGIC? ENVIRONMENTAL PROBLEMS 19 •Microphone or Speakers Muted •Too Dark or Too Backlit •HW or Driver Issues
  70. 70. CAN YOU SPEAK MAGIC? ENVIRONMENTAL PROBLEMS 19 •Microphone or Speakers Muted •Too Dark or Too Backlit •HW or Driver Issues •USB Headsets
  71. 71. CAN YOU SPEAK MAGIC? ENVIRONMENTAL PROBLEMS 19 •Microphone or Speakers Muted •Too Dark or Too Backlit •HW or Driver Issues •USB Headsets •I’m looking at you, Windows
  72. 72. CAN YOU SPEAK MAGIC? ENVIRONMENTAL PROBLEMS 19 •Microphone or Speakers Muted •Too Dark or Too Backlit •HW or Driver Issues •USB Headsets •I’m looking at you, Windows •https://test.webrtc.org/
  73. 73. CAN YOU SPEAK MAGIC? USABILITY PROBLEMS 20
  74. 74. CAN YOU SPEAK MAGIC? USABILITY PROBLEMS •Failing to deploy TLS Cert 20
  75. 75. CAN YOU SPEAK MAGIC? USABILITY PROBLEMS •Failing to deploy TLS Cert •Not allowing user-chosen device selection 20
  76. 76. CAN YOU SPEAK MAGIC? USABILITY PROBLEMS •Failing to deploy TLS Cert •Not allowing user-chosen device selection •Video element rendered
 off-screen 20
  77. 77. CAN YOU SPEAK MAGIC? USABILITY PROBLEMS •Failing to deploy TLS Cert •Not allowing user-chosen device selection •Video element rendered
 off-screen •<video> or <audio> paused 20
  78. 78. CAN YOU SPEAK MAGIC? BROWSER PROBLEMS 21
  79. 79. CAN YOU SPEAK MAGIC? BROWSER PROBLEMS •Spec still evolving 21
  80. 80. CAN YOU SPEAK MAGIC? BROWSER PROBLEMS •Spec still evolving •…though 1.0 is on the horizon 21
  81. 81. CAN YOU SPEAK MAGIC? BROWSER PROBLEMS •Spec still evolving •…though 1.0 is on the horizon •Still no native IE or Safari :( 21
  82. 82. CAN YOU SPEAK MAGIC? BROWSER PROBLEMS •Spec still evolving •…though 1.0 is on the horizon •Still no native IE or Safari :( •MUCH more stable than 1 year ago 21
  83. 83. CAN YOU SPEAK MAGIC? BROWSER PROBLEMS •Spec still evolving •…though 1.0 is on the horizon •Still no native IE or Safari :( •MUCH more stable than 1 year ago •Chrome dropping non-TLS HTTP 21
  84. 84. CAN YOU SPEAK MAGIC? BROWSER PROBLEMS •Spec still evolving •…though 1.0 is on the horizon •Still no native IE or Safari :( •MUCH more stable than 1 year ago •Chrome dropping non-TLS HTTP 21
  85. 85. CAN YOU SPEAK MAGIC? BROWSER PROBLEMS •Spec still evolving •…though 1.0 is on the horizon •Still no native IE or Safari :( •MUCH more stable than 1 year ago •Chrome dropping non-TLS HTTP • https://webrtcstandards.info/ 21
  86. 86. CAN YOU SPEAK MAGIC? BROWSER PROBLEMS •Spec still evolving •…though 1.0 is on the horizon •Still no native IE or Safari :( •MUCH more stable than 1 year ago •Chrome dropping non-TLS HTTP • https://webrtcstandards.info/ •Well, Everybody Better
 Restart Their Chrome 21
  87. 87. CAN YOU SPEAK MAGIC? SOLVING BROWSER INCOMPAT 22
  88. 88. CAN YOU SPEAK MAGIC? SOLVING BROWSER INCOMPAT •Use a “polyfill” - Adapter.js 22
  89. 89. CAN YOU SPEAK MAGIC? SOLVING BROWSER INCOMPAT •Use a “polyfill” - Adapter.js •https://github.com/webrtc/adapter 22
  90. 90. CAN YOU SPEAK MAGIC? SOLVING BROWSER INCOMPAT •Use a “polyfill” - Adapter.js •https://github.com/webrtc/adapter •IE & Safari: deploy Temasys 22
  91. 91. CAN YOU SPEAK MAGIC? SOLVING BROWSER INCOMPAT •Use a “polyfill” - Adapter.js •https://github.com/webrtc/adapter •IE & Safari: deploy Temasys •http://skylink.io/plugin/ 22
  92. 92. CAN YOU SPEAK MAGIC? SOLVING BROWSER INCOMPAT •Use a “polyfill” - Adapter.js •https://github.com/webrtc/adapter •IE & Safari: deploy Temasys •http://skylink.io/plugin/ •Pick a great WebRTC service provider 22
  93. 93. CAN YOU SPEAK MAGIC? SOLVING BROWSER INCOMPAT •Use a “polyfill” - Adapter.js •https://github.com/webrtc/adapter •IE & Safari: deploy Temasys •http://skylink.io/plugin/ •Pick a great WebRTC service provider 22
  94. 94. CAN YOU SPEAK MAGIC? WEBRTC PROBLEMS & SOLUTIONS 23
  95. 95. CAN YOU SPEAK MAGIC? WEBRTC PROBLEMS & SOLUTIONS •Environmental Problems 23
  96. 96. CAN YOU SPEAK MAGIC? WEBRTC PROBLEMS & SOLUTIONS •Environmental Problems •Change the environment 23
  97. 97. CAN YOU SPEAK MAGIC? WEBRTC PROBLEMS & SOLUTIONS •Environmental Problems •Change the environment •Teach the user 23
  98. 98. CAN YOU SPEAK MAGIC? WEBRTC PROBLEMS & SOLUTIONS •Environmental Problems •Change the environment •Teach the user •Usability Problems 23
  99. 99. CAN YOU SPEAK MAGIC? WEBRTC PROBLEMS & SOLUTIONS •Environmental Problems •Change the environment •Teach the user •Usability Problems •Deploy TLS Certs!!! 23
  100. 100. CAN YOU SPEAK MAGIC? WEBRTC PROBLEMS & SOLUTIONS •Environmental Problems •Change the environment •Teach the user •Usability Problems •Deploy TLS Certs!!! •Test, test, test 23
  101. 101. CAN YOU SPEAK MAGIC? WEBRTC PROBLEMS & SOLUTIONS •Environmental Problems •Change the environment •Teach the user •Usability Problems •Deploy TLS Certs!!! •Test, test, test •Browser Compat & Infrastructure Problems 23
  102. 102. CAN YOU SPEAK MAGIC? WEBRTC PROBLEMS & SOLUTIONS •Environmental Problems •Change the environment •Teach the user •Usability Problems •Deploy TLS Certs!!! •Test, test, test •Browser Compat & Infrastructure Problems •Lean on someone who has already fixed it 23
  103. 103. CAN YOU SPEAK MAGIC? 24 http://mojolingo.com @MojoLingo @bklang bklang@mojolingo.com http://adhearsion.com @Adhearsion LINKS & QUESTIONS •https://test.webrtc.org/ •https://webrtcstandards.info/ •https://github.com/webrtc/adapter •http://skylink.io/plugin/

×