WebRTC once was the posterboy of a new wave of browser applications, which relieved us of hassle-full video conferencing and brought us tools like appear.in & Google Hangouts. It kinda is like that character of your favourite TV-Show that is so identified with the role, that they can not land a new job in any other series. It's time to break the curse, because WebRTC has so much more to offer than just video conferencing! I'll invite you to join me on an explorative mission in the land of WebRTC Datachannels and all sorts of crazy networking experiments, that'll will lead us to the land of "HTTP via WebRTC" on an continent called "The Decentralized Web"

1. WebRTC
Serverless
This Time's For Real!

7. 📺 Video Conferencing - Skype…
💡 IOT Devices - Nest, Netatmo…
⌨ Code - Github, Bitbucket…
📟 Messengers - WhatsApp, facebook…
💾 Files - Dropbox…

8. Centralized
Internet

10. 📹 Surveillance
📕 Censorship
❌ Outages
🌊 Privacy breaches, leaks

11. DeCentralized
Internet

12. P2P - WebRTC

13. P2P - WebRTC
🥳 🤔
🤯

14. Server
Browser
Js App
Message
Browser
Js App
Message

15. Browser
Js App
Browser
Js App
Message
Message

16. Data
Exchange

17. Data
Exchange

18. Data
Exchange

19. Data
Exchange

20. StunSCTP
SCTP === Stream Control Transmission Protocol
Basically the same as TCP & UDP
Supports both, Reliable & Unreliable Transfer

21. StunSCTP
SCTP === Stream Control Transmission Protocol
Basically the same as TCP & UDP
Supports both, Reliable & Unreliable Transfer

22. Signaling &
Discovery

23. Browser
Js App
Browser
Js App
Message
Message
Stun Stun
Who Am I?
Where Am I?
Help!
Who Am I?
Where Am I?
Help!

24. Stun
STUN === Session Traversal Utilities for NAT
NAT === Network Address Translation
Basically A SERVER that tells US our Public IP
Stun

25. Browser
Js App
Browser
Js App
Message
Message
Stun StunTurn*
My
Peers?
My
Peers?
ICE ICE

26. Turn
TURN === Traversal Using Relays around NAT
EffectivEly A proxy
Websockets* as Fallback
Turn

27. StunICE
192.178.168.X
192.178.168.X
93.226.191.133
ICE === Interactive Connectivity Establishment
FRAMEWORK to find peers (ICE Candidates)
Networks Are behinD Nat, Firewall, ETC.
IPv4 Address Space is limited (~ 4.2 Billion)
Uses STUn/TURN to traverse NAT

28. Browser
Js App
Browser
Js App
Message
Message
Stun Stun
Who Am I?
Get Ip
(Nat Traversal)
Get Encryption Key
Who Am I?
Get Ip
(Nat Traversal)
Get Encryption Key
Dealer
My
Peers?
My
Peers?

29. Dealer
Initiator
Create Offer
Signaling
Server
Say „Hi!“ To the signaling server

30. StunSDP
SDP === Session Description protocol
Contains ALL INFO For tHE peers to Connect

31. Create
Offer

32. Create
Offer

33. Create
Offer

34. Dealer
Create Offer Set Remote Description
Create Answer
Initiator
Signaling
Server Recipient
Signaling Server Tells Other Peer that we’re there
Peer creates An Answer & Sends it

35. Create
Answer

36. Create
Answer

37. Create
Answer

38. Dealer
Set Remote Description
Create Answer
Create Offer
Set Remote Description
Initiator
Signaling
Server Recipient
Signaling server sends DescriptiOn to Peer

39. Remote
Description

40. Browser
Js App
Browser
Js App
Handshake
Stun Stun
Who Am I?
Get Ip
(Nat Traversal)
Get Encryption Key
Who Am I?
Get Ip
(Nat Traversal)
Get Encryption Key
Dealer
My
Peers?
My
Peers?
Message

42. Browser
Js App
Node.Js Rpi
DataHandshake
Stun StunDealer
Message
Data
Data

43. But…

44. Browser
Js App
Node.Js Rpi
Route
Stun StunDealer
Route
Route
HTTP
Request(s)
Browser
Js App
Service
Worker

45. Service
Worker
Service
Worker Rpi
RTC
Communication
HTTP
Request(s)
Man In the Middle
Catches HTTP Requests
CONVERTS HTTP Requests TO RTC Messages
SENDS RTC MESSAGES TO PEER
CONVERTS RTC answers TO HTTP RESPONSES

46. Service
Worker
Can not access Webrtc directly
Can do Message passing with the main thread
Service
Worker
RpiBrowser

47. Requests a Ressource via HTTP
Service Worker Intercepts request
HTTP
Request(s)
BrowserBrowser

48. Service
Worker
Checks if request should be fetched via RTC
SENDs a POST-Message to the Main thread
HTTP
Request(s)
PostMessage
REQ Content

49. Sends the HTTP request via WebRTC datachannel
HTTP
Request(s)
PostMessage
REQ Content WebRTC MSG
REQ Content
Browser

50. Service
Worker
Turn the RTC Msg into an <http.IncomingMessage>
Feeds the Data into userland Code
Takes the Response & Sends it as an RTC MSG
HTTP
Request(s)
PostMessage
REQ Content WebRTC MSG
REQ Content
WebRTC MSG
RESP Content
Rpi

51. Dispatches the RPC MSG VIA Post Message to SW
HTTP
Request(s)
PostMessage
REQ Content WebRTC MSG
REQ Content
WebRTC MSG
RESP Content
PostMessage
RESP Content
Browser

52. Service
Worker
Turns the Post Message Content into an HTTP RESP
Answers the original HTTP request
HTTP
Request(s)
PostMessage
REQ Content WebRTC MSG
REQ Content
WebRTC MSG
RESP Content
PostMessage
RESP Content
HTTP
Response(s)

53. Service
Worker

54. Service
Worker

55. Service
Worker

56. Client
Side

57. Client
Side

58. Client
Side

59. Client
Side

60. Server
Side

61. Server
Side

62. Server
Side

63. Server
Side

64. Browser
Js App
Node.Js Rpi
Route
Stun Stun
My
Peers?
My
Peers?
HTTP
Request(s)
Route
Route
Service
Worker
RpiRpi GwRpi RpiRpi

65. 📹 IT’s not only about Video conferencing
🌏 It’s Not only meant for the web (NAtive, c++, etc.)
📦 General Purpose Data transfer
💌 Data channels allow Message passing between peers
↔ Bidirectional Transfer of Text & Binary
⏰ Real time
📃 SCTP - Provides both, UDP AND TCP SEMANTICS
🤯 wonderful new-ish tool to have fun with

66. 😃 Local Peer Connection without stun & Signaling
🤕 Firefox is a bit stubborn
🙃 Performance & Reliability
😰 Keep the Lib size below 2kb
🥳 More Signaling adapters
🤓 Create a Websocket facade
😅 Release the packages
🤯

67. Thank
You
https://asciidisco.com / E-mail: public@asciidisco.com / Sebastian Golasch 2020