WebRTC - for when μ seconds are not fast enough

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