Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebRTC - for when μ seconds are not fast enough

Cf08f668c5266d60999768f918561fef?s=47 Jason S.
September 02, 2016

WebRTC - for when μ seconds are not fast enough

Cf08f668c5266d60999768f918561fef?s=128

Jason S.

September 02, 2016
Tweet

Transcript

  1. WebRTC for when μ seconds are not fast enough

  2. https://teamch.at

  3. • What is WebRTC? • How do you use it?

    • Demo • Technical Bits • Future!
  4. P2P

  5. Video | Audio | Data

  6. And more! • Easiest way to deploy a P2P/audio/video application

    • Encrypted • Lowest possible latency
  7. Peer Discovery

  8. Connection

  9. Source: https://hpbn.co/webrtc/

  10. Source: https://hpbn.co/webrtc/

  11. Source: https://hpbn.co/webrtc/

  12. Source: https://hpbn.co/webrtc/

  13. The Real World Google Hangouts Appear.in Slack Calls Discord Apple

    FaceTime Skype Teamch.at WebTorrent
  14. http://iswebrtcreadyyet.com

  15. Source: https://hpbn.co/webrtc/

  16. Source: https://hpbn.co/webrtc/ Offer

  17. The Offer • What each browser is capable of doing

    • What each browser wants to do with this connection • What encryption it can/wants to do • What protocol to speak • IETF RFC 3264 https://www.ietf.org/rfc/rfc3264.txt
  18. Source: https://hpbn.co/webrtc/ Offer

  19. Source: https://hpbn.co/webrtc/ Offer Offer

  20. Source: https://hpbn.co/webrtc/ Offer Offer

  21. Source: https://hpbn.co/webrtc/ Offer Offer

  22. Signaling • WebSockets - Phoenix Presence • IRC/Slack/XMMP/SIP/Jingle/Ajax • Any

    way you could share a small JSON payload.
  23. 1.Create an offer to connect 2.Send the offer to another

    browser, “Signaling” 3.Send data back and forth
  24. Use a Library • Every Browser is a little different

    • simple-peer is great
  25. Demo

  26. https://phoenix-webrtc.herokuapp.com https://github.com/jeregrine/ phoenix_webrtc

  27. var SimplePeer = require('simple-peer') var peer = new Peer({ initiator:

    true, trickle: false }) peer.on('error', function (err) { console.log('error', err) }) peer.on('signal', function (offer) { // Offer is ready to send to B, Signaling console.log('SIGNAL', JSON.stringify(offer)) }) // Accept an offer from your friend B, Signaling peer.signal(JSON.parse(bOffer)) peer.on('connect', function () { // Send the data after a connection is made peer.send('whatever' + Math.random()) }) // Receive data from B/ peer.on('data', function (data) { console.log('data: ' + data) })
  28. STUN / ICE

  29. TURN

  30. • Host your own https://github.com/processone/stun • Or use a service

    like Twilio https://www.twilio.com/ stun-turn
  31. Data Channel

  32. UDP + DTLS + SCTP

  33. Source: https://hpbn.co/webrtc/

  34. Source: https://hpbn.co/webrtc/

  35. Future!

  36. WebAudio Support

  37. Screen Sharing

  38. Stream Re- Broadcasting

  39. None
  40. Canvas Support

  41. gen_webrtc

  42. Phoenix.Transports.WebRTC

  43. Learn more • hpbn.co High Performance Browser Networking • webrtc.org

    • webrtchacks.com
  44. HTTP/WebSockets are great!

  45. Jason Stiebs @peregrine github.com/jeregrine jeregrine on IRC and Slack rokkincat.com

    Elixir Coaching Consulting Development